Bootstrap 3之美05-排版、Button、Icon、Nav和NavBar、List、Table、Form

本篇主要包括：

■  排版
■  Button
■  Icon
■  Nav和NavBar
■  List
■  Table
■  Form

 

  排版

● 斜體：<em>
● 加粗體：<strong>
● 突出段落：class="lead"
● 字體顏色：class="text-success",class="text-muted",class="text-success",class="text-primary",class="text-warning"

                <h1>新浪體育訊</h1>
                <p class="text-success">這里是副標題</p>
                <p class="lead">在2014賽季亞冠聯賽的<em>一場1/4決賽首回合比賽中</em>，<strong>廣州恆大客場0-1負於西悉尼流浪者</strong>。比賽中，出現了包括張琳芃、郜林領到紅牌在內的多次爭議判罰。裁判專家張大樵在接受天津體育頻道采訪時表示拉羅卡對張琳芃的犯規比較嚴重，應該領到一張黃牌，而張琳芃打了拉羅卡的臉則屬於嚴重犯規，主裁判哈桑向他出示紅牌沒有問題。哈桑張冠李戴，對薩巴犯規的是劉健，卻向郜林出示了紅牌。另外，張大樵認為哈桑在上半場漏判了恆大隊的一個點球。</p>

 

  Button

在<button>或<a>標簽下，可以這樣設置按鈕的樣式：
● 一般按鈕：class="btn"
● 按鈕顏色：class="btn btn-primary"
● 按鈕尺寸：class="btn btn-primary btn-lg"

 

  Icon

→打開網站：http://getbootstrap.com/
→點擊components菜單項，在打開的頁面中將看到所有的Icon以及對應class名

要應用這些Icons，只需要給span加上合適的class名：

<button class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-star"></span>菜單</button>

 

  Nav和NavBar

            <div id="menu" class="navbar navbar-default">
                <div class="navbar-header">
                    <button class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-star"></span>菜單</button>
                    <div id="logo">
                        <a href='.'>
                            <h3>新浪體育</h3>
                        </a>
                    </div>
                </div>
                
                <ul class="nav navbar-nav navbar-right">
                    <li class="nav active"><a href="#">主頁</a></li>
                    <li class="nav"><a href="#">關於我們</a></li>
                    <li class="nav"><a href="#">聯系我們</a></li>
                </ul>
            </div>
        </header>

不僅如此，導航也是自適應的，當把頁面寬度縮小到一定程度，導航呈豎直排列。

也可以設置：當頁面寬度縮小到一定程度，讓導航消失。在ul外層包裹上一個class="navbar-collapse collapes"的div。

                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="nav active"><a href="#">主頁</a></li>
                        <li class="nav"><a href="#">關於我們</a></li>
                        <li class="nav"><a href="#">聯系我們</a></li>
                    </ul>
                 </div>

再次把頁面寬度縮小到一定程度，導航消失。

我還可以為<button>添加一個名為navbar-toggle的class，只有當頁面寬度足夠小，該button才出現。

<button class="btn btn-primary btn-lg navbar-toggle"><span class="glyphicon glyphicon-star"></span>菜單</button>

 

更有趣的是：如果我們為button增加data-toggle和data-target屬性，當頁面寬度足夠小，button出現，點擊button，可以讓消失的導航再現。

 <button class="btn btn-primary btn-lg navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="glyphicon glyphicon-chevron-down"></span>菜單</button>

.navbar-collapse是ul所在div的class名。

 

如果我們想讓導航區域固定在頁面最頂部，可以加名為navbar-fixed-top的class。

        <header class="container">
            <div id="menu" class="navbar navbar-default navbar-fixed-top">
                <div class="navbar-header">
                    <button class="btn btn-primary btn-lg navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="glyphicon glyphicon-chevron-down"></span>菜單</button>
                    <div id="logo">
                        <a href='.'>
                            <h3>新浪體育</h3>
                        </a>
                    </div>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="nav active"><a href="#">主頁</a></li>
                        <li class="nav"><a href="#">關於我們</a></li>
                        <li class="nav"><a href="#">聯系我們</a></li>
                    </ul>
                 </div>
            </div>
        </header>

 

  List

→在項目根文件下創建about.html
→about.html有一個ul

    <ul>
        <li>在以往的亞足聯比賽中</li>
        <li>在以往的亞足聯比賽中，日韓兩國俱樂部球隊在遭遇不公待遇時</li>
        <li>日韓兩國足協、職業聯盟和俱樂部均會去信亞足聯</li>
        <li>這一次，中國足協也對此事給予關注</li>
        <li>也將去信給亞足聯高層</li>
    </ul>    

 

當為ul添加class="list-unstyled"屬性后：

 

當為ul再添加名為list-inline的class后：

 

如果這樣設置ul:

    <ul class="list-group">
        <li class="list-group-item">在以往的亞足聯比賽中</li>
        <li class="list-group-item">在以往的亞足聯比賽中，日韓兩國俱樂部球隊在遭遇不公待遇時</li>
        <li class="list-group-item">日韓兩國足協、職業聯盟和俱樂部均會去信亞足聯</li>
        <li class="list-group-item">這一次，中國足協也對此事給予關注</li>
        <li class="list-group-item">也將去信給亞足聯高層</li>
    </ul>

 

如果在ul外層裹上一層div。

        <div class="col-md-6">
            <ul class="list-group">
                <li class="list-group-item">在以往的亞足聯比賽中</li>
                <li class="list-group-item">在以往的亞足聯比賽中，日韓兩國俱樂部球隊在遭遇不公待遇時</li>
                <li class="list-group-item">日韓兩國足協、職業聯盟和俱樂部均會去信亞足聯</li>
                <li class="list-group-item">這一次，中國足協也對此事給予關注</li>
                <li class="list-group-item">也將去信給亞足聯高層</li>
            </ul>
        </div>

 

如果我們為某個li設置名active的class。

        <div class="col-md-6">
            <ul class="list-group">
                <li class="list-group-item active">在以往的亞足聯比賽中</li>
                <li class="list-group-item">在以往的亞足聯比賽中，日韓兩國俱樂部球隊在遭遇不公待遇時</li>
                <li class="list-group-item">日韓兩國足協、職業聯盟和俱樂部均會去信亞足聯</li>
                <li class="list-group-item">這一次，中國足協也對此事給予關注</li>
                <li class="list-group-item">也將去信給亞足聯高層</li>
            </ul>
        </div>

 

在li中加名為badge的class。

        <div class="col-md-6">
            <ul class="list-group">
                <li class="list-group-item active"><span class="badge">15</span>在以往的亞足聯比賽中</li>
                <li class="list-group-item">在以往的亞足聯比賽中，日韓兩國俱樂部球隊在遭遇不公待遇時</li>
                <li class="list-group-item">日韓兩國足協、職業聯盟和俱樂部均會去信亞足聯</li>
                <li class="list-group-item">這一次，中國足協也對此事給予關注</li>
                <li class="list-group-item">也將去信給亞足聯高層</li>
            </ul>
        </div>

   

 

  Table

如果什么都不加。

        <table>
            <thead>
                <tr>
                    <th>Actor</th>
                    <th>Character</th>
                </tr>
            </thead>
            <tr>
                <td>Jeff Bridges</td>
                <td>Jeffery ebowski</td>
            </tr>
            <tr>
                <td>John Goodman</td>
                <td>Walter Sobchak</td>
            </tr>
            <tr>
                <td>Julianne Moore</td>
                <td>Maude Lebowski</td>
            </tr>
        </table>

 

如果<table class="table">     

 

如果<table class="table table-striped">

 

如果<table class="table table-striped table-hover">

 

如果<table class="table table-striped table-hover table-condensed">

 

如果把table包裹在如下div中。

        <div class="row">
            <div class="col-md-6">
                <table class="table table-striped table-hover table-condensed">
                ......
                </table>
            </div>
        </div>

 

如果改成col-md-12

        <div class="row">
            <div class="col-md-12">
                <table class="table table-striped table-hover table-condensed">
                ......
                </table>
            </div>
        </div>

 

如果我們想讓table自適應，可以在table外層再加一層div。

        <div class="row">
            <div class="col-md-12">
                <div class="table-responsive">
                    <table class="table table-striped table-hover table-condensed">
                    ......
                    </table>
                </div>
            </div>
        </div>

當頁面寬度小於table寬度的時候，會出現水平滾動條。

 

  Form

沒有修飾前。

        <form>
            <label>Name</label>
            <input/>
            <label>Email</label>
            <input/>
            <label>Reason</label>
            <select>
                <option>Adoration</option>
                <option>Ordering a White Russian</option>
                <option>I am lost</option>
            </select>
            <label>Message</label>
            <textarea cols="40" rows="6"></textarea>
            <input type="submit" value="提交"/>
        </form>

 

改成如下：

        <div class="col-md-6">
            <form class="form-inline">
                <div class="form-group">
                    <label for="nameInput">Your Name</label>
                    <input type="text" name="nameInput" class="form-control" placeholder="e.g. Your Name"/>
                </div>
                <div class="form-group">
                    <label for="emailInput">Email</label>
                    <input type="email" name="emailInput" class="form-control" placeholder="e.g. Your Email"/>
                </div>
                <div class="form-group">
                    <label>Reason</label>
                    <select class="form-control">
                        <option>Adoration</option>
                        <option>Ordering a White Russian</option>
                        <option>I am lost</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Message</label>
                    <textarea cols="40" rows="6" class="form-control" placeholder="e.g. The Message"></textarea>
                </div>
                <input type="submit" value="提交" class="btn btn-success" />
            </form>
        </div>

 

參考資料：WilderMinds  

 

“Bootstrap 3之美”系列類包括:

Bootstrap 3之美01-下載並引入頁面

Bootstrap 3之美02-Grid簡介和應用

Bootstrap 3之美03-獨立行,文字環繞,圖片自適應,隱藏元素

Bootstrap 3之美04-自定義CSS、Theme、Package

Bootstrap 3之美05-排版、Button、Icon、Nav和NavBar、List、Table、Form

Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、用Button和Dropdowns模擬Select、Input Groups、Thumbnails、Panels、Wells

Bootstrap 3之美07-插件Collapse、Accordion、Modal、Tab、Tooltip、Alert、Carousel