<title>Bootswatch: Default Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
- <link rel="stylesheet" href="../build/cerulean/bootstrap.min.css" media="screen">
+ <link rel="stylesheet" href="../default/bootstrap.min.css" media="screen">
<link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../assets/css/bootswatch.min.css">
</head>
<div class="navbar navbar-fixed-top">
<div class="container">
- <a href="../" class="navbar-brand">Bootswatch</a>
- <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <div class="nav-collapse collapse" id="navbar-main">
+ <div class="nav-header">
+ <a href="../" class="navbar-brand">Bootswatch</a>
+ <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ </div>
+ <div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
</li>
</ul>
- <ul class="nav navbar-nav pull-right">
+ <ul class="nav navbar-nav navbar-right">
<li><a href="http://builtwithbootstrap.com/" target="_blank">Built With Bootstrap</a></li>
<li><a href="https://wrapbootstrap.com/?ref=bsw" target="_blank">WrapBootstrap</a></li>
</ul>
</div>
<h2 id="buttons-sizes">Button sizes</h2>
- <p>Fancy larger or smaller buttons? Add <code>.btn-large</code> or <code>.btn-small</code> for additional sizes.</p>
+ <p>Fancy larger or smaller buttons? Add <code>.btn-lg</code> or <code>.btn-sm</code> for additional sizes.</p>
<div class="bs-example">
<p>
- <button type="button" class="btn btn-primary btn-large">Large button</button>
- <button type="button" class="btn btn-default btn-large">Large button</button>
+ <button type="button" class="btn btn-primary btn-lg">Large button</button>
+ <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
- <button type="button" class="btn btn-primary btn-small">Small button</button>
- <button type="button" class="btn btn-default btn-small">Small button</button>
+ <button type="button" class="btn btn-primary btn-sm">Small button</button>
+ <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
- <button type="button" class="btn btn-primary btn-mini">Mini button</button>
- <button type="button" class="btn btn-default btn-mini">Mini button</button>
+ <button type="button" class="btn btn-primary btn-xs">Mini button</button>
+ <button type="button" class="btn btn-default btn-xs">Mini button</button>
</p>
</div>
<p>Create block level buttons—those that span the full width of a parent— by adding <code>.btn-block</code>.</p>
<div class="bs-example">
<div class="well" style="max-width: 400px; margin: 0 auto 10px;">
- <button type="button" class="btn btn-primary btn-large btn-block">Block level button</button>
- <button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
+ <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
+ <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</div>
</div>
<h3>Button element</h3>
<p>Add the <code>disabled</code> attribute to <code><button></code> buttons.</p>
<p class="bs-example">
- <button type="button" class="btn btn-primary btn-large" disabled="disabled">Primary button</button>
- <button type="button" class="btn btn-default btn-large" disabled="disabled">Button</button>
+ <button type="button" class="btn btn-primary btn-lg" disabled="disabled">Primary button</button>
+ <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
</p>
<h3>Anchor element</h3>
<p>Add the <code>.disabled</code> class to <code><a></code> buttons.</p>
<p class="bs-example">
- <a href="http://getbootstrap.com/css/#" class="btn btn-primary btn-large disabled">Primary link</a>
- <a href="http://getbootstrap.com/css/#" class="btn btn-default btn-large disabled">Link</a>
+ <a href="http://getbootstrap.com/css/#" class="btn btn-primary btn-lg disabled">Primary link</a>
+ <a href="http://getbootstrap.com/css/#" class="btn btn-default btn-lg disabled">Link</a>
</p>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <button class="btn btn-default btn-small dropdown-toggle" type="button" data-toggle="dropdown">
+ <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<div class="bs-example">
<div class="navbar">
- <form class="navbar-form pull-left">
+ <form class="navbar-form navbar-left">
<input type="text" class="form-control" style="width: 200px;">
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="navbar">
- <form class="navbar-form pull-left">
+ <form class="navbar-form navbar-left">
<select name="" class="form-control" style="width: 200px;">
<option value="1">1</option>
<option value="2">2</option>
</div>
<div class="navbar">
- <form class="navbar-form pull-left">
+ <form class="navbar-form navbar-left">
<input type="text" class="form-control" style="width: 200px;">
<input type="checkbox">
<button type="submit" class="btn btn-default">Submit</button>
</div>
<div class="navbar">
- <form class="navbar-form pull-left">
+ <form class="navbar-form navbar-left">
<input type="text" class="form-control" style="width: 200px;">
<label class="checkbox-inline">
<input type="checkbox"> Remember me
<h3 id="navbar-component-alignment">Component alignment</h3>
<p>Align nav links, forms, buttons, or text, using the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction. To align nav links, put them in a separate <code><ul></code> with the respective utility class applied.</p>
-
- <h2>Optional display variations</h2>
- <p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>. These will also remove rounded corners.</p>
-
- <h3 id="navbar-fixed-top">Fixed to top</h3>
- <p>Add <code>.navbar-fixed-top</code>.</p>
- <div class="bs-example bs-navbar-top-example">
- <div class="navbar navbar-fixed-top">
- <div class="container" style="width: auto;">
- <a class="navbar-brand" href="#">Title</a>
- <ul class="nav navbar-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><!-- /example -->
-
<h3 id="navbar-static-top">Static top navbar</h3>
<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
<div class="bs-example bs-navbar-top-example">
<h2 id="navbar-responsive">Responsive navbar</h2>
- <p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.navbar-toggle</code>.</p>
+ <p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.navbar-collapse.collapse</code>, and add the navbar toggle button, <code>.navbar-toggle</code>.</p>
<div class="bs-example">
<div class="navbar">
<div class="container">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="#">Title</a>
- <div class="nav-collapse collapse navbar-responsive-collapse">
+ <div class="nav-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="#">Title</a>
+ </div>
+ <div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
- <form class="navbar-form pull-left">
+ <form class="navbar-form navbar-left">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</form>
- <ul class="nav navbar-nav pull-right">
+ <ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
</ul>
</li>
</ul>
- </div><!-- /.nav-collapse -->
+ </div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
</div><!-- /example -->
<div class="bs-example">
<div class="navbar navbar-inverse">
<div class="container">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="#">Title</a>
- <div class="nav-collapse collapse navbar-inverse-collapse">
+ <div class="nav-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="#">Title</a>
+ </div>
+ <div class="navbar-collapse collapse navbar-inverse-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
- <form class="navbar-form pull-left">
+ <form class="navbar-form navbar-left">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</form>
- <ul class="nav navbar-nav pull-right">
+ <ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
</ul>
</li>
</ul>
- </div><!-- /.nav-collapse -->
+ </div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
</div><!-- /example -->
<h3>Available variations</h3>
<p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
<div class="bs-example">
- <span class="label">Default</span>
+ <span class="label label-default">Default</span>
<span class="label label-success">Success</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
<div class="jumbotron">
<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-large">Learn more</a></p>
+ <p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
</div>
</div>
- <h3 id="alerts-block">Block alerts</h3>
- <p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p>
- <div class="bs-example">
- <div class="alert alert-block">
- <button type="button" class="close" data-dismiss="alert">×</button>
- <h4>Warning!</h4>
- <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
- </div>
- </div>
-
<h3 id="alerts-alternatives">Contextual alternatives</h3>
<p>Add optional classes to change an alert's connotation.</p>
<div class="bs-example">
- <div class="alert alert-danger">
+ <div class="alert alert-dismissable alert-danger">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
- <div class="alert alert-success">
+ <div class="alert alert-dismissable alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Well done!</strong> You successfully read this important alert message.
</div>
- <div class="alert alert-info">
+ <div class="alert alert-dismissable alert-info">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<h3 id="alerts-links">Links in alerts</h3>
<p>Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
<div class="bs-example">
- <div class="alert alert-danger">
+ <div class="alert alert-dismissable alert-danger">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>
- <div class="alert alert-success">
+ <div class="alert alert-dismissable alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
- <div class="alert alert-info">
+ <div class="alert alert-dismissable alert-info">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
<div class="bs-example">
<div class="panel">
- Basic panel example
+ <div class="panel-body">
+ Basic panel example
+ </div>
</div>
</div>
<div class="bs-example">
<div class="panel">
<div class="panel-heading">Panel heading</div>
- Panel content
+ <div class="panel-body">
+ Panel content
+ </div>
</div>
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
- Panel content
+ <div class="panel-body">
+ Panel content
+ </div>
</div>
</div>
<p>Wrap buttons or secondary text in <code>.panel-footer</code>.</p>
<div class="bs-example">
<div class="panel">
- Panel content
+ <div class="panel-body">
+ Panel content
+ </div>
<div class="panel-footer">Panel footer</div>
</div>
</div>
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
- Panel content
+ <div class="panel-body">
+ Panel content
+ </div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
- Panel content
+ <div class="panel-body">
+ Panel content
+ </div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
- Panel content
+ <div class="panel-body">
+ Panel content
+ </div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
- Panel content
+ <div class="panel-body">
+ Panel content
+ </div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
- Panel content
+ <div class="panel-body">
+ Panel content
+ </div>
</div>
</div>
<div class="panel">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
- <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+ <div class="panel-body">
+ <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+ </div>
<!-- List group -->
<ul class="list-group list-group-flush">
projects / bootswatch / blobdiff