Бутстрап - популярнейший ныне html, css, js фреймворк. В этой статье собраны css-классы , используемые bootstrap для для стилизации контента: заголовков, таблиц, кнопок, цитат и прочего. Демонстрация - ниже. Таким образом, при подключенном bootstrap, веб-мастер, манипулируя этими классами может быстро стилизовать элементы веб-сайта.
This is an H1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.
This is an H2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.
This is an H3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.
This is an H4
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.
This is an H5
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.
This is an H6
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.
Icons Text style
Buttons
| Button | Class | Description |
|---|---|---|
.btn |
Standard gray button with gradient | |
.btn-primary |
Provides extra visual weight and identifies the primary action in a set of buttons | |
.btn-info |
Used as an alternate to the default styles | |
.btn-success |
Indicates a successful or positive action | |
.btn-warning |
Indicates caution should be taken with this action | |
.btn-danger |
Indicates a dangerous or potentially negative action | |
.btn-inverse |
Alternate dark gray button, not tied to a semantic action or use |
Multiple sizes
Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.
Button with icons
Hero unit
Expose provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.
Markup
Wrap your content in a div like so:
- <div class="hero-unit">
- <h1>Heading</h1>
- <p>Tagline</p>
- <p>
- <a class="btn btn-primary btn-large">
- Learn more
- </a>
- </p>
- </div>
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Blockquotes
- <blockquote>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
- <small>Someone famous</small>
- </blockquote>
Default blockquotes are styled as such:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Someone famous in Body of work
To float your blockquote to the right, add class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Someone famous in Body of work
Code Inline and block code snippets
This is a sample <pre>...</pre> tag:
div.ex-block div.bx1 {
background: url(../images/box_bl.png) 0 100% repeat;
}
div.ex-block div.bx2 {
background: url(../images/box_tr.png) 100% 0 repeat;
}
This is a sample <pre class="prettyprint">...</pre> tag: div.ex-block div.bx1 { background: url(../images/box_bl.png) 0 100% repeat; } div.ex-block div.bx2 { background: url(../images/box_tr.png) 100% 0 repeat; }
Inline labels Label and annotate text
| Labels | Markup |
|---|---|
| Default | <span class="label">Default</span> |
| Success | <span class="label label-success">Success</span> |
| Warning | <span class="label label-warning">Warning</span> |
| Important | <span class="label label-important">Important</span> |
| Info | <span class="label label-info">Info</span> |
Alerts Styles for success, warning, and error messages
Tables For, you guessed it, tabular data
1. Default table styles
Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the .table class is required.
<table class="table"> … </table>
| # | First Name | Last Name | Language |
|---|---|---|---|
| 1 | Mark | Otto | CSS |
| 2 | Jacob | Thornton | Javascript |
| 3 | Stu | Dent | HTML |
2. Striped table
Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.
Note: Striped tables use the :nth-child CSS selector and is not available in IE7-IE8.
<table class="table table-striped"> … </table>
| # | First Name | Last Name | Language |
|---|---|---|---|
| 1 | Mark | Otto | CSS |
| 2 | Jacob | Thornton | Javascript |
| 3 | Stu | Dent | HTML |
3. Bordered table
Add borders around the entire table and rounded corners for aesthetic purposes.
<table class="table table-bordered"> … </table>
| # | First Name | Last Name | Language |
|---|---|---|---|
| 1 | Mark Otto | CSS | |
| 2 | Jacob | Thornton | Javascript |
| 3 | Stu | Dent | |
| 3 | Brosef | Stalin | HTML |
4. Condensed table
Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 8px to 4px).
<table class="table table-condensed"> … </table>
| # | First Name | Last Name | Language |
|---|---|---|---|
| 1 | Mark | Otto | CSS |
| 2 | Jacob | Thornton | Javascript |
| 3 | Stu | Dent | HTML |
5. Combine them all!
Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.
<table class="table table-striped table-bordered table-condensed"> ... </table>
| # | First Name | Last Name | Language |
|---|---|---|---|
| 1 | Mark | Otto | CSS |
| 2 | Jacob | Thornton | Javascript |
| 3 | Stu | Dent | HTML |
| 4 | Brosef | Stalin | HTML |
each time a comment is added I recieve 4 emails with the same comment.
Perhaps there is an easy method you are able to remove me from that service?
Thank you!