Bootstrap排版

内联子标题

<small>     设置文本为父文本大小的 85%
<strong>    
设置文本为更粗的文本
<em>        
设置文本为斜体

P标签的样式:

"lead":文本更大更粗、行高更高
"
text-left
": 向左对齐
"text-center": 居中对齐
"text-right": 向右对齐
"text-justify":设定文本对齐,段落中超出屏幕部分文字自动换行
"text-muted" :文本内容减弱
(不同的字体颜色)
"text-primary": primary class
"text-success": success class
"text-info": info class
"text-warning": warning class
"text-danger": danger class

举例说明:
<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title>Bootstrap 实例 - 上下文类</title>
    <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        body{padding: 20px;}
    </style>
</head>
<body>
    <div class = "container">
        <div class="row">
            <div class="col-lg-6 col-lg-offset-2" style="background:#F1FFF4;padding:20px;">
                <p>这是一行普通文字</p>
                <p class="lead">这是带有lead类的文字(加粗加大行高更多,line-height:1.4;font-weight:300;margin-bottom:20px;)</p>
                <p class="text-center">这是带有text-center类的文字(居中对齐,text-align: center;)</p>
                <p class="text-right">这是带有text-right类的文字(局右对齐,text-align: right;)</p>                
                <p class="text-justify">这是带有text-justify类的文字(text-align: justify)</p>
                <p class="text-muted">这是带有text-muted类的文字(减弱,color:#777)</p>

                <p class="text-primary">这是带有text-primary类的文字(color: #337AB7)</p>
                <p class="text-success">这是带有text-success类的文字(color: #3C763D)</p>
                <p class="text-info">这是带有text-info类的文字(color: #31708F)</p>
                <p class="text-warning">这是带有text-warning类的文字(color: #8A6D3B)</p>
                <p class="text-danger">这是带有text-danger类的文字(color: #A94442)</p>
            </div>
        </div>
    </div>
</body>
</html>

效果如下:

Bootstrap排版_第1张图片
    图中详细说明了每一种class的样式,当然如果默认样式不是自己想要的,完全可以更改bootstrap.min.css文件。

缩写

HTML 元素提供了用于缩写的标记,比如 WWW 或 HTTP。Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框,当鼠标悬停在上面时会显示完整的文本(<abbr> title 属性中的内容)。添加 .initialism 到 <abbr>,会得到较小的字体。

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title>Bootstrap 实例 - 上下文类</title>
    <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        body{padding: 20px;}
    </style>
</head>
<body>
    <div class = "container">
        <div class="row">
            <div class="col-lg-4 col-lg-offset-2" style="background:#F1FFF4;padding:20px;">
                <abbr title="World Wide Web">WWW</abbr><br>
                <abbr title="Small Office Home Office">SOHO</abbr>
            </div>
        </div>
    </div>
</body>
</html>
效果如下:

Bootstrap排版_第2张图片

当鼠标悬停在WWW或者是SOHO上时,鼠标右下方会出现一个?号,并且会显示abbr的title属性中的值,
如WWW右下角显示(World Wide Web),SOHO右下角显示(Small Office Home Office)

地址(Address)

<address> 默认为 display:block;需要使用标签来为封闭的地址文本(当地址文本使用的是strong,abbr,a这些行内元素时)添加换行。
<address>标签并无特殊之处,其默认的CSS样式为:
address {
    margin-bottom: 20px;
    font-style: normal;
    line-height: 1.42857;
}

引用(Blockquote)

可以在任意的 HTML文本旁使用默认的 <blockquote>,其他选项包括,添加一个 <small> 标签来标识引用的来源, 使用class .pull-right 向右对齐引用。 例如:
<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title>Bootstrap 实例 - 上下文类</title>
    <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        body{padding: 20px;}
    </style>
</head>
<body>
    <div class = "container">
        <div class="row">
            <div class="col-lg-6 col-lg-offset-2" style="background:#F1FFF4;padding:20px;">
               <blockquote>
                    <p>这是一个默认的引用实例。</p>
                </blockquote>
                <blockquote>这是一个带有源标题(title = "Source Title")的引用。
                    <small>Someone famous in 
                        <cite title="Source Title">Source Title</cite>
                    </small>
                </blockquote>
                <blockquote class="pull-right">这是一个向右对齐(class = "pull-right")的引用(带有原标题)。
                    <small>Someone famous in 
                        <cite title="Source Title">Source Title</cite>
                    </small>
                </blockquote>
            </div>
        </div>
    </div>
</body>
</html>

效果如下:
Bootstrap排版_第3张图片
pull-right的样式:
blockquote.pull-right {
    padding-right: 15px;
    padding-left: 0px;
    text-align: right;
    border-right: 5px solid #EEE;
    border-left: 0px none;
   float: right !important;
}

列表

Bootstrap 支持有序列表、无序列表和定义列表。

  • 有序列表:有序列表是指以数字或其他有序字符开头的列表(ol/li)。
  • 无序列表:无序列表是指没有特定顺序的列表,是以传统风格的着重号开头的列表。如果您不想显示这些着重号,您可以使用 class .list-unstyled
移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中(ul/li)。
  • 定义列表:在这种类型的列表中,每个列表项可以包含 <dt> 和 <dd> 元素。<dt> 代表 定义术语,就像字典,这是被定义的属于(或短语)。
接着,<dd> 是 <dt> 的描述。可以使用 class dl-horizontal 把 <dl> 行中的属于与描述并排显示。
<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title>Bootstrap 实例 - 上下文类</title>
    <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        body{padding: 20px;}
    </style>
</head>
<body>
    <div class = "container">
        <div class="row">
            <div class="col-lg-6 col-lg-offset-2" style="background:#F1FFF4;padding:20px;">
                <h4>有序列表</h4>
                    <ol>
                      <li>Item 1</li>
                      <li>Item 2</li>
                      <li>Item 3</li>
                      <li>Item 4</li>
                    </ol>
                    <h4>无序列表</h4>
                    <ul>
                      <li>Item 1</li>
                      <li>Item 2</li>
                      <li>Item 3</li>
                      <li>Item 4</li>
                    </ul>
                    <h4>无样式列表(list-unstyled)</h4>
                    <ul class="list-unstyled">
                      <li>Item 1</li>
                      <li>Item 2</li>
                      <li>Item 3</li>
                      <li>Item 4</li>
                    </ul>
                    <h4>内联列表(list-inline)</h4>
                    <ul class="list-inline">
                      <li>Item 1</li>
                      <li>Item 2</li>
                      <li>Item 3</li>
                      <li>Item 4</li>
                    </ul>
                    <h4>定义列表</h4>
                    <dl>
                      <dt>Description 1</dt>
                      <dd>Item 1</dd>
                      <dt>Description 2</dt>
                      <dd>Item 2</dd>
                    </dl>
                    <h4>水平的定义列表</h4>
                    <dl class="dl-horizontal">
                      <dt>Description你好你好你好你好你好1</dt>
                      <dd>Item 1</dd>
                      <dt>Description 2</dt>
                      <dd>Item 2</dd>
                    </dl>
            </div>
        </div>
    </div>
</body>
</html>

效果如下:
Bootstrap排版_第4张图片

关于样式做一点说明:
无样式列表:

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

内联列表:
.list-inline {
    padding-left: 0px;
    margin-left: -5px;
    list-style: outside none none;
}
水平的定义列表
.dl-horizontal dt {
    float: left;
    width: 160px;
    overflow: hidden;
    clear: left;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
}

white-space:nowrap;强制不换行
text-overflow:ellipsis:
文字超出部分显示为省略号

你可能感兴趣的:(bootstrap,列表,地址,排版,缩写)