1. 程式人生 > >Bootstrap排版

Bootstrap排版

縮寫

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:
文字超出部分顯示為省略號