浏览代码

consolidating bootstrap examples

davegandy 11 年之前
父节点
当前提交
a6d87164ee

+ 93 - 0
src/_includes/examples/bootstrap.html

@@ -0,0 +1,93 @@
+<section id="bootstrap">
+  <h2 class="page-header">Bootstrap 3</h2>
+  <div class="row">
+    <div class="col-md-3 col-sm-4">
+      <p>
+        Font Awesome works great with the full range of Bootstrap components.
+      </p>
+      <p>
+        <a class="btn btn-danger" href="#">
+          <i class="fa fa-trash-o fa-lg"></i> Delete</a>
+        <a class="btn btn-default btn-sm" href="#">
+          <i class="fa fa-cog"></i> Settings</a>
+      </p>
+      <p>
+        <a class="btn btn-lg btn-success" href="#">
+          <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
+      </p>
+      <div class="margin-bottom">
+        <div class="btn-group">
+          <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
+          <a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
+          <a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
+          <a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
+        </div>
+      </div>
+      <div class="margin-bottom">
+        <div class="input-group margin-bottom-sm">
+          <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
+          <input class="form-control" type="text" placeholder="Email address">
+        </div>
+        <div class="input-group">
+          <span class="input-group-addon"><i class="fa fa-key"></i></span>
+          <input class="form-control" type="password" placeholder="Password">
+        </div>
+      </div>
+      <div class="margin-bottom">
+        <div class="btn-group open">
+          <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fixed-width"></i> User</a>
+          <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
+            <span class="fa fa-caret-down"></span></a>
+          <ul class="dropdown-menu">
+            <li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Edit</a></li>
+            <li><a href="#"><i class="fa fa-trash-o fa-fixed-width"></i> Delete</a></li>
+            <li><a href="#"><i class="fa fa-ban fa-fixed-width"></i> Ban</a></li>
+            <li class="divider"></li>
+            <li><a href="#"><i class="i"></i> Make admin</a></li>
+          </ul>
+        </div>
+      </div>
+
+    </div>
+    <div class="col-md-9 col-sm-8">
+{% highlight html %}
+<a class="btn btn-danger" href="#">
+  <i class="fa fa-trash-o fa-lg"></i> Delete</a>
+<a class="btn btn-default btn-sm" href="#">
+  <i class="fa fa-cog"></i> Settings</a>
+
+<a class="btn btn-lg btn-success" href="#">
+  <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
+
+<div class="btn-group">
+  <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
+  <a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
+  <a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
+  <a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
+</div>
+
+<div class="input-group margin-bottom-sm">
+  <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
+  <input class="form-control" type="text" placeholder="Email address">
+</div>
+<div class="input-group">
+  <span class="input-group-addon"><i class="fa fa-key"></i></span>
+  <input class="form-control" type="password" placeholder="Password">
+</div>
+
+<div class="btn-group open">
+  <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fixed-width"></i> User</a>
+  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
+    <span class="fa fa-caret-down"></span></a>
+  <ul class="dropdown-menu">
+    <li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Edit</a></li>
+    <li><a href="#"><i class="fa fa-trash-o fa-fixed-width"></i> Delete</a></li>
+    <li><a href="#"><i class="fa fa-ban fa-fixed-width"></i> Ban</a></li>
+    <li class="divider"></li>
+    <li><a href="#"><i class="i"></i> Make admin</a></li>
+  </ul>
+</div>
+{% endhighlight %}
+    </div>
+  </div>
+</section>

+ 6 - 6
src/_includes/examples/button-groups.html

@@ -3,12 +3,12 @@
   <div class="row">
     <div class="col-md-3 col-sm-4">
       <p>
-      <div class="btn-group">
-        <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
-        <a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
-        <a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
-        <a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
-      </div>
+        <div class="btn-group">
+          <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
+          <a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
+          <a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
+          <a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
+        </div>
       </p>
     </div>
     <div class="col-md-9 col-sm-8">

+ 0 - 0
src/_includes/examples/list-bullets.html → src/_includes/examples/lists.html


+ 2 - 6
src/_includes/navbar.html

@@ -48,16 +48,12 @@
             <li class="divider"></li>
             <li><a href="{{ page.relative_path }}examples/#inline-icons">Inline Icons</a></li>
             <li><a href="{{ page.relative_path }}examples/#larger-icons">Larger Icons</a></li>
-            <li><a href="{{ page.relative_path }}examples/#bordered-pulled">Bordered & Pulled</a></li>
-            <li><a href="{{ page.relative_path }}examples/#buttons">Buttons</a></li>
-            <li><a href="{{ page.relative_path }}examples/#button-groups">Button Groups</a></li>
-            <li><a href="{{ page.relative_path }}examples/#button-dropdowns">Button Dropdowns</a></li>
             <li><a href="{{ page.relative_path }}examples/#bulleted-lists">Bulleted Lists</a></li>
-            <li><a href="{{ page.relative_path }}examples/#navigation">Navigation</a></li>
-            <li><a href="{{ page.relative_path }}examples/#form-inputs">Form Inputs</a></li>
+            <li><a href="{{ page.relative_path }}examples/#bordered-pulled">Bordered & Pulled</a></li>
             <li><a href="{{ page.relative_path }}examples/#animated-spinner">Animated Spinner</a></li>
             <li><a href="{{ page.relative_path }}examples/#rotated-flipped">Rotated &amp; Flipped</a></li>
             <li><a href="{{ page.relative_path }}examples/#stacked">Stacked</a></li>
+            <li><a href="{{ page.relative_path }}examples/#bootstrap">Bootstrap 3</a></li>
             <li><a href="{{ page.relative_path }}examples/#custom">Custom CSS</a></li>
           </ul>
         </li>

+ 2 - 6
src/examples.html

@@ -22,15 +22,11 @@ relative_path: ../
 
   {% include examples/inline-icons.html %}
   {% include examples/larger-icons.html %}
+  {% include examples/lists.html %}
   {% include examples/bordered-pulled.html %}
-  {% include examples/buttons.html %}
-  {% include examples/button-groups.html %}
-  {% include examples/button-dropdowns.html %}
-  {% include examples/list-bullets.html %}
-  {% include examples/navigation.html %}
-  {% include examples/form-inputs.html %}
   {% include examples/animated-spinner.html %}
   {% include examples/rotated-flipped.html %}
   {% include examples/stacked.html %}
+  {% include examples/bootstrap.html %}
   {% include examples/custom.html %}
 </div>