bootstrap

時間 2019-11-06

原文原文鏈接

花了一天時間學了下bootstrap入門，想必你們用css寫前端頁面的時候都很痛苦，bootstrap就是來解決這個問題的，它封裝了css的不少樣式，開發的時候直接拿來用就能夠了，提升了開發效率css

bootstrap官網地址：https://www.bootcss.com/html

bootstrap比較優秀的就是提供了響應式佈局（能夠適配pc端、pad端、手機端的佈局，下面會貼效果圖），還有全局CSS樣式和封裝好了的JS組件和插件前端

響應式佈局
1.同一套頁面能夠兼容不一樣分辨率的設備
2.實現：依賴於柵格系統：將一行平均分紅12個格子，能夠指定元素佔幾個格子
步驟：
　　1.定義容器：至關於以前的table
　　　　容器分類：
　　　　　　1.container：兩邊留白，每種設備佔比不一樣
　　　　　　2.container-fluid:每一種設備都是100%寬度
　　2.定義行：至關於以前的tr 樣式：row
　　3.定義元素：指定該元素在不一樣的設備上，所佔的格子數目樣式：col-設備代號-格子數目
　　　　設備代號：
　　　　　　1.xs:超小屏幕手機（<768px) col-xs-12
　　　　　　2.sm:小屏幕平板（>=768px）
　　　　　　3.md:中等屏幕桌面顯示器（>=992px）
　　　　　　4.lg:大屏幕大桌面顯示器（>=1200px）
　　注意：
　　　　1.一行中若是格子數目超過12，則超出部分自動換行
　　　　2.柵格類屬性能夠向上兼容。柵格類適用於與屏幕寬度大於或等於分界點大小的設備
　　　　3.若是真實設備寬度小於了設置柵格類屬性的設備代碼的最小值，會一個元素佔滿一整行jquery

全局CSS樣式
　　按鈕 class="btn btn-default"
　　圖片 class="img-responsive" 圖片在任意尺寸都佔100%
　　　　圖片形狀 <img src="..." alt="..." class="img-rounded"> 方形
　　　　　　　　<img src="..." alt="..." class="img-circle"> 圓形
　　　　　　　　<img src="..." alt="..." class="img-thumbnail"> 相框
　　表格 class="table table-bordered table-hover"
　　表單 class="form-control"
組件
　　導航條
　　分頁條
插件
　　輪播圖git

柵格github

看見沒，它可以動態的適配不一樣的屏幕大小npm

代碼以下bootstrap

<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <style> .inner { border: 1px solid red;
        }
    </style>
</head>
<body>
<br>
<div class="container">
    <div class="row">
        <div class="col-lg-1 col-sm-2 inner">柵格</div>
        <div class="col-lg-1 col-sm-2 inner">柵格</div>
        <div class="col-lg-1 col-sm-2 inner">柵格</div>
        <div class="col-lg-1 col-sm-2 inner">柵格</div>
        <div class="col-lg-1 col-sm-2 inner">柵格</div>
        <div class="col-lg-1 col-sm-2 inner">柵格</div>
        <div class="col-lg-1 col-sm-2 inner">柵格</div>
        <div class="col-lg-1 col-sm-2 inner">柵格</div>
        <div class="col-lg-1 col-sm-2 inner">柵格</div>
        <div class="col-lg-1 col-sm-2 inner">柵格</div>
        <div class="col-lg-1 col-sm-2 inner">柵格</div>
        <div class="col-lg-1 col-sm-2 inner">柵格</div>
    </div>
</div>
</body>
</html>

全局CSS樣式微信

代碼以下app

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <style> .inner { border: 1px solid red;
        }
    </style>
</head>
<body>
<br>
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
<br><br>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首選項）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（通常信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危險）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（連接）Link</button>
</body>
</html>

表格

代碼以下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<br>
<table class="table table-bordered table-hover">
    <tr>
        <th>編號</th>
        <th>姓名</th>
        <th>年齡</th>
    </tr>
    <tr>
        <td>001</td>
        <td>張三</td>
        <td>23</td>
    </tr>
    <tr>
        <td>002</td>
        <td>張三</td>
        <td>23</td>
    </tr>
    <tr>
        <td>003</td>
        <td>張三</td>
        <td>23</td>
    </tr>
</table>

</body>
</html>

表單

代碼

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<br>
<form class="form-horizontal">
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Remember me </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Sign in</button>
        </div>
    </div>
</form>
</body>
</html>

導航條

代碼

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<br>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
</body>
</html>

分頁條

代碼

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<br>
<nav aria-label="Page navigation">
    <ul class="pagination">
        <li class="disabled">
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li><a href="#">1</a></li>
        <li class="active"><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="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>
</body>
</html>

輪播圖

代碼

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<br>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="img/001.jpg" alt="...">
            <div class="carousel-caption"> ... </div>
        </div>
        <div class="item">
            <img src="img/001.jpg" alt="...">
            <div class="carousel-caption"> ... </div>
        </div> ... </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

</body>
</html>

demo案例

代碼地址：https://github.com/king1039/bootstrap-demo

總的來講，使用bootstrap開發是很是方便的，並且適配多種屏幕尺寸，CSS樣式拿來就用，免去了不少煩惱

歡迎關注個人微信公衆號：安卓圈

1. bootstrap + bootstrap-table + jquery + bootstrap-paginator
2. Bootstrap（一）認識Bootstrap
3. 【Bootstrap】1.初識Bootstrap
4. Bootstrap
5. bootstrap
6. BootStrap
更多相關文章...
• Lua 數據庫訪問 - Lua 教程
• R 包 - R 語言教程
• Github 簡明教程

相關標籤/搜索

bootstrap

bootstrap+bootstrap+scss

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。