<p>There are varying degrees to customizing components, but most fall into two camps: light customizations and complete visual overhauls. Luckily, there are plenty of examples of both.</p>
<p>We define light customizations as mostly surface layer changes, things like a color and font changes to existing Bootstrap components. A great example of this is the the <ahref="http://translate.twitter.com">Twitter Translation Center</a> (coded by @mdo). Let's look at how to implement the custom button we wrote for this site, <code>.btn-ttc</code>.</p>
<p>Instead of using the provided Bootstrap buttons, which only require just one class to start, <code>.btn</code>, we'll add our own modifier class, <code>.btn-ttc</code>. This will give us a slightly custom look with minimal effort.</p>
<p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
<p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
<p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code><head></code>.</p>
<p>Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.</p>
<p>You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
@@ -2237,10 +2237,10 @@ For example, <code><section></code> should be wrapped as inline.
<h3>.pull-right</h3>
<p>Float an element right</p>
{% highlight html linenos %}
{% highlight html %}
<divclass="pull-right">...</div>
{% endhighlight %}
{% highlight css linenos %}
{% highlight css %}
.pull-right {
float: right;
}
...
...
@@ -2248,10 +2248,10 @@ For example, <code><section></code> should be wrapped as inline.
<h3>.clearfix</h3>
<p>Clear the <code>float</code> on any element. Utilizes <ahref="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
{% highlight html linenos %}
{% highlight html %}
<divclass="clearfix">...</div>
{% endhighlight %}
{% highlight css linenos %}
{% highlight css %}
// Mixin
.clearfix {
&:before,
...
...
@@ -2570,7 +2570,7 @@ For example, <code><section></code> should be wrapped as inline.
<h2>How to use</h2>
<p>Add the appropriate class to any inline element. All icon classes are prefixed with <code>glyphicon-</code> for easy styling. To use, place the following code just about anywhere:</p>
{% highlight html linenos %}
{% highlight html %}
<spanclass="glyphicon glyphicon-search"></span>
{% endhighlight %}
<p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
...
...
@@ -2593,7 +2593,7 @@ For example, <code><section></code> should be wrapped as inline.
@@ -3357,7 +3357,7 @@ For example, <code><section></code> should be wrapped as inline.
</li>
</ul>
</div>
{% highlight html linenos %}
{% highlight html %}
<ulclass="nav nav-tabs">
...
<liclass="dropdown">
...
...
@@ -3391,7 +3391,7 @@ For example, <code><section></code> should be wrapped as inline.
</li>
</ul>
</div><!-- /example -->
{% highlight html linenos %}
{% highlight html %}
<ulclass="nav nav-pills">
...
<liclass="dropdown">
...
...
@@ -3430,7 +3430,7 @@ For example, <code><section></code> should be wrapped as inline.
</ul>
</div>
</div><!-- /example -->
{% highlight html linenos %}
{% highlight html %}
<divclass="navbar">
<aclass="navbar-brand"href="#">Title</a>
<ulclass="nav navbar-nav">
...
...
@@ -3450,7 +3450,7 @@ For example, <code><section></code> should be wrapped as inline.
<aclass="navbar-brand"href="#">Title</a>
</div>
</div><!-- /example -->
{% highlight html linenos %}
{% highlight html %}
<aclass="navbar-brand"href="#">Title</a>
{% endhighlight %}
...
...
@@ -3465,7 +3465,7 @@ For example, <code><section></code> should be wrapped as inline.
</ul>
</div>
</div><!-- /example -->
{% highlight html linenos %}
{% highlight html %}
<ulclass="nav navbar-nav">
<liclass="active"><ahref="#">Home</a></li>
<li><ahref="#">Link</a></li>
...
...
@@ -3483,7 +3483,7 @@ For example, <code><section></code> should be wrapped as inline.
</form>
</div>
</div><!-- /example -->
{% highlight html linenos %}
{% highlight html %}
<formclass="navbar-form pull-left">
<inputtype="text"style="width: 200px;">
<buttontype="submit"class="btn">Submit</button>
...
...
@@ -3517,7 +3517,7 @@ For example, <code><section></code> should be wrapped as inline.
</div>
</div>
</div><!-- /example -->
{% highlight html linenos %}
{% highlight html %}
<divclass="navbar navbar-fixed-top">
...
</div>
...
...
@@ -3526,7 +3526,7 @@ For example, <code><section></code> should be wrapped as inline.
<divclass="bs-docs-sidenote">
<h4>Body padding required</h4>
<p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the top of the <code><body></code>. The navbar itself has a height of 54px by default. At 768px and above, its height shrinks to 50px. Try out your own values or use our snippet below:</p>
{% highlight css linenos %}
{% highlight css %}
body {
padding-top: 64px;
}
...
...
@@ -3553,7 +3553,7 @@ body {
</div>
</div>
</div><!-- /example -->
{% highlight html linenos %}
{% highlight html %}
<divclass="navbar navbar-fixed-bottom">
...
</div>
...
...
@@ -3562,7 +3562,7 @@ body {
<divclass="bs-docs-sidenote">
<h4>Body padding required</h4>
<p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the bottom of the <code><body></code>. The navbar itself has a height of 54px by default. At 768px and above, its height shrinks to 50px. Try out your own values or use our snippet below:</p>
{% highlight css linenos %}
{% highlight css %}
body {
padding-bottom: 64px;
}
...
...
@@ -3589,7 +3589,7 @@ body {
</div>
</div>
</div><!-- /example -->
{% highlight html linenos %}
{% highlight html %}
<divclass="navbar navbar-static-top">
...
</div>
...
...
@@ -3645,7 +3645,7 @@ body {
</div><!-- /.container -->
</div><!-- /.navbar -->
</div><!-- /example -->
{% highlight html linenos %}
{% highlight html %}
<divclass="navbar">
<divclass="container">
...
...
@@ -3722,7 +3722,7 @@ body {
</div><!-- /.container -->
</div><!-- /.navbar -->
</div><!-- /example -->
{% highlight html linenos %}
{% highlight html %}
<divclass="navbar navbar-inverse">
...
</div>
...
...
@@ -3754,7 +3754,7 @@ body {
<liclass="active">Data</li>
</ul>
</div>
{% highlight html linenos %}
{% highlight html %}
<ulclass="breadcrumb">
<li><ahref="#">Home</a></li>
<li><ahref="#">Library</a></li>
...
...
@@ -3786,7 +3786,7 @@ body {
<li><ahref="#">»</a></li>
</ul>
</div>
{% highlight html linenos %}
{% highlight html %}
<ulclass="pagination">
<li><ahref="#">«</a></li>
<li><ahref="#">1</a></li>
...
...
@@ -3811,7 +3811,7 @@ body {
<li><ahref="#">»</a></li>
</ul>
</div>
{% highlight html linenos %}
{% highlight html %}
<ulclass="pagination">
<liclass="disabled"><ahref="#">«</a></li>
<liclass="active"><ahref="#">1</a></li>
...
...
@@ -3819,7 +3819,7 @@ body {
</ul>
{% endhighlight %}
<p>You can optionally swap out active or disabled anchors for <code><span></code> to remove click functionality while retaining intended styles.</p>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
...
...
@@ -4213,7 +4213,7 @@ body {
<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>
<h4class="list-group-item-heading">List group item heading</h4>
...
...
@@ -4696,7 +4696,7 @@ body {
Basic panel example
</div>
</div>
{% highlight html linenos %}
{% highlight html %}
<divclass="panel">
Basic panel example
</div>
...
...
@@ -4710,7 +4710,7 @@ body {
Panel content
</div>
</div>
{% highlight html linenos %}
{% highlight html %}
<divclass="panel">
<divclass="panel-heading">Panel heading</div>
Panel content
...
...
@@ -4741,7 +4741,7 @@ body {
Panel content
</div>
</div>
{% highlight html linenos %}
{% highlight html %}
<divclass="panel panel-primary">...</div>
<divclass="panel panel-success">...</div>
<divclass="panel panel-warning">...</div>
...
...
@@ -4767,7 +4767,7 @@ body {
</ul>
</div>
</div>
{% highlight html linenos %}
{% highlight html %}
<divclass="panel">
<!-- Default panel contents -->
<divclass="panel-heading">Panel heading</div>
...
...
@@ -4804,7 +4804,7 @@ body {
Look, I'm in a well!
</div>
</div>
{% highlight html linenos %}
{% highlight html %}
<divclass="well">...</div>
{% endhighlight %}
<h3>Optional classes</h3>
...
...
@@ -4814,7 +4814,7 @@ body {
Look, I'm in a well!
</div>
</div>
{% highlight html linenos %}
{% highlight html %}
<divclass="well well-large">...</div>
{% endhighlight %}
...
...
@@ -4823,7 +4823,7 @@ body {
Look, I'm in a well!
</div>
</div>
{% highlight html linenos %}
{% highlight html %}
<divclass="well well-small">...</div>
{% endhighlight %}
</div>
...
...
@@ -4856,23 +4856,23 @@ body {
<p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.</p>
<p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
{% highlight js linenos %}
{% highlight js %}
$('body').off('.data-api')
{% endhighlight %}
<p>Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:</p>
{% highlight js linenos %}
{% highlight js %}
$('body').off('.alert.data-api')
{% endhighlight %}
<h3id="js-programmatic-api">Programmatic API</h3>
<p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p>
{% highlight js linenos %}
{% highlight js %}
$(".btn.danger").button("toggle").addClass("fat")
{% endhighlight %}
<p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p>
{% highlight js linenos %}
{% highlight js %}
$("#myModal").modal() // initialized with defaults
$("#myModal").modal({ keyboard: false }) // initialized with no keyboard
$("#myModal").modal('show') // initializes and invokes show immediately</p>
...
...
@@ -4882,7 +4882,7 @@ $("#myModal").modal('show') // initializes and invokes show immed
<h3id="js-noconflict">No conflict</h3>
<p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>
{% highlight js linenos %}
{% highlight js %}
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the bootstrap functionality
{% endhighlight %}
...
...
@@ -4890,7 +4890,7 @@ $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the boot
<h3id="js-events">Events</h3>
<p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
<p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p>
{% highlight js linenos %}
{% highlight js %}
$('#myModal').on('show', function (e) {
if (!data) return e.preventDefault() // stops modal from being shown
})
...
...
@@ -4952,7 +4952,7 @@ $('#myModal').on('show', function (e) {
</div><!-- /.modal-dalog -->
</div><!-- /.modal -->
</div><!-- /example -->
{% highlight html linenos %}
{% highlight html %}
<divclass="modal">
<divclass="modal-dialog">
<divclass="modal-content">
...
...
@@ -5018,7 +5018,7 @@ $('#myModal').on('show', function (e) {
@@ -5048,13 +5048,13 @@ $('#myModal').on('show', function (e) {
<h3>Via data attributes</h3>
<p>Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p>
...
...
@@ -5091,7 +5091,7 @@ $('#myModal').on('show', function (e) {
<td>path</td>
<td>false</td>
<td><p>If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
<p>To easily add scrollspy behavior to your topbar navigation, add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <code><body></code>. Then add the <code>data-target</code> attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.</p>
<p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap tab styling.</p>
Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM.
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
<p>Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute <code>data-loading-text</code>.
<p>To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.</p>
