您的位置：首页 > Web前端 > BootStrap

Bootstrap排版

2015-12-31 20:22 766 查看

内联子标题

<small>
设置文本为父文本大小的 85%

<strong> 设置文本为更粗的文本

<em> 设置文本为斜体

P标签的样式：

"lead":文本更大更粗、行高更高

"

text-left

":向左对齐

"text-center":居中对齐

"text-right":向右对齐

"text-justify":设定文本对齐,段落中超出屏幕部分文字自动换行

"text-muted"[b]:文本内容减弱[/b]

(不同的字体颜色)

"text-primary":primary
class

[b]"text-success":[/b]success class

[b][b]"text-info":[/b][/b]info
class

[b][b][b]"text-warning":[/b][/b][/b]warning
class

[b][b][b][b][b][b][b]"text-danger":[/b][/b][/b][/b][/b][/b][/b]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>

效果如下：

图中详细说明了每一种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>
效果如下：



当鼠标悬停在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>

效果如下：


 
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>

效果如下：



关于样式做一点说明：
无样式列表：
.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:文字超出部分显示为省略号

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航