diff options
Diffstat (limited to 'components.html')
| -rw-r--r-- | components.html | 100 |
1 files changed, 69 insertions, 31 deletions
diff --git a/components.html b/components.html index 8298a00b6..12c72e00a 100644 --- a/components.html +++ b/components.html @@ -558,9 +558,9 @@ base_url: "../" <div class="bs-example"> <div class="btn-group btn-group-justified"> - <button type="button" class="btn btn-default">Left</button> - <button type="button" class="btn btn-default">Middle</button> - <button type="button" class="btn btn-default">Right</button> + <a class="btn btn-default" role="button">Left</a> + <a class="btn btn-default" role="button">Middle</a> + <a class="btn btn-default" role="button">Right</a> </div> </div> {% highlight html %} @@ -1243,7 +1243,11 @@ base_url: "../" <h2 id="nav-justified">Justified</h2> - <p>Easily make tabs or pills equal widths of their parent with <code>.nav-justified</code>.</p> + <p>Easily make tabs or pills equal widths of their parent at screens wider than 768px with <code>.nav-justified</code>. On smaller screens, the nav links are stacked.</p> + <div class="bs-callout bs-callout-warning"> + <h4>WebKit and responsive justified navs</h4> + <p>Chrome and Safari both exhibit a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p> + </div> <div class="bs-example"> <ul class="nav nav-tabs nav-justified"> <li class="active"><a href="#">Home</a></li> @@ -1493,8 +1497,9 @@ base_url: "../" </div> - <h2 id="navbar-buttons">Buttons</h2> - <p>For buttons not residing in a <code><form></code>, add this class to vertically center buttons within a navbar.</p> + <h2 id="navbar-forms">Forms</h2> + <p>Place form content within <code>.navbar-form</code> for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.</p> + <p>As a heads up, <code>.navbar-form</code> shares much of its code with <code>.form-inline</code> via mixin.</p> <div class="bs-example"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> @@ -1507,6 +1512,39 @@ base_url: "../" <a class="navbar-brand" href="#">Brand</a> </div> <div class="collapse navbar-collapse navbar-ex2-collapse"> + <form class="navbar-form navbar-left" role="search"> + <div class="form-group"> + <input type="text" class="form-control" placeholder="Search"> + </div> + <button type="submit" class="btn btn-default">Submit</button> + </form> + </div> + </nav> + </div> +{% highlight html %} +<form class="navbar-form navbar-left" role="search"> + <div class="form-group"> + <input type="text" class="form-control" placeholder="Search"> + </div> + <button type="submit" class="btn btn-default">Submit</button> +</form> +{% endhighlight %} + + + <h2 id="navbar-buttons">Buttons</h2> + <p>For buttons not residing in a <code><form></code>, add this class to vertically center buttons within a navbar.</p> + <div class="bs-example"> + <nav class="navbar navbar-default" role="navigation"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex3-collapse"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a class="navbar-brand" href="#">Brand</a> + </div> + <div class="collapse navbar-collapse navbar-ex3-collapse"> <button type="button" class="btn btn-default navbar-btn">Sign in</button> </div> </nav> @@ -1521,7 +1559,7 @@ base_url: "../" <div class="bs-example"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex3-collapse"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex4-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -1529,7 +1567,7 @@ base_url: "../" </button> <a class="navbar-brand" href="#">Brand</a> </div> - <div class="collapse navbar-collapse navbar-ex3-collapse"> + <div class="collapse navbar-collapse navbar-ex4-collapse"> <p class="navbar-text">Signed in as Mark Otto</p> </div> </nav> @@ -1544,7 +1582,7 @@ base_url: "../" <div class="bs-example"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex4-collapse"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex5-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -1552,7 +1590,7 @@ base_url: "../" </button> <a class="navbar-brand" href="#">Brand</a> </div> - <div class="collapse navbar-collapse navbar-ex4-collapse"> + <div class="collapse navbar-collapse navbar-ex5-collapse"> <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p> </div> </nav> @@ -1573,7 +1611,7 @@ base_url: "../" <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex5-collapse"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex6-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -1583,7 +1621,7 @@ base_url: "../" </div> <!-- Collect the nav links, forms, and other content for toggling --> - <div class="collapse navbar-collapse navbar-ex5-collapse"> + <div class="collapse navbar-collapse navbar-ex6-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> @@ -1614,7 +1652,7 @@ body { padding-top: 70px; } <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex6-collapse"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex7-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -1624,7 +1662,7 @@ body { padding-top: 70px; } </div> <!-- Collect the nav links, forms, and other content for toggling --> - <div class="collapse navbar-collapse navbar-ex6-collapse"> + <div class="collapse navbar-collapse navbar-ex7-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> @@ -1655,7 +1693,7 @@ body { padding-bottom: 70px; } <nav class="navbar navbar-default navbar-static-top" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex7-collapse"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex8-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -1665,7 +1703,7 @@ body { padding-bottom: 70px; } </div> <!-- Collect the nav links, forms, and other content for toggling --> - <div class="collapse navbar-collapse navbar-ex7-collapse"> + <div class="collapse navbar-collapse navbar-ex8-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> @@ -1687,7 +1725,7 @@ body { padding-bottom: 70px; } <nav class="navbar navbar-inverse" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex8-collapse"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex9-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -1697,7 +1735,7 @@ body { padding-bottom: 70px; } </div> <!-- Collect the nav links, forms, and other content for toggling --> - <div class="collapse navbar-collapse navbar-ex8-collapse"> + <div class="collapse navbar-collapse navbar-ex9-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> @@ -2027,7 +2065,7 @@ body { padding-bottom: 70px; } <div class="container"> <h1>Hello, world!</h1> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> - <p><a class="btn btn-primary btn-lg">Learn more</a></p> + <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p> </div> </div> </div> @@ -2036,7 +2074,7 @@ body { padding-bottom: 70px; } <div class="container"> <h1>Hello, world!</h1> <p>...</p> - <p><a class="btn btn-primary btn-lg">Learn more</a></p> + <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p> </div> </div> {% endhighlight %} @@ -2114,33 +2152,33 @@ body { padding-bottom: 70px; } <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p> <div class="bs-example"> <div class="row"> - <div class="col-sm-6 col-md-3"> + <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,"> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> - <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p> + <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> - <div class="col-sm-6 col-md-3"> + <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,"> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> - <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p> + <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> - <div class="col-sm-6 col-md-3"> + <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,"> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> - <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p> + <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> @@ -2148,13 +2186,13 @@ body { padding-bottom: 70px; } </div><!-- /.bs-example --> {% highlight html %} <div class="row"> - <div class="col-sm-6 col-md-3"> + <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img data-src="holder.js/300x200" alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>...</p> - <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p> + <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> @@ -2171,7 +2209,7 @@ body { padding-bottom: 70px; } <div class="page-header"> <h1 id="alerts">Alerts</h1> </div> - <p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="../javascript/#js-alerts">alerts jQuery plugin</a>.</p> + <p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="../javascript/#alerts">alerts jQuery plugin</a>.</p> <h2 id="alerts-examples">Examples</h2> <p>Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p> @@ -2205,13 +2243,13 @@ body { padding-bottom: 70px; } <h2 id="alerts-dismissable">Dismissable alerts</h2> <p>Build on any alert by adding an optional <code>.alert-dismissable</code> and close button.</p> <div class="bs-example"> - <div class="alert alert-dismissable"> + <div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <strong>Warning!</strong> Best check yo self, you're not looking too good. </div> </div> {% highlight html %} -<div class="alert alert-dismissable"> +<div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <strong>Warning!</strong> Best check yo self, you're not looking too good. </div> |