Bootstrap學習筆記

阿新 • • 發佈：2017-07-11

學習回歸 title min-width primary 導航 inf -s 繼承

一、Bootstrap是什麽：

Bootstrap是Twitter公司開發的基於HTML，CSS及JavaScript的前端框架；

二、可以做什麽：

開發響應式布局和移動設備優先的項目；

三、Bootstrap特性：

　　響應式設計，柵格布局；

四、常見參考網址：

　　官方網址：http://getbootstrap.com

　　中文地址：www.bootcss.com

　　可視化制作工具：Jetstrap

　　國內CDN：http://cdn.code.baidu.com/

五、全局樣式：

　　1、標題（大標題/小標題）：h1（36px），h2（30px），h3（24px），h4（18px），h5（14px），h6（12px）

<!doctype html>
<html>
    <head>
        <title>My Bootstrap Sample</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        < 
script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <h1>標題一</h1>
        <h2>標題二</h2>
        <h3>標題三</h3>
        <h4>標題四</h4>
        <h5>標題五</h5>
        <h6>標題六</ 
h6>
        <span class="h1">標題一<small>小標題</small></span>
        <span class="h2">標題二</span>
        <span class="h3">標題三</span>
        <span class="h4">標題四</span>
        <span class="h5">標題五</span>
        <span class="h6">標題六</span>
    </body>
</html>

View Code

　技術分享

　　2、文本：p標簽默認字體14px，行高20px，底部外邊距10px

<!doctype html>
<html>
    <head>
        <title>My Bootstrap Sample</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <p>
            <mark>XXX</mark>在參觀香港<del>回歸祖國20周年成就展</del>時<ins>對梁振英</ins>說，他將<u>於6月29日至7月1日</u>赴香港參加系列活動，<small>時間不短，活動安排豐富</small>。<strong>XXX希望這些活動能夠代表中央政府和全國各族人民向香港市民轉達情誼</strong>，祝賀香港回歸20周年。
        </p>
        <p class="text-left">
            XXX在參觀香港回歸祖國20周年成就展時對梁振英說，他將於6月29日至7月1日赴香港參加系列活動。
        </p>
        <p class="text-center">
            XXX在參觀香港回歸祖國20周年成就展時對梁振英說，他將於6月29日至7月1日赴香港參加系列活動。
        </p>
        <p class="text-right">
            XXX在參觀香港回歸祖國20周年成就展時對梁振英說，他將於6月29日至7月1日赴香港參加系列活動。
        </p>
        <p class="text-lowercase">HELLO WORLD!</p>
        <p class="text-uppercase">hello world !</p>
        <p class="text-capitalize">hello world !</p>
    </body>
</html>

View Code

　　技術分享

　　3、表格

<!doctype html>
<html>
    <head>
        <title>My Bootstrap Sample</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <table class="table table-striped table-bordered table-hover">
            <thead>
               <tr>
                   <th>標題一</th>
                   <th>標題二</th>
                   <th>標題三</th>
                   <th>標題四</th>
                   <th>標題五</th>
               </tr>
            </thead>
            <tbody>
                <tr class="active">
                    <td>內容一</td>
                    <td>內容二</td>
                    <td>內容三</td>
                    <td>內容四</td>
                    <td>內容五</td>
                </tr>
                <tr class="success">
                    <td>內容一</td>
                    <td>內容二</td>
                    <td>內容三</td>
                    <td>內容四</td>
                    <td>內容五</td>
                </tr>
                <tr class="info">
                    <td>內容一</td>
                    <td>內容二</td>
                    <td>內容三</td>
                    <td>內容四</td>
                    <td>內容五</td>
                </tr>
                 <tr class="warning">
                    <td>內容一</td>
                    <td>內容二</td>
                    <td>內容三</td>
                    <td>內容四</td>
                    <td>內容五</td>
                </tr>
                 <tr class="danger">
                    <td>內容一</td>
                    <td>內容二</td>
                    <td>內容三</td>
                    <td>內容四</td>
                    <td>內容五</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

View Code

　　技術分享

　　4、表單

<!doctype html>
<html>
    <head>
        <title>My Bootstrap Sample</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <form class="form-inline">
            <div class="form-group has-success">
                <label class="control-label" for="">This is an input textbox!</label>
                <input type="text" class="form-control input-sm" placeholder="This is an input textbox!" />
           </div>
           <div class="form-group">
                <label class="control-label" for="">This is an input textbox!</label>
                <select class="form-control has-warning" name="" id="">
                    <option>北京</option>
                    <option>北京</option>
                    <option>北京</option>
                    <option>北京</option>
                </select>
           </div>
       </form>
    </body>
</html>

View Code　　

　　技術分享

　　5、按鈕

<!doctype html>
<html>
    <head>
        <title>My Bootstrap Sample</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>                                                  
        <div>
            <button class="btn btn-default btn-lg">This is a button!</button>
            <button class="btn btn-success btn-sm">This is a button!</button>
            <button class="btn btn-primary active">This is a button!</button>
            <button class="btn btn-info btn-block" disabled="disabled">This is a button!</button>
            <button class="btn btn-warning">This is a button!</button>
            <button class="btn btn-danger">This is a button!</button>
            <button class="btn btn-link">This is a button!</button>
            <a class="btn btn-danger">This is a A!</a>
        </div>
    </body>
</html>

View Code

技術分享

　　6、圖片

　　圓角（.img-rounded）

　　圓形（.img-circle）

　　帶有邊框的圓角圖形（.img-thumbmail）

六、Bootstrap漸進

　　1、viewport主要針對移動設備進行了優化，目的是讓當前的viewpoint的寬度等於設備的寬度

　　2、響應式布局

　　 [email protected] screen實現：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
        <title>Testing Responsive Layout</title>
        <style>
            *{
                padding:0;
                margin:0;
            }
            .test
            {
                width:300px;
                height:30px;
                background:red;
            }
            @media screen and (max-width:900px) and (min-width:500px)
            {
                .test
                {
                    width:100%;
                    height:30px;
                    background:blue;
                }
            }
        </style>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="test"></div>
    </body>
</html>

View Code

手動調整頁面寬度，顯示效果如下：

A、頁面寬度大於900px時：

技術分享

B、頁面寬度大於500px且小於等於900px時：

技術分享

C、頁面寬度小於500px時：

技術分享

　　使用柵格布局實現：

　　技術分享

<!doctype html>
<html>
    <head>
        <style>
            .test
            {
                height:50px;
                background:red;
            }
        </style>
        <title>My Bootstrap Sample</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>                                                  
        <div class="test col-lg-3 col-md-4 col-sm-6 col-xs-12 col-lg-offset-3"></div>
    </body>
</html>

View Code

　　代碼分析及顯示結果分析：當在大屏幕時顯示1/4，當在中等屏幕時，顯示1/3，當位於超小屏幕中時顯示1/2，在小屏幕中顯示全屏！（運行上述代碼並手動調整屏幕大小即可看到實際的顯示效果）

　　3、單位（px是相對於屏幕分辨率的單位）

　　 px的弊端：px無法隨屏幕放大縮小，所以當屏幕放大時，文字可能會出現模糊等情況！

　 em：可以相對於父元素進行調整；（em大小不定且不穩定）

　　 rem：繼承根元素大小，10px=1.6rem（克服了em的缺點）

　　4、文字圖標

　　圖片的形狀，以文字的形式出現

七、Bootstrap組件

　　1、字體圖標：　

<button class="btn btn-default">
        <span class="glyphicon glyphicon-star">This is a Font Icon!</span>
</button>

　　技術分享

　　2、下拉菜單：

<div class="dropdown">
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">--Options--
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li>
                    <a href="www.baidu.com">Bai Du</a>
                </li>
                <li>
                    <a href="www.baidu.com">Bai Du</a>
                </li>
                <li>
                    <a href="www.baidu.com">Bai Du</a>
                </li>
                <li>
                    <a href="www.baidu.com">Bai Du</a>
                </li>
            </ul>
</div>

　　技術分享

　　3、控件組：

<div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control" />
</div>

　　技術分享

　　4、導航：

 <ul class="nav nav-tabs">
            <li class="active">
                <a href="www.baidu.com">Bai Du</a>
            </li>
            <li class="active">
                <a href="www.baidu.com">Bai Du</a>
            </li>
            <li class="active">
                <a href="www.baidu.com">Bai Du</a>
            </li>
            <li class="active">
                <a href="www.baidu.com">Bai Du</a>
            </li>
        </ul>
        <ul class="nav nav-pills">
            <li class="active">
                <a href="www.baidu.com">Bai Du</a>
            </li>
            <li class="active">
                <a href="www.baidu.com">Bai Du</a>
            </li>
            <li class="active">
                <a href="www.baidu.com">Bai Du</a>
            </li>
            <li class="active">
                <a href="www.baidu.com">Bai Du</a>
            </li>
        </ul>
        <ul class="nav nav-stacked">
            <li class="active">
                <a href="www.baidu.com">Bai Du</a>
            </li>
            <li class="active">
                <a href="www.baidu.com">Bai Du</a>
            </li>
            <li class="active">
                <a href="www.baidu.com">Bai Du</a>
            </li>
            <li class="active">
                <a href="www.baidu.com">Bai Du</a>
            </li>
        </ul>

　　　　技術分享

　　5、分頁：

 <nav>
            <ul class="pager">
                <li class="previous">
                    <a href="www.baidu.com">
                        LEFT
                    </a>
                </li>
                 <li class="next">
                    <a href="www.baidu.com">
                        RIGHT
                    </a>
                </li>
            </ul>
            <ul class="pagination pagination-lg">
                <li class="active">
                    <a href="www.baidu.com">1</a>
                </li>
                 <li>
                    <a href="www.baidu.com">2</a>
                </li>
                 <li>
                    <a href="www.baidu.com">3</a>
                </li>
                 <li>
                    <a href="www.baidu.com">4</a>
                </li>
                 <li>
                    <a href="www.baidu.com">5</a>
                </li>
            </ul>
</nav>

　　技術分享

　　6、進度條：

<div class="progress">
            <div class="progress-bar progress-bar-success progress-bar-striped" style="width:60%">60%</div>
</div>

　　技術分享

　　7、列表：

<ul class="list-group">
            <li class="list-group-item active">
                This is a list.
                <span>11</span>
            </li>
             <li class="list-group-item disabled">
                This is a list.
                <span>11</span>
            </li>
             <li class="list-group-item list-group-item-info">
                This is a list.
                <span>11</span>
            </li>
</ul>

　　技術分享

　　8、面板：

<div class="panel panel-info">
            <div class="panel-heading">
                Pop-up layer!
            </div>
            <div class="panel-body">
                Content!
            </div>
            <div class="panel-footer">
                Footer
            </div>
</div>

　　技術分享

Bootstrap學習筆記

bootstrap 學習筆記（1）---介紹bootstrap和柵格系統

優先 cal 圖片應用尺寸文件中 lin png ice 　　學習前端許久，對於布置框架和響應瀏覽器用html 和javascript 寫的有點繁瑣，無意間看到這個框架，覺得挺好用的就開始學習了，但是這個框架上面有很多知識，不是所有的都要學的，故將學習筆記和覺得重點的

bootstrap 學習筆記（2）---- 排版

-i 排列分段函數 class 總結 capital src 設置 per 安裝和柵格系統學完，這篇寫的是排版手冊中排版的目錄如下圖《標題，頁面主題，內聯文本元素，對齊，改變大小寫，縮略語，地址，引用，列表》手冊中介紹那麽多，其實並不是所有的都要去看看。很多都是沒有必

bootstrap 學習筆記（5）---- 圖片和響應式工具

-h thumb ima ble resp 圓角 rim ucc spl （一）響應式圖片：在 Bootstrap 版本 3 中，通過為圖片添加 .img-responsive 類可以讓圖片支持響應式布局。其實質是為圖片設置了 max-width: 100%;、 heig

Bootstrap學習筆記

學習回歸 title min-width primary 導航 inf -s 繼承一、Bootstrap是什麽： Bootstrap是Twitter公司開發的基於HTML，CSS及JavaScript的前端框架；二、可以做什麽：開發響應式

bootstrap 學習筆記（大漠版）

itl spl title mpat you style 包括 boot 技術這個課程中的boostrap是3.0+版本的。（2.0與3.0有區別） bootstrap中的JS是依賴於jquery的，所以需要事先引用jquery（1.9.0版本以上）。 <!DO

Bootstrap學習筆記(四)表單input

控件屬性 icon val 制作表單 pan 選擇提示信息 AI 單行輸入框，常見的文本輸入框，也就是input的type屬性值為text。在Bootstrap中使用input時也必須添加type類型，如果沒有指定type類型，將無法得到正確的樣式，因為Bootstra

bootstrap學習筆記（六）導航

trap 樣式 -h 禁用狀態規格參數 class home 圓角 ons 導航（基礎樣式） <ul class="nav nav-tabs"> <li><a href="##">Home</a></li>

Bootstrap 學習筆記

theme AS inpu con radi www. 下載並且單選框 bootstrap 下載以及演示地址：　　國內穩當翻譯網站：http://www.bootcss.com 　　下載bootstrap ： http://v3.bootcss.com 　　下載

Bootstrap 學習筆記8 下拉菜單滾動監聽

bsp http drop htm bar 下拉 overflow inf flow 代碼部分： <nav class="navbar navbar-default"> <a href="#" class="navba

Bootstrap 學習筆記項目實戰響應式導航欄

span navbar fault logo zh-cn sig con href meta 導航代碼HTML： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta

Bootstrap 學習筆記項目實戰首頁內容介紹上

OS fir inf med mil and row boot bootstrap 效果圖： HTML代碼： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta char

bootstrap學習筆記(一)

obi IT 員工 ont AS 環境 ive 前端特性 Bootstrap： Bootstrap是目前最流行的前端開發框架，由Twitter的兩位前員工Mark Otto和Jacob Thornton在2010年8月份創建。它是一套基於Less的前端開發

Bootstrap學習筆記（一）

type yiq test origin bject adding device pip ctype 引用Bootstrap需要的基本格式 <!doctype html> <html lang="en"> <head> &l

快速使用 bootstrap 開發響應式網頁[ bootstrap學習筆記一 ]

使用 BootCDN 提供的免費 CDN 加速服務（同時支援 http 和 https 協議）  <link rel="stylesheet" href="https://cdn.jsdelivr.

Bootstrap學習筆記(三) 網格系統

4-1實現原理　　網格系統的實現原理非常簡單，僅僅是通過定義容器大小，平分12份(也有平分成24份或32份，但12份是最常見的)，再調整內外邊距，最後結合媒體查詢，就製作出了強大的響應式網格系統。Bootstrap框架中的網格系統就是將容器平分成12份。 <div cla

Bootstrap學習筆記(二) 表單

3-1 基礎表單　　單中常見的元素主要包括：文字輸入框、下拉選擇框、單選按鈕、複選按鈕、文字域和按鈕等。　　在Bootstrap框架中，通過定製了一個類名`form-control`，也就是說，如果這幾個元素使用了類名“form-control”，將會實現一些設計上的定製效果。　　

Bootstrap學習筆記(一) 排版

Bootsrap是一款優秀的前端開發框架，我從慕課網上開始學習Bootstrap，以下我學習過程中的一些筆記及程式碼。首先學習排版: 從Bootstrap網站下載Bootstrap3中文文件（V3.3.5），解壓到本地。由於幕課上排版系列課程主要用的是Bootstrap的Css，所以下

flask-bootstrap學習筆記

bootstra 適合使用方法 ubd nbsp from force trap 內網 flask-bootstrap 是flask一個方便擴展使用bootstrap前臺的擴展。使用方法：安裝： pip instal flask-bootstrap4 加載：

Bootstrap學習筆記-模態框

簡介模態框經過了優化，更加靈活，以彈出對話方塊的形式出現，具有最小和最實用的功能集，參考modal。用法 HTML結構 div[class=modal[fade]][id] div[class=modal-dialog[modal-l

Bootstrap學習筆記（八） Bootstrap支援的JavaScript外掛

Bootstrap框架中的模態彈出框，分別運用了“modal”、“modal-dialog”和“modal-content”樣式，而彈出窗真正的內容都放置在“modal-content”中，其主要又包括三個部分： ☑ 彈出框頭部，一般使用“modal-header”表示，主要包括標題和關閉按鈕

Bootstrap學習筆記

相關推薦