6.BootStrap 内容排版

排版

Bootstrap 排版的文档和示例，包括全局设置、标题、正文、列表等。

 

标题

使用<h1>~</h6>可以创建不同尺寸的标题文字　　【普通H5】

如果是使用其它元素标签，比如<p>或<div>，调用.h1~6同样实现大标题；【框架实现 】

例如：

<h1>学习中收获，收获中感恩！</h1>
<h2>学习中收获，收获中感恩！</h2>
<h3>学习中收获，收获中感恩！</h3>
<h4>学习中收获，收获中感恩！</h4>
<h5>学习中收获，收获中感恩！</h5>
<h6>学习中收获，收获中感恩！</h6>

<p class="h1"> 学习中收获，收获中感恩！</p>
<p class="h2"> 学习中收获，收获中感恩！</p>
<p class="h3"> 学习中收获，收获中感恩！</p>
<p class="h4"> 学习中收获，收获中感恩！</p>
<p class="h5"> 学习中收获，收获中感恩！</p>
<p class="h6"> 学习中收获，收获中感恩！</p>

一样的效果

通过.text-muted样式，构建大标题的附属小标题【其实就是颜色淡一点】；还有一种更大型，更加醒目的标题方式：.display-1~4;

例：

<h3>我是h3 <span class="text-muted">我是text-muted</span></h3>
<!--无论是h 还是 p 标签  都比h标签大的多 display-【1-4】  -->
<p class="display-1">少年强则国强</p>
<h1 class="display-2">少年强则国强</h1>
<h1 class="display-3">少年强则国强</h1>
<h1 class="display-4">少年强则国强</h1>

 

文本类
想要指定一些段落中重要的内容，可以使用.lead强调；

比较常用的文本内联元素，来自HTML5:

<mark><del><s><ins><u><small><strong><em>
也是可以做出这样的效果的。

例：

<p >我是一名学生，为<span class="lead"> 中华民族伟大复兴</span>而奋斗！ </p>

 

<abbr>【没软用】

Bootstrap 4 定义 HTML <abbr> 元素的样式为显示在文本底部的一条虚线边框 还有提示 :

<abbr title="梁启超">少年强则国强！</abbr>

 

 

使用Blockquote设置来源备注或引用，使用.blockquote-footer设置底部备注来源；【没软用】

<Blockquote class="blockquote">少年强，则国强。</Blockquote>
<footer class="blockquote-footer">梁启超</footer>

 

可以对内容进行居中对齐.text-center或居右对齐.text-right;【默认肯定是左的 但也是有 text-left的！】

<div style="width: 600px; height: 200px;">
    <div style="width: 100%; height: 80px;" class="text-left" >左边</div>
    <div style="width: 100%; height: 80px;" class="text-center" >中间</div>
    <div style="width: 100%;height: 80px;" class="text-right" >右边</div>
</div>

 

 

     列表类
使用.list-unstyled样式，可以将列表初始化；【去掉列表样式 只能去除当前ul 或 li 】
使用.list-inline和.list-inline-item  结合实现多列并排列表；

例：

<ul class="list-unstyled">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <ol >               <!-- 添加list-unstyled 就没样式了 -->
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</ul>

 

使用dl、dt和dd可以实现水平描述, 使用.text-truncate可以省略溢出；【省略溢出是后尾接 3个点 】

例：【dl dd dt这里不写！】

 <p
 style="width: 150px;" class="text-truncate"  >
     少年智则国智，少年富则国富，

     少年强则国强，少年独立则国独立，

     少年自由则国自由，少年进步则国进步，

     少年胜于欧洲则国胜于欧洲，少年雄于地球则国雄于地球。
 </p>