Components
Site: | Judo |
Course: | Judo |
Book: | Components |
Printed by: | |
Date: | Wednesday, 16 October 2024, 10:10 AM |
Content Boxes
Icon Boxes
In this example, the icon-boxes are set up in a 4 column grid system using row-fluid
and span3
.
First Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Second Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fourth Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="row-fluid">
<div class="iconbox span3">
<div class="iconcircle">
<i class="far fa-lightbulb"></i>
</div>
<div class="iconbox-content">
...
</div>
</div>
<div class="iconbox span3">...</div>
<div class="iconbox span3">...</div>
<div class="iconbox span3">...</div>
Text Boxes
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<div class="text-box">
<div class="text-box-heading">Some heading</div>
<div class="arrow-down"></div>
<p>Lorem ipsum ...</p>
</div>
Image Boxes
In this example, the icon-boxes are set up in a 3 column grid system using row-fluid
and span4
.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<div class="row-fluid">
<div class="image-box span4">
<img src="..." class="img-responsive">
<div class="image-box-content"><p>Lorem ipsum ...</p></div>
</div>
<div class="image-box span4">
...
</div>
<div class="image-box span4">
...
</div>
</div>
Buttons
Use any of the available button classes to quickly create a styled button.
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
You can use the <a>
tag with the available button classes and also style the buttons using Font Awesome.
<a class="btn btn-danger" href="#"><i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default" href="#"><i class="fa fa-plus-square"></i> Read more...</a>
<a class="btn btn-info" href="#"><i class="fa fa-download fa-3x pull-left"></i> Click here to download!</a>
With Bootstraps support for collapsible components you can use buttons to show or hide special contents. Keep your courses clean and avoid the scroll of death!
<p>
<button class="btn btn-danger collapsed" data-target="#demo" data-toggle="collapse" type="button">CLICK HERE!</button>
</p>
<div style="height: 0px;" id="demo" class="collapse">
<iframe src="//www.youtube.com/embed/CuKhBKAgQcA" allowfullscreen="" height="315" width="560" frameborder="0"></iframe>
</div>
Grid System
Bootstrap's default grid system
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Basic grid HTML
For a simple two column layout, create a .row
and add the appropriate number of .span*
columns. As this is a 12-column grid, each .span*
spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
Given this example, we have .span4
and .span8
, making for 12 total columns and a complete row.
Colored columns
A single column
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
A single column
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
A single column
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
A single column
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
A single colored column
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
A single colored column
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
A single colored column
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
A single colored column
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<div class="row-fluid"> <div class="span4"><h5>A single column</h5><p>lorem ipsum...</p></div> <div class="span4">...</div> <div class="span4">...</div> <div class="span4">...</div> </div>
<div class="row-fluid colored"> <div class="span4"><h5>A single colored column</h5><p>lorem ipsum...</p></div> <div class="span4">...</div> <div class="span4">...</div> <div class="span4">...</div> </div>
Thumbnails
Default thumbnails
By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.
<div class="row-fluid">
<ul class="thumbnails">
<li class="span4">
<a href="..." class="thumbnail"><img data-src="..." alt="..."></a>
</li>
...
</ul>
</div>
Highly customizable
With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.
<div class="row-fluid"> <ul class="thumbnails">
<li
class=
"span4">
<div class="thumbnail"> <img data-src="..." alt="..."> <h3>Thumbnail label</h3> <p>...</p> </div> </li> </ul> </div>
Blocknumbers
In this example, the blocknumbers are set up in a 3 column grid system using row-fluid
and span4
. Blocknumbers can contain numbers as well as letters and font aweseome icons.
First Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Second Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="row-fluid">
<div class="span4">
<div class="blocknumber_box">
<div class="blocknumber_icon">
1
</div>
<div class="blocknumber_content">
<h5>First Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="span4">
<div class="blocknumber_box">
...
</div>
</div>
...
</div>
Panels
Basic example
By default, all the .panel
does is apply some basic border and padding to contain some content.
Panel title
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
Tabs
Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
Tables
Default styles
For basic styling - light padding and only horizontal dividers - add the base class .table
to any <table>
.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table">
...
</table>
Striped rows
Use .table-striped
to add zebra-striping to any table row within the <tbody>
.
Cross-browser compatibility:
Striped tables are styled via the :nth-child
CSS selector, which is not available in Internet Explorer 8.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table table-striped">
...
</table>
Bordered table
Add .table-bordered
for borders on all sides of the table and cells.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table table-bordered">
...
</table>
Hover rows
Add .table-hover
to enable a hover state on table rows within a <tbody>
.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table table-hover">
...
</table>
Condensed table
Add .table-condensed
to make tables more compact by cutting cell padding in half.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<table class="table table-condensed">
...
</table>
Contextual classes
Use contextual classes to color table rows or individual cells.
Class | Description |
---|---|
.active
|
Applies the hover color to a particular row or cell |
.success
|
Indicates a successful or positive action |
.info
|
Indicates a neutral informative change or action |
.warning
|
Indicates a warning that might need attention |
.danger
|
Indicates a dangerous or potentially negative action |
# | Column heading | Column heading | Column heading |
---|---|---|---|
1 | Column content | Column content | Column content |
2 | Column content | Column content | Column content |
3 | Column content | Column content | Column content |
4 | Column content | Column content | Column content |
5 | Column content | Column content | Column content |
6 | Column content | Column content | Column content |
7 | Column content | Column content | Column content |
8 | Column content | Column content | Column content |
9 | Column content | Column content | Column content |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
Accordion
Sample accordion
Using the collapse plugin, we built a simple accordion by extending the panel component.
<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item #1 </a> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
class="collapsed"
> Collapsible Group Item #2 </a> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"
> Collapsible Group Item #3 </a> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div>
class="collapsed"
Carousel
Example
The slideshow below shows a generic plugin and component for cycling through elements like a carousel.
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="..." alt="...">
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Carousel with set of thumbnails
Example
The carousel below shows a generic plugin and component for cycling through multiple elements.
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
<li>
<div class="thumbnail">
<img src="..." alt="">
</div>
</li>
<li>
<div class="thumbnail">
<img src="..." alt="">
</div>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li>...</li>
<li>...</li>
</ul>
</div>
<div class="item">
...
</div>
</div>
<a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#myCarousel" class="right carousel-control">›</a> </div>
Spotlights
The spotlight classes are designed to highlight your general announcements, top content and generally everything that is the best in your website
spotlight-v1 heading
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Primary Button
spotlight-v2 heading
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Read More!
spotlight-v3 heading
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Read More!
spotlight-v4 heading
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Read More!
spotlight-v5 heading
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Read More!
<div class="spotlight spotlight-v1">
...
</div>
<div class="spotlight spotlight-v2">
...
</div>
<div class="spotlight spotlight-v3">
...
</div>
<div class="spotlight spotlight-v4">
...
</div>
<div class="spotlight spotlight-v5">
...
</div>
You can add a shadow class to the spotlight boxes:
spotlight-v2 with shadow1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
spotlight-v2 with shadow2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<div class="spotlight spotlight-v2 shadow1">
...
</div>
<div class="spotlight spotlight-v2 shadow2">
...
</div>
You can add an arrow to the top or bottom of the spotlight-v1 container:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<div class="spotlight spotlight-v1 arrow-top">
...
</div>
<div class="spotlight spotlight-v1 arrow-bottom">
...
</div>