内容排版

 Bootstrap 的内容排版，分为标题类、文本类和列表类三块。

一、标题类

1.使用

~

可以创建不同尺寸的标题文字；如果是使用其它元素标签，比如

或

，调用.h1~6 同样实现大标题

    <h1>Bootstraph1>
    <h2>Bootstraph2>
    <h3>Bootstraph3>
    <h4>Bootstraph4>
    <h5>Bootstraph5>
    <br>
    <p class="h1">Bootstrapp>
    <div class="h2">Bootstrapdiv>

2.通过.text-muted 样式，构建大标题的附属小标题

 <p class="h1">
    Bootstrap
    <small class="text-muted">V4.3small>
p>
 <div class="h2">
    Bootstrap 
    <small class="text-muted">V4.3small>
div>

3.更大型，更加醒目的标题方式：.display-1~4

    <h1 class="display-1">Bootstraph1>
    <h1 class="display-2">Bootstraph1>
    <h1 class="display-3">Bootstraph1>
    <h1 class="display-4">Bootstraph1>

二、文本类

1.可以使用.lead 强调一些段落中重要的内容

<p class="lead">Hello，大家好！p>

2.使用.title 样式和缩略语给文本做提示

   <p>
    <abbr title="这是一个提示！">提示abbr>    
   p>

3.使用 Blockquote 设置来源备注或引用，同时可以对内容进行居中对齐.text-center 或居右对齐.text-right；

   使用.blockquote-footer 设置底部备注来源

    <blockquote class="blockquote  text-center">
        <p>Hello！p>
        <footer class="blockquote-footer ">小风车吱呀转footer>
    blockquote>

三、列表类

1. 使用.list-unstyled 样式，可以将列表初始化；

<ul class="list-unstyled">
        <li>A 班li>
        <li>B 班li>
        <li>C 班
            <ul>
                <li>张三li>
                <li>李四li>
                <li>王五li>
                <li>孙六li>
            ul>
        li>
        <li>D班li>
ul>

2.使用.list-inline 和.list-inline-item 结合实现多列并排列表

    <ul class="list-inline">
        <li class="list-inline-item">A 班li>
        <li class="list-inline-item">B 班li>
        <li class="list-inline-item">C 班li>
        <li class="list-inline-item">D班li>
    ul>

3.使用 dl、dt 和 dd 可以实现水平描述，使用.text-truncate 可以省略溢出

<div class="container">
        <dl class="row">
            <dt class="c col-sm-3">1dt>
                <dd class="c col-sm-9">一个关于描述列表的内容dd>
        dl>
        <dl class="row">
            <dt class="c col-sm-3">2dt>
                <dd class="c col-sm-4  text-truncate">一个关于描述列表的内容,但是这个稍微长了一点点以至于换行！dd>
        dl>
        <dl class="row">
            <dt class="c col-sm-3">3dt>
                <dd class="c col-sm-9">一个关于描述列表的内容dd>
        dl>
div>

bootstrap