Botões e Links

<< Click to Display Table of Contents >>

Navigation:  Bootstrap >

Botões e Links

Previous pageReturn to chapter overviewNext page

 

Tela

 

botes_links

 

Fonte

 

<!DOCTYPE html>
<html>
  <head>
    <link href="css/bootstrap.min.css" rel="stylesheet">
   <link href="css/bootstrap-responsive.css" rel="stylesheet">
   <style>
      </style>
  </head>
  <body>
  
     <div class="container-fluid">
       <div class="row-fluid">
          <div class="span3">
            <h3>Botões</h3>
              <a href="#" class="btn">Botão btn</a> <hr/>
              <a href="#" class="btn btn-primary">Botão btn-primary</a> <hr/>
              <a href="#" class="btn btn-danger">Botão btn-danger</a> <hr/>
              <a href="#" class="btn btn-info">Botão btn-info</a> <hr/>
              <a href="#" class="btn btn-inverse">Botão btn-inverse</a> <hr/>
              <a href="#" class="btn btn-success">Botão btn-success</a> <hr/>
              <a href="#" class="btn btn-warning">Botão btn-warning</a> 
         </div>
         
          <div class="span3">
            <h3>Botões tamanhos diferentes</h3>
              <a href="#" class="btn btn-large btn-primary">Botão LARGE</a> <hr/>
              <a href="#" class="btn btn-small btn-primary">Botão SMALL</a> <hr/>
              <a href="#" class="btn btn-mini btn-primary">Botão MINI</a> 
         </div>
 
          <div class="span3">
            <h3>Botões tipo INPUT CLASS=BUTTON</h3>
             <input type="button" class="btn btn-primary" value="Button input type" /><hr/>
             <input type="button" class="btn btn-link" value="Button mas como link" />
         </div>
 
          <div class="span3">
         
            <h3>Botões com icones</h3>
            <a href="http://twitter.github.com/bootstrap/base-css.html#images">http://twitter.github.com/bootstrap/base-css.html#images</a><hr/>
              <a href="#" class="btn"><i class="icon-trash"></i> Botão lixeira</a> <hr/>
              <a href="#" class="btn btn-primary"><i class="icon-print icon-white"></i> Botão lixeira</a>       
         </div>
      <div>
    </div>
 
  </body>
 
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
  <script src="js/bootstrap.min.js"></script>
</html>