git.roojs.org Git - bootswatch/blob - bower_components/font-awesome/src/_includes/examples/bootstrap.html

   1 <section id="bootstrap">
   2   <h2 class="page-header">Bootstrap 3 Examples</h2>
   3   <div class="row">
   4     <div class="col-md-3 col-sm-4">
   5       <p>
   6         <a class="btn btn-danger" href="#">
   7           <i class="fa fa-trash-o fa-lg"></i> Delete</a>
   8         <a class="btn btn-default btn-sm" href="#">
   9           <i class="fa fa-cog"></i> Settings</a>
  10       </p>
  11       <p>
  12         <a class="btn btn-lg btn-success" href="#">
  13           <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
  14       </p>
  15       <div class="margin-bottom">
  16         <div class="btn-group">
  17           <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
  18           <a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
  19           <a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
  20           <a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
  21         </div>
  22       </div>
  23       <div class="margin-bottom">
  24         <div class="input-group margin-bottom-sm">
  25           <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  26           <input class="form-control" type="text" placeholder="Email address">
  27         </div>
  28         <div class="input-group">
  29           <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
  30           <input class="form-control" type="password" placeholder="Password">
  31         </div>
  32       </div>
  33       <div class="margin-bottom">
  34         <div class="btn-group open">
  35           <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
  36           <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
  37             <span class="fa fa-caret-down"></span></a>
  38           <ul class="dropdown-menu">
  39             <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
  40             <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
  41             <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
  42             <li class="divider"></li>
  43             <li><a href="#"><i class="i"></i> Make admin</a></li>
  44           </ul>
  45         </div>
  46       </div>
  47
  48     </div>
  49     <div class="col-md-9 col-sm-8">
  50       <p>
  51         Font Awesome works great with the full range of Bootstrap components.
  52       </p>
  53 {% highlight html %}
  54 <a class="btn btn-danger" href="#">
  55   <i class="fa fa-trash-o fa-lg"></i> Delete</a>
  56 <a class="btn btn-default btn-sm" href="#">
  57   <i class="fa fa-cog"></i> Settings</a>
  58
  59 <a class="btn btn-lg btn-success" href="#">
  60   <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
  61
  62 <div class="btn-group">
  63   <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
  64   <a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
  65   <a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
  66   <a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
  67 </div>
  68
  69 <div class="input-group margin-bottom-sm">
  70   <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  71   <input class="form-control" type="text" placeholder="Email address">
  72 </div>
  73 <div class="input-group">
  74   <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
  75   <input class="form-control" type="password" placeholder="Password">
  76 </div>
  77
  78 <div class="btn-group open">
  79   <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
  80   <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
  81     <span class="fa fa-caret-down"></span></a>
  82   <ul class="dropdown-menu">
  83     <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
  84     <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
  85     <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
  86     <li class="divider"></li>
  87     <li><a href="#"><i class="i"></i> Make admin</a></li>
  88   </ul>
  89 </div>
  90 {% endhighlight %}
  91     </div>
  92   </div>
  93 </section>