This article will introduce in detail the content related to typesetting in Bootstrap
[h]
HTML All title tags in <h1>
to <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 <h1> to <h6> 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>
tag or an element assigned the .small
class, which can be used to mark the subtitle. <small>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>
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>
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 class, the paragraph can be highlighted
.lead { margin-bottom: 20px; font-size: 16px; font-weight: 300; line-height: 1.4; }
<p>一般内容</p><p class="lead">中心内容</p><p>一般内容</p>
mark, .mark { padding: .2em; background-color: #fcf8e3; }
【Small text】 For inline or block type text that does not need to be emphasized, use the <small> tag to wrap it, and the text inside will be set to 85% of the font size of the parent container. Nested <small> elements within the title element are set to different font-sizes. You can also give inline elements the .small class in place of any <small> elements
small, .small { font-size: 85%; }
<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>
.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 class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p>
.text-lowercase { text-transform: lowercase; } .text-uppercase { text-transform: uppercase; } .text-capitalize { text-transform: capitalize; }
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
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
abbr[title], abbr[data-original-title] { cursor: help; border-bottom: 1px dotted #777; }
.initialism class to the abbreviation can make the font-size slightly smaller
.initialism { font-size: 90%; text-transform: uppercase; }
<abbr title="attribute">attr</abbr> <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
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 title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address>
【默认样式的引用】
将任何 HTML 元素包裹在
中即可表现为引用样式。对于直接引用,建议用标签
blockquote { padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid #eee; }Copy after login<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>Copy after login
【多种引用样式】
对于标准样式的
,可以通过几个简单的变体就能改变风格和内容1、命名来源
添加
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>Copy after login2、另一种展示风格
通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果
<blockquote class="blockquote-reverse"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>Copy after login.blockquote-reverse, blockquote.pull-right { padding-right: 15px; padding-left: 0; text-align: right; border-right: 5px solid #eee; border-left: 0; }Copy after login
列表
【无序列表】
排列顺序无关紧要的一列元素
ul, ol { margin-top: 0; margin-bottom: 10px;Copy after login<ul> <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<ul> <li>Phasellus iaculis neque</li> <li>Purus sodales ultricies</li> <li>Vestibulum laoreet porttitor sem</li> <li>Ac tristique libero volutpat at</li> </ul> </li> <li>Faucibus porta lacus fringilla vel</li> <li>Aenean sit amet erat nunc</li> <li>Eget porttitor lorem</li> </ul>Copy after login
【有序列表】
顺序至关重要的一组元素。
<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>Copy after login
【无样式列表】
移除了默认的 list-style 样式和左侧外边距的一组元素(只针对直接子元素)。这是针对直接子元素的,也就是说,你需要对所有嵌套的列表都添加这个类才能具有同样的样式
.list-unstyled { padding-left: 0; list-style: none; }Copy after login<ul class="list-unstyled"> <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<ul> <li>Phasellus iaculis neque</li> <li>Purus sodales ultricies</li> <li>Vestibulum laoreet porttitor sem</li> <li>Ac tristique libero volutpat at</li> </ul> </li> <li>Faucibus porta lacus fringilla vel</li> <li>Aenean sit amet erat nunc</li> <li>Eget porttitor lorem</li> </ul>Copy after login
【内联列表】
通过设置 display: inline-block; 并添加少量的内边距(padding),将所有元素放置于同一行
.list-inline { padding-left: 0; margin-left: -5px; list-style: none; }Copy after login<ul class="list-inline"> <li>Lorem ipsum</li> <li>Phasellus iaculis</li> <li>Nulla volutpat</li> </ul>Copy after login
【描述】
带有描述的短语列表。
dl { margin-top: 0; margin-bottom: 20px; } dt { font-weight: bold; } dt, dd { line-height: 1.42857143; } dd { margin-left: 0; }Copy after login<dl> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> <dt>Euismod</dt> <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd> <dt>Malesuada porta</dt> <dd>Etiam porta sem malesuada magna mollis euismod.</dd> </dl>Copy after login
【水平排列的描述】
.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; }Copy after login<dl class="dl-horizontal"> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> <dt>Euismod</dt> <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd> <dt>Malesuada porta</dt> <dd>Etiam porta sem malesuada magna mollis euismod.</dd> <dt>Felis euismod semper eget lacinia</dt> <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd> </dl>Copy after login
代码
【内联代码】
通过
标签包裹内联样式的代码片段。</p> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">code { padding: 2px 4px; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 4px; }</pre><div class="contentsignin">Copy after login</div></div></div> <p>【用户输入】</p> <p> 通过 <kbd> 标签标记用户通过键盘输入的内容。</p> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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); }</pre><div class="contentsignin">Copy after login</div></div></div> <p>【代码块】</p> <p> 多行代码可以使用 <pre class="brush:php;toolbar:false"> 标签。为了正确的展示代码,注意将尖括号做转义处理。</p> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div></div> <p> 还可以使用 <code>.pre-scrollable
类,其作用是设置 max-height 为 350px ,并在垂直方向展示滚动条。.pre-scrollable { max-height: 340px; overflow-y: scroll; }Copy after login【变量】
通过 标签标记变量
【程序输出】
通过 标签来标记程序输出的内容
<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 + bThis text is meant to be treated as sample output from a computer program.Copy after login
The above is the detailed content of Using Bootstrap for typography. For more information, please follow other related articles on the PHP Chinese website!