diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/components.html | 50 | ||||
| -rw-r--r-- | docs/templates/pages/components.mustache | 50 |
2 files changed, 100 insertions, 0 deletions
diff --git a/docs/components.html b/docs/components.html index 8399b4297..d6d4cc1bc 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1044,12 +1044,30 @@ <h3>Brand</h3> <p>A simple link to show your brand or project name only requires an anchor tag.</p> + <div class="bs-docs-example"> + <div class="navbar"> + <div class="navbar-inner"> + <a class="brand" href="#">Title</a> + </div> + </div> + </div> <pre class="prettyprint linenums"> <a class="brand" href="#">Project name</a> </pre> <h3>Nav links</h3> <p>Nav items are simple to add via unordered lists.</p> + <div class="bs-docs-example"> + <div class="navbar"> + <div class="navbar-inner"> + <ul class="nav"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Link</a></li> + <li><a href="#">Link</a></li> + </ul> + </div> + </div> + </div> <pre class="prettyprint linenums"> <ul class="nav"> <li class="active"> @@ -1060,6 +1078,20 @@ </ul> </pre> <p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:</p> + <div class="bs-docs-example"> + <div class="navbar"> + <div class="navbar-inner"> + <ul class="nav"> + <li class="active"><a href="#">Home</a></li> + <li class="divider-vertical"></li> + <li><a href="#">Link</a></li> + <li class="divider-vertical"></li> + <li><a href="#">Link</a></li> + <li class="divider-vertical"></li> + </ul> + </div> + </div> + </div> <pre class="prettyprint linenums"> <ul class="nav"> ... @@ -1070,6 +1102,15 @@ <h3>Forms</h3> <p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p> + <div class="bs-docs-example"> + <div class="navbar"> + <div class="navbar-inner"> + <form class="navbar-form pull-left"> + <input type="text" class="span2"> + </form> + </div> + </div> + </div> <pre class="prettyprint linenums"> <form class="navbar-form pull-left"> <input type="text" class="span2"> @@ -1078,6 +1119,15 @@ <h3>Search form</h3> <p>For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.</p> + <div class="bs-docs-example"> + <div class="navbar"> + <div class="navbar-inner"> + <form class="navbar-search pull-left"> + <input type="text" class="search-query" placeholder="Search"> + </form> + </div> + </div> + </div> <pre class="prettyprint linenums"> <form class="navbar-search pull-left"> <input type="text" class="search-query" placeholder="Search"> diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 7c9499947..f0f19ee72 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -973,12 +973,30 @@ <h3>{{_i}}Brand{{/i}}</h3> <p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p> + <div class="bs-docs-example"> + <div class="navbar"> + <div class="navbar-inner"> + <a class="brand" href="#">{{_i}}Title{{/i}}</a> + </div> + </div> + </div>{{! /example }} <pre class="prettyprint linenums"> <a class="brand" href="#">{{_i}}Project name{{/i}}</a> </pre> <h3>{{_i}}Nav links{{/i}}</h3> <p>{{_i}}Nav items are simple to add via unordered lists.{{/i}}</p> + <div class="bs-docs-example"> + <div class="navbar"> + <div class="navbar-inner"> + <ul class="nav"> + <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li> + <li><a href="#">{{_i}}Link{{/i}}</a></li> + <li><a href="#">{{_i}}Link{{/i}}</a></li> + </ul> + </div> + </div> + </div>{{! /example }} <pre class="prettyprint linenums"> <ul class="nav"> <li class="active"> @@ -989,6 +1007,20 @@ </ul> </pre> <p>{{_i}}You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:{{/i}}</p> + <div class="bs-docs-example"> + <div class="navbar"> + <div class="navbar-inner"> + <ul class="nav"> + <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li> + <li class="divider-vertical"></li> + <li><a href="#">{{_i}}Link{{/i}}</a></li> + <li class="divider-vertical"></li> + <li><a href="#">{{_i}}Link{{/i}}</a></li> + <li class="divider-vertical"></li> + </ul> + </div> + </div> + </div>{{! /example }} <pre class="prettyprint linenums"> <ul class="nav"> ... @@ -999,6 +1031,15 @@ <h3>{{_i}}Forms{{/i}}</h3> <p>{{_i}}To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.{{/i}}</p> + <div class="bs-docs-example"> + <div class="navbar"> + <div class="navbar-inner"> + <form class="navbar-form pull-left"> + <input type="text" class="span2"> + </form> + </div> + </div> + </div>{{! /example }} <pre class="prettyprint linenums"> <form class="navbar-form pull-left"> <input type="text" class="span2"> @@ -1007,6 +1048,15 @@ <h3>{{_i}}Search form{{/i}}</h3> <p>{{_i}}For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.{{/i}}</p> + <div class="bs-docs-example"> + <div class="navbar"> + <div class="navbar-inner"> + <form class="navbar-search pull-left"> + <input type="text" class="search-query" placeholder="{{_i}}Search{{/i}}"> + </form> + </div> + </div> + </div>{{! /example }} <pre class="prettyprint linenums"> <form class="navbar-search pull-left"> <input type="text" class="search-query" placeholder="{{_i}}Search{{/i}}"> |