Принтиране

Typography

Автор:

     

    Heading Text

    h1. Heading Secondary text

    h2. Heading Secondary text

    h3. Heading Secondary text

    h4. Heading Secondary text

    h5. Heading Secondary text
    h6. Heading Secondary text

    TIPS: Create lighter, secondary text in any heading with a generic <small> tag or the .small class.

    Example body text

    This is a lead paragraph.
    Make a paragraph stand out by adding .lead.

    Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

    The following snippet of text is rendered as bold text.

    The following snippet of text is rendered as italicized text.

    An abbreviation of the word attribute is attr.

     

    Address

    Company Name
    795 Folsom Ave, Suite 600
    San Francisco, CA 94107
    P: (123) 456-7890
    Full Name
    P: (123) 456-7890
    first.last@example.com

    Emphasis classes

    This is a .mute paragraph.

    This is a .text-primary paragraph.

    This is a .text-warning paragraph.

    This is a .text-danger paragraph.

    This is a .text-success paragraph.

    This is a .text-info paragraph.

    Alignment classes

    This is a left aligned text .text-left

    This is a center aligned text .text-center

    This is a right aligned text .text-right

    This is a justify aligned text which is often used in Book Design, Magazine or special Typo Pages. Create a justify aligned text with .text-justify class.

     

    Blockquotes

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    Quote’s author in Source Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    Quote’s author in Source Title

     

     

    Color Swatches

    Brand Colors

    #3061ff
    Brand Primary

    #ff3333
    Brand Secondary

    #f0ad4e
    Brand Warning

    #d9534f
    Brand Danger

    #5bc0de
    Brand Info

    #5cb85c
    Brand Success

     

    Grayscale Levels

    #1a1a1a
    Gray Darker

    #333
    Gray Dark

    #555
    Gray

    #999
    Gray Light

    #e8e8e8
    Gray Lighter

    #f7f7f7
    Gray Lightest

     

     

     

    Navigations

    Tabs

    In the area of graphical user interfaces (GUI), a tabbed document interface (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.

    GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).

    In the area of graphical user interfaces (GUI), a tabbed document interface (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.

    GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).

     

     

    Indicators

    Alerts and Notifications

    Error message title

    Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

    Sussess message title

    Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

    Info message title

    Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

    Warning message title

    Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

     

    Labels

    Default Primary Success Info Warning Danger

     

    Misc

    List groups

    • 14 Cras justo odio
    • 2 Dapibus ac facilisis in
    • Morbi leo risus
    • 1 Morbi leo risus
    • 2 Dapibus ac facilisis in

    List group item heading

    Donec id elit non mi porta gravida at eget metus risus varius blandit.

    List group item heading

    Donec id elit non mi porta gravida at eget metus.

    List group item heading

    Donec id elit non mi porta gravida at eget metus.

     

    Panels

    Panel heading

    Panel content

    Panel primary

    Panel content

    Panel success

    Panel content

    Panel warning

    Panel content

    Panel danger

    Panel content

    Panel info

    Panel content

     

    Wells

    Look, I’m in a small well!

    Look, I’m in a well!

    Look, I’m in a large well!