Using Bootstrap for typography

Previous words

This article will introduce in detail the content related to typesetting in Bootstrap

Title

[h]

HTML All title tags in <h1></h1> to <h6></h6> can be used

By default, the font-size from h1 to h6 is as follows Show

2em -> 1.5em -> 1.17em -> 1em -> 0.83em -> 0.67em;

In the initial situation, 1em = 16px, the conversion is as follows

32px -> 24px -> 18.72px -> 16px -> 13.28px -> 10.72px;

Boosttrap will re-size the font-size of h1-h6 The settings are as follows

36px -> 30px -> 24px -> 18px -> 14px -> 12px;

In addition, the .h1 to .h6 classes are also provided for inline ( The text of the inline) attribute is given the style of the title. Except for the display attribute, the other attributes are the same as the

to

styles

h1,.h1{
    font-size: 36px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

[small]

The title can also contain the <small></small> tag or an element assigned the .small class, which can be used to mark the subtitle. The tag has the same style as the .small class element

h1 small,.h1 small, h1 .small, .h1 .small{
    font-size: 65%;
    font-weight: normal;
    line-height: 1;
    color: #777;
}

<h1>标题一 <small>副标题一</small>
</h1><h2>标题二 <small>副标题二</small>
</h2><h3>标题三 <small>副标题三</small>
</h3><h4>标题四 <small>副标题四</small>
</h4><h5>标题五 <small>副标题五</small>
</h5><h6>标题六 <small>副标题六</small>
</h6>

##Paragraph

【body】

By default, the page font-size is 16px, and the line-height (under chrome) is 1.334

Bootstrap will global

font -size is set to 14px, line-height is set to 20px. These attributes are assigned directly to the

element and all paragraph elements

<span style="color: #000000;">body{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    background-color: #fff;<br>　　 margin:0;
}</span>

[p]

In addition,

The (paragraph) element is also set with a bottom margin (margin) equal to 1/2 line height (i.e. 10px)

p{
    margin: 0 0 10px;
}

[.lead]

By adding the

.lead class, the paragraph can be highlighted

.lead {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
}

<p>一般内容</p><p>中心内容</p><p>一般内容</p>

Inline text

[Mark text]

The text needs to be marked, use the tag

mark, .mark {
    padding: .2em;
    background-color: #fcf8e3;
}

[Delete text]

Use the tag for deleted text

【Useless text】

Use the tag for useless text

【Insert Text】

For additional inserted text, use the tag

[Underlined text]

To underline text, use the tag

【Small text】

For inline or block type text that does not need to be emphasized, use the tag to wrap it, and the text inside will be set to 85% of the font size of the parent container. Nested elements within the title element are set to different font-sizes.

You can also give inline elements the .small class in place of any elements

small, .small {
    font-size: 85%;
}

【Emphasis】

By increasing font-weight Value Emphasize a piece of text

【italic】

Use italics to emphasize a piece of text

[Note] You can safely use the and tags in HTML5. is used to highlight words or phrases without any emphasis; while the tag is mainly used for speech, technical vocabulary, etc.

<div>You can use the mark tag to <mark>highlight</mark> text.</div><div><del>This line of text is meant to be treated as deleted text.</del></div><div><s>This line of text is meant to be treated as no longer accurate.</s></div><div><ins>This line of text is meant to be treated as an addition to the document.</ins></div><div><u>This line of text will render as underlined</u></div><div><small>This line of text is meant to be treated as fine print.</small></div><div><strong>rendered as bold text</strong></div><div><em>rendered as italicized text</em></div>

Alignment

Through the text alignment class, you can easily and conveniently realign text

.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-justify {
    text-align: justify;
}
.text-nowrap {
    white-space: nowrap;
}

<p>Left aligned text.</p>
<p>Center aligned text.</p>
<p>Right aligned text.</p>
<p>Justified text.</p>
<p>No wrap text.</p>

Case

Through these classes, you can change the case of text

.text-lowercase {
    text-transform: lowercase;
}
.text-uppercase {
    text-transform: uppercase;
}
.text-capitalize {
    text-transform: capitalize;
}

<p>Lowercased text.</p>
<p>Uppercased text.</p>
<p>Capitalized text.</p>

Abbreviations

The complete content will be displayed when the mouse is hovered over abbreviations and abbreviations. Bootstrap implements the Enhanced styles for HTML's

element. The abbreviation element has the title attribute and appears as a light dotted frame. When the mouse is moved over it, it will turn into a pointer with a "question mark". If you want to see the complete content, you can hover the mouse over the abbreviation (also visible to users using assistive technology), but you need to include the title attribute

[Basic abbreviation]

abbr[title], abbr[data-original-title] {
    cursor: help;
    border-bottom: 1px dotted #777;
}

【Acronym】

Adding the

.initialism class to the abbreviation can make the font-size slightly smaller

.initialism {
    font-size: 90%;
    text-transform: uppercase;
}

<abbr>attr</abbr>
<abbr>HTML</abbr>

Address

Let contact information be presented in a format closest to daily use. Add

at the end of each line to retain the desired style

address {
    margin-bottom: 20px;
    font-style: normal;
    line-height: 1.42857143;
}

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr>P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a>first.last@example.com</a>
</address>

 

引用

【默认样式的引用】 

　　将任何 HTML 元素包裹在

中即可表现为引用样式。对于直接引用，建议用

标签

blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
}

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

【多种引用样式】

　　对于标准样式的

，可以通过几个简单的变体就能改变风格和内容

　　1、命名来源

　　添加

用于标明引用来源。来源的名称可以包裹进 标签中

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite>Source Title</cite></footer>
</blockquote>

　　2、另一种展示风格

　　通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite>Source Title</cite></footer>
</blockquote>

.blockquote-reverse, blockquote.pull-right {
    padding-right: 15px;
    padding-left: 0;
    text-align: right;
    border-right: 5px solid #eee;
    border-left: 0;
}

 

列表

【无序列表】

　　排列顺序无关紧要的一列元素 

ul, ol {
    margin-top: 0;
    margin-bottom: 10px;

  
• Lorem ipsum dolor sit amet
  
• Consectetur adipiscing elit
  
• Integer molestie lorem at massa
  
• Facilisis in pretium nisl aliquet
  
• Nulla volutpat aliquam velit
        
  • Phasellus iaculis neque
        
  • Purus sodales ultricies
        
  • Vestibulum laoreet porttitor sem
        
  • Ac tristique libero volutpat at
      
    
  
• Faucibus porta lacus fringilla vel
  
• Aenean sit amet erat nunc
  
• Eget porttitor lorem

【有序列表】

　　顺序至关重要的一组元素。 

<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit</li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ol>

【无样式列表】

　　移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式 

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

  
• Lorem ipsum dolor sit amet
  
• Consectetur adipiscing elit
  
• Integer molestie lorem at massa
  
• Facilisis in pretium nisl aliquet
  
• Nulla volutpat aliquam velit
        
  • Phasellus iaculis neque
        
  • Purus sodales ultricies
        
  • Vestibulum laoreet porttitor sem
        
  • Ac tristique libero volutpat at
      
    
  
• Faucibus porta lacus fringilla vel
  
• Aenean sit amet erat nunc
  
• Eget porttitor lorem

【内联列表】

　　通过设置 display: inline-block; 并添加少量的内边距（padding），将所有元素放置于同一行 

.list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;
}

  
• Lorem ipsum
  
• Phasellus iaculis
  
• Nulla volutpat

【描述】 

　　带有描述的短语列表。

dl {
    margin-top: 0;
    margin-bottom: 20px;
}
dt {
    font-weight: bold;
}
dt, dd {
    line-height: 1.42857143;
}
dd {
    margin-left: 0;
}

  

Description lists

  

A description list is perfect for defining terms.

  

Euismod

  

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

  

Donec id elit non mi porta gravida at eget metus.

  

Malesuada porta

  

Etiam porta sem malesuada magna mollis euismod.

【水平排列的描述】

　　.dl-horizontal 可以让

内的短语及其描述排在一行。开始是像

的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行

.dl-horizontal dt {float: left;
    width: 160px;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dl-horizontal dd {
    margin-left: 180px;
}

  

Description lists

  

A description list is perfect for defining terms.

  

Euismod

  

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

  

Donec id elit non mi porta gravida at eget metus.

  

Malesuada porta

  

Etiam porta sem malesuada magna mollis euismod.

  

Felis euismod semper eget lacinia

  

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

 

代码

【内联代码】

 　　通过 标签包裹内联样式的代码片段。

code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
}

【用户输入】

　　通过 标签标记用户通过键盘输入的内容。

kbd {
    padding: 2px 4px;
    font-size: 90%;
    color: #fff;
    background-color: #333;
    border-radius: 3px;-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
}

【代码块】

　　多行代码可以使用

 标签。为了正确的展示代码，注意将尖括号做转义处理。<div class="cnblogs_code"><pre class="brush:php;toolbar:false">pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
}

　　还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。

.pre-scrollable {
    max-height: 340px;
    overflow-y: scroll;
}

【变量】

　　通过 标签标记变量

【程序输出】

　　通过 标签来标记程序输出的内容

<div>For example, <code><section></code> should be wrapped as inline.
</div>
<div>To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
    To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
</div>
<div>
    <pre class="brush:php;toolbar:false"><p>Sample text here...</p>

    

<p>Sample text here...</p>

    y = mx + b

    This text is meant to be treated as sample output from a computer program.