bootstrap說好的要使用，總是看了一遍又一遍的文檔，其實(shí)還是不會(huì)。
這個(gè)活計(jì)是個(gè)手藝活，需要練習(xí)。這里記錄一下最簡(jiǎn)單的入門過程，入了門其他的去看官方文檔就好的多了。

引入css和js

<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

Demo

這里算是說明吧，bootstrap全靠css的樣式支撐，大量的使用div 和 ul，li 這些標(biāo)簽，而且所說的特點(diǎn)什么流式布局，柵格都是基于 class的。

流式布局

<div class="container-fluid">

導(dǎo)航

<nav class="nav navbar-default navbar-fixed-top">
<div class="collapse navbar-collapse">
<ul class="dropdown-menu">
<div class="navbar-form navbar-right">

柵格

<div class="col-md-9">

屏幕12格，md是一般的屏幕，超大是lg，剩下的看官方文檔吧，詳細(xì)。

列表

<div class="list-group">
<div class="list-group-item" style="border: 0;">

側(cè)邊欄

<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-body">

圖標(biāo)

<span class="glyphicon glyphicon-user"></span>

面包屑

<ul class="breadcrumb">
<li>
<a href="#" class="text-muted">開發(fā)語(yǔ)言</a>
</li>
<li>
<a href="#" class="text-muted">Web課程</a>
</li>
</ul>

TAB

<ul class="nav nav-tabs" id="myTabs">
<li class="active">
<a href="#tyxw" data-toggle="tab">體育新聞</a>

                    </li>
                    <li>
                        <a href="#cjbd" data-toggle="tab">財(cái)經(jīng)報(bào)道</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="tyxw">
                        <p>
                            <a href="#">甜瓜單節(jié)16分爆發(fā)力太恐怖?|?湯神三分鐘就超全隊(duì) </a><span class="pull-right">2016年7月27日</span></p></div>
                    <div class="tab-pane fade" id="cjbd">
                        <p>
                            <a href="#">央行公開市場(chǎng)進(jìn)行1800億逆回購(gòu) 人民幣小幅走高 </a>
                        </p>
                    </div>
                </div>

結(jié)束

Paste_Image.png