常见现代语言排版 | 传统蒙古文排版 | 传统汉文（日文）排版

Grid

twelve columns
one
eleven columns
two columns
ten columns
three columns
nine columns
four columns
eight columns
five columns
seven columns
six columns
six columns
four columns
four columns
four columns
three columns
three columns
three columns
three columns
two columns
eight columns
two columns
seven columns
five columns
one-third column
two-thirds column
one-half column
one-half column
one-quarter column
one-quarter column
one-quarter column
one-quarter column

grid offsets

eleven columns offset by one
ten columns offset by two
nine columns offset by three
eight columns offset by four
seven columns offset by five
six columns offset by six
five columns offset by seven
four columns
four columns offset by four
three columns offset by nine
six columns offset by three

nested grids


six columns
six columns with nested grid
six columns nested
six columns nested
twelve columns nested

responsive grids


xs-six sm-seven columns
xs-six sm-five columns
sm-twelve md-six lg-four columns
sm-twelve md-six lg-four columns
sm-twelve lg-four columns
md-six columns
md-six columns
md-eight lg-six lg-offset-by-six columns
md-eight md-offset-by-two lg-twelve lg-offset-by-zero columns

typography


Heading <h1> 3.6rem

Heading <h2> 3.0rem

Heading <h3> 2.4rem

Heading <h4> 1.8rem

Heading <h5> 1.5rem
Heading <h6> 1.2rem

Bolded Italicized Colored Underlined Stroked Text Primary Text Success Text Danger

check out this paragraph "Who are you who speaks out of the darkness?" he answered "John Carter, a friend of the red men of Helium." "I am of Helium," he said, "but I do not recall your name." And then I told him my story as I have written it here, omitting only any reference to my love for Dejah Thoris.

He was much excited by the news of Helium's princess and seemed quite positive that she and Sola could easily have reached a point of safety from where they left me. He said that he knew the place well because the defile through which the Warhoon warriors had passed when they discovered us was the only one ever used by them when marching to the south. "Dejah Thoris and Sola entered the hills not five miles from a great waterway and are now probably quite safe," he assured me. My fellow prisoner


buttons


Anchor button
Anchor button
Anchor button
Anchor button

forms



lists


  • Unordered lists have basic styles
  • They use the circle list style
    • Nested lists styled to feel right
    • Can nest either type of list into the other
  • Just more list items mama san
  1. Ordered lists also have basic styles
  2. They use the decimal list style
    • Ordered and unordered can be nested
    • Can nest either type of list into the other
  3. Last list item just for the fun
  • Inline lists have basic styles as well
  • All of their items
  • Just appear on the same line

code


                              
                                .some-class {
                                    background-color: red;
                                }

alerts


This is an alert!
This is a primary alert!
This is a success alert!
This is a danger alert!

tables

regular tables

Sharp looking, minimalist tables. Content in the cells wraps on small screen sizes.

Name Age Sex Location
Dave Gamache 26 Male San Francisco
Dwayne Johnson 42 Male Hayward

responsive tables

Wrap your table element in <div class="table-responsive" /> to make it scroll horizontally at smaller viewport sizes.

Name Age Sex Location
Dave Gamache 26 Male San Francisco
Dwayne Johnson 42 Male Hayward

cards

Pretty sweet, very mobile. Group your callout content, or keep things organized without a creating a visual heirarchy.

Text

Text

Text

Text

Link Card

Text
Link Card

Text
Link Card

Text
Big Card

I have never told this story, nor shall mortal man see this manuscript until after I have passed over for eternity. I know that the average human mind will not believe what it cannot grasp, and so I do not purpose being pilloried by the public, the pulpit, and the press, and held up as a colossal liar when I am but telling the simple truths

Small Card

I have never told this story, nor shall mortal man see this manuscript until


{% include footer.html %}