bootstrap

Бутстрап - популярнейший ныне 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

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
 

Buttons

ButtonClassDescription
.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

Refresh Checkout Delete

Comment Settings More Info

 

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:

    1. <div class="hero-unit">
    2. <h1>Heading</h1>
    3. <p>Tagline</p>
    4. <p>
    5. <a class="btn btn-primary btn-large">
    6. Learn more
    7. </a>
    8. </p>
    9. </div>

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

 

Blockquotes

    1. <blockquote>
    2. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
    3. <small>Someone famous</small>
    4. </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

LabelsMarkup
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

This is a sample of the Approved style. To replicate, use the following syntax: <div class="alert">....</div>
This is a sample of the Approved style. To replicate, use the following syntax: <div class="alert alert-error">....</div>
This is a sample of the Approved style. To replicate, use the following syntax: <div class="alert alert-success">....</div>
This is a sample of the Approved style. To replicate, use the following syntax: <div class="alert alert-info">....</div>
 

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 NameLast NameLanguage
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 NameLast NameLanguage
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 NameLast NameLanguage
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 NameLast NameLanguage
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 NameLast NameLanguage
1 Mark Otto CSS
2 Jacob Thornton Javascript
3 Stu Dent HTML
4 Brosef Stalin HTML
 
 

Комментарии   

0 #1 Garcinia Diet 14.10.2015 12:23
After I originally commented I seem to have clicked the -Notify me when new comments are added- checkbox and now
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!
Цитировать

Добавить комментарий


Защитный код
Обновить