bootstrap經常使用功能

<!-- 首頁輪換圖片 --><div id="image-trun" class="carousel slide" data-ride="carousel">    <!-- Indicators -->    <ol class="carousel-indicators">        <li data-target="#image-trun" data-slide-to="0" class="active"></li>        <li data-target="#image-trun" data-slide-to="1"></li>        <li data-target="#image-trun" data-slide-to="2"></li>    </ol>    <!-- Wrapper for slides -->    <div class="carousel-inner" role="listbox">        <div class="item active">            <img src="/static/images/website/1.jpg" alt="呵呵">            <div class="carousel-caption">輪換圖片1</div>        </div>        <div class="item">            <img src="/static/images/website/2.jpg" alt="哈哈">            <div class="carousel-caption">輪換圖片2</div>        </div>        <div class="item">            <img src="/static/images/website/3.jpg" alt="拉拉">            <div class="carousel-caption">輪換圖片3</div>        </div>    </div>    <!-- Controls -->    <a class="left carousel-control" href="#image-trun" role="button" data-slide="prev">        <span class="glyphicon glyphicon-chevron-left"></span>        <span class="sr-only">上一個</span>    </a>    <a class="right carousel-control" href="#image-trun" role="button" data-slide="next">        <span class="glyphicon glyphicon-chevron-right"></span>        <span class="sr-only">下一個</span>    </a></div><!-- 輪換圖片 --><!-- 分頁+翻頁  控制分頁大小  pagination-lg  pagination-sm --><div class="row">    <ul class="pagination">        <li class="disabled"><a href="">«</a><li>        <li class="active"><a href="">1</a><li>        <li><a href="">2</a><li>        <li><a href="">3</a><li>        <li><a href="">4</a><li>        <li><a href="">5</a><li>        <li><a href="">6</a><li>        <li><a href="">7</a><li>        <li><a href="">8</a><li>        <li><a href="">»</a><li>    </ul>    <div class="row">        <ul class="pager">            <li class="previous"><a href="#">上一頁</a></li>            <li class="next"><a href="">下一頁</a></li>        </ul>    </div></div><!-- 分頁 --><!-- 彈出框  --><li><a href="#" data-target="#about" data-toggle="modal">關於</a></li> <!--  一個data-target 屬性指向對應的id便可 --><div class="modal fade" id="about">    <div class="modal-dialog">        <div class="modal-content">            <div class="modal-heading">                <button type="button" class="close" data-dismiss="modal">                    <span style="padding-right:10px;" aria-hidden="true">×</span>                    <span class="sr-only">Close</span>                </button>                <h3 class="feature-heading">傳銷<span class="text-muted">擾亂社會經濟秩序影響安定團結</span></h3>            </div>            <div class="modal-body">                主要體大多數消費者或投資者的最終權益得不到保障。下面咱們把傳銷與正常營銷逐一對照，供你們辨別。                消費行爲與經營行爲模糊，傳銷者用一些「伎倆套路」，前期給你宣傳的是投資經營行爲，後來你不知不覺成爲了消費者；或者宣傳的是消費行爲，後來讓你變成了投資者；                甚至引用「消費資本化」之類使人模糊的概念，令你迷失在投資與消費之間，這樣給你在法律上的維權帶來不少困難（注：消費行爲與投資經營行爲是兩個不一樣的法律概念，                適用法律分別是：《消費者權益保護法》和《合同法》）。                組織、領導以推銷商品、提供服務、項目投資等經營活動爲名，要求參加者以繳納費用或者購買商品、服務、投資等方式得到加入資格。            </div>            <div class="modal-footer">                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>                <button type="button" class="btn btn-primary">Save Changes</button>            </div>        </div>    </div></div><!-- 彈出框 --><!-- 選項卡 --><div class="container">    <ul class="nav nav-tabs" role="tablelist">        <li class="active"><a href="#linux" role="tab" data-toggle="tab">Linux</a></li>        <li><a href="#apache" role="tab" data-toggle="tab">Apache</a></li>        <li><a href="#php" role="tab" data-toggle="tab">PHP</a></li>        <li><a href="#mysql" role="tab" data-toggle="tab">MySql</a></li>        <li><a href="#html" role="tab" data-toggle="tab">HTML</a></li>        <li><a href="#css" role="tab" data-toggle="tab">CSS</a></li>    </ul>    <div class="tab-content">        <div class="tab-pane active" id="linux">            <div class="row feature">                <div class="col-md-8">                    <h1 class="feature-heading">Linux<span class="text-muted">操做系統</span></h1>                    <p>Linux是一套無償使用和自由傳播的類Unix操做系統，是一個基於POSIX和UNIX的多用戶、多任務、支持多線程和多CPU的操做系統。                    它能運行主要的UNIX工具軟件、應用程序和網絡協議。它支持32位和64位硬件。Linux繼承了Unix以網絡爲核心的設計思想，是一個性能穩定的多用戶網絡操做系統。</p>                    <p>Linux是一款免費的操做系統，用戶能夠經過網絡或其餘途徑免費得到，並能夠任意修改其源代碼。                    這是其餘的操做系統所作不到的。正是因爲這一點，來自全世界的無數程序員參與了Linux的修改、編寫工做，程序員能夠根據本身的興趣和靈感對其進行改變，                    這讓Linux吸取了無數程序員的精華，不斷壯大。</p>                </div>                <div class="col-md-4"><img class="feature-image img-responsive" src="/img/linux.png" /></div>            </div>        </div>        <div class="tab-pane" id="apache">            <div class="row feature">                <div class="col-md-4"><img class="feature-image img-responsive" src="/img/apache.jpg" /></div>                <div class="col-md-8">                    <h1 class="feature-heading">Apache<span class="text-muted">Web服務器</span></h1>                    <p>Apache HTTP Server（簡稱Apache）是Apache軟件基金會的一個開放源碼的網頁服務器，能夠在大多數計算機操做系統中運行，                    因爲其多平臺和安全性被普遍使用，是最流行的Web服務器端軟件之一。它快速、可靠而且可經過簡單的API擴展，將Perl/Python等解釋器編譯到服務器中。</p>                    <p>Apache源於NCSAhttpd服務器，通過屢次修改，成爲世界上最流行的Web服務器軟件之一。Apache取自「a patchy server」的讀音，                    意思是充滿補丁的服務器，由於它是自由軟件，因此不斷有人來爲它開發新的功能、新的特性、修改原來的缺陷。                    Apache的特色是簡單、速度快、性能穩定，並可作代理服務器來使用</p>                </div>            </div>        </div>        <div class="tab-pane" id="php">            <div class="row feature">                <div class="col-md-8">                    <h1 class="feature-heading">PHP<span class="text-muted">開源腳本語言</span></h1>                    <p>Hypertext Preprocessor，中文名：「超文本預處理器」.語法吸取了C語言、Java和Perl的特色，易於學習，使用普遍，主要適用於Web開發領域。</p>                    <p>PHP 獨特的語法混合了C、Java、Perl以及PHP自創的語法。它能夠比CGI或者Perl更快速地執行動態網頁。                    用PHP作出的動態頁面與其餘的編程語言相比，PHP是將程序嵌入到HTML（標準通用標記語言下的一個應用）文檔中去執行，                    執行效率比徹底生成HTML標記的CGI要高許多；PHP還能夠執行編譯後代碼，編譯能夠達到加密和優化代碼運行，使代碼運行更快。</p>                </div>                <div class="col-md-4"><img class="feature-image img-responsive" src="/img/pho.png" /></div>            </div>        </div>        <div class="tab-pane" id="mysql">            <div class="row feature">                <div class="col-md-4"><img class="feature-image img-responsive" src="/img/mysql.jpg" /></div>                <div class="col-md-8">                    <h1 class="feature-heading">MySql<span class="text-muted">關係型數據庫管理系統</span></h1>                    <p>MySQL是一個開放源碼的小型關聯式數據庫管理系統，開發者爲瑞典MySQL AB公司。MySQL被普遍地應用在Internet上的中小型網站中。因爲其體積小、速度快、整體擁有成本低，尤爲是開放源碼這一特色，許多中小型網站爲了下降網站整體擁有成本而選擇了MySQL做爲網站數據庫。</p>                    <p>MySQL是一種關聯數據庫管理系統，關聯數據庫將數據保存在不一樣的表中，而不是將全部數據放在一個大倉庫內，這樣就增長了速度並提升了靈活性。</p>                </div>            </div>        </div>        <div class="tab-pane" id="html">            <div class="row feature">                <div class="col-md-8">                    <h1 class="feature-heading">HTML<span class="text-muted">超文本標記語言</span></h1>                    <p>網頁的本質就是超級文本標記語言，經過結合使用其餘的Web技術（如：腳本語言、公共網關接口、組件等），能夠創造出功能強大的網頁。於是，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是創建在超文本基礎之上的。超級文本標記語言之因此稱爲超文本標記語言，是由於文本中包含了所謂「超級連接」點。</p>                    <p>超級文本標記語言是一種規範，一種標準，                    它經過標記符號來標記要顯示的網頁中的各個部分。網頁文件自己是一種文本文件，經過在文本文件中添加標記符，能夠告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網頁文件，而後根據標記符解釋和顯示其標記的內容，對書寫出錯的標記將不指出其錯誤，且不中止其解釋執行過程，編制者只能經過顯示效果來分析出錯緣由和出錯部位。但須要注意的是，對於不一樣的瀏覽器，對同一標記符可能會有不徹底相同的解釋，於是可能會有不一樣的顯示效果</p>                </div>                <div class="col-md-4"><img class="feature-image img-responsive" src="/img/html.png" /></div>            </div>        </div>        <div class="tab-pane" id="css">            <div class="row feature">                <div class="col-md-4"><img class="feature-image img-responsive" src="/img/css.png" /></div>                <div class="col-md-8">                    <h1 class="feature-heading">CSS<span class="text-muted">級聯樣式表</span></h1>                    <p>它是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。</p>                    <p>CSS目前最新版本爲CSS3，是可以真正作到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言，                    CSS可以對網頁中的對象的位置排版進行像素級的精確控制，支持幾乎全部的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力，並可以進行初步交互設計，                    是目前基於文本展現最優秀的表現設計語言。CSS可以根據不一樣使用者的理解能力，簡化或者優化寫法，針對各種人羣，有較強的易讀性。                    </p>                </div>            </div>        </div>    </div><hr /></div><!-- 選項卡 --><!-- 路徑導航 --><div class="container">    <ol class="breadcrumb">        <li><a href="#">首頁</a></li>        <li class="active">列表頁</li>    </ol></div><!-- 路徑導航 --><!-- 徽章圖標 --><div class="row">    <div class="btn-group pull-left">        <button type="button" class="btn btn-default">            <span class="glyphicon glyphicon-thumbs-up"></span> 牛逼        </button>        <button type="button" class="btn btn-default">            <span class="glyphicon glyphicon-thumbs-down"></span> 苦逼        </button>        <button type="button" class="btn btn-default">            <span class="glyphicon glyphicon-hand-up"></span> 逗逼        </button>        <button type="button" class="btn btn-default">            <span class="glyphicon glyphicon-hand-down"></span> 傻逼        </button>    </div>    <div class="btn-group pull-right">        <button type="button" class="btn btn-default">            <span class="glyphicon glyphicon-download-alt"></span> 下載        </button>        <button type="button" class="btn btn-default">            <span class="glyphicon glyphicon-share"></span> 分享        </button>        <button type="button" class="btn btn-default">            <span class="glyphicon glyphicon-heart-empty"></span> 收藏        </button>    </div></div><!-- 徽章圖標 --><!-- 氣泡通知 --><ul class="nav navbar-nav">    <li class="active"><a href="#">開始</a></li>    <li><a href="#">CSS</a></li>    <li><a href="#">Javascript</a></li>    <li><a href="#">訂單 <span class="badge">10</span></a></li>    <li><a href="#">留言 <span class="badge">25</span></a></li>    <li><a href="#about">關於</a></li></ul><!-- 氣泡通知 --><!-- 摺疊卡 控制摺疊卡的開關 in>>樣式  --><div class="col-md-4">    <div class="panel-group" id="accordion" role="tablist" aria-multiselectbale="true">        <div class="panel panel-default">            <div class="panel-heading">                <h3 class="panel-title">                    <a data-toggle="collapse" data-parent="#accordion" href="#panel-one" aria-expanded="true" aria-controls="panel-one">這裏是標題</a>                </h3>            </div>            <div id="panel-one" class="panel-collapse collapse in" role="tabpanel">                <div class="panel-body">                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.                </div>            </div>        </div>        <div class="panel panel-default">            <div class="panel-heading">                <h3 class="panel-title">                    <a data-toggle="collapse" data-parent="#accordion" href="#panel-two" aria-expanded="true" aria-controls="panel-two">這裏是標題</a>                </h3>            </div>            <div id="panel-two" class="panel-collapse collapse in" role="tabpanel">                <div class="panel-body">                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.                </div>            </div>        </div>        <div class="panel panel-default">            <div class="panel-heading">                <h3 class="panel-title">                    <a data-toggle="collapse" data-parent="#accordion" href="#panel-three" aria-expanded="true" aria-controls="panel-three">這裏是標題</a>                </h3>            </div>            <div id="panel-three" class="panel-collapse collapse in" role="tabpanel">                <div class="panel-body">                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.                </div>            </div>        </div>    </div></div><!-- 摺疊卡 -->