BootStrap學習筆記

時間  2019-11-16
標籤 bootstrap 學習 筆記 欄目 Bootstarp 简体版
原文   原文鏈接

BootStrap學習筆記

基本概念

BootStrap是一個Web前端的開發框架，來自Twittercss

對於前端內容，會用就好，後端工程師不太主要幹這個html

框架：一個半成品軟件，開發人員能夠在框架基礎上再進行開發，從而簡化編碼前端

好處：html5

  1. 定義了不少的CSS樣式和js插件，開發人員能夠直接使用這些樣式和插件以獲得豐富的頁面效果
  2. 響應式佈局：同一套頁面能夠兼容不一樣分辨率的設備，不須要針對不一樣分辨率和屏幕大小的設備重複開發

快速入門

  1. 下載並將bootstrap的內容(.jar\.css)複製到項目中jquery

    注意，像npm

    image-20191112103531169

    這裏，每個css都有一個min版本，這是什麼呢？其實min就是原格式的壓縮版，不利於閱讀，可是體積比較小。通常咱們引用min版，可是本身開發看的是源格式bootstrap

  2. 建立一個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標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <!-- 上面的是固定寫法，不修改就行了-->
    <!-- viewport相似於窗口的意思-->
    <title>Bootstrap helloworld</title>

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

    <!-- 目的是兼容IE，這些包不在咱們下載好的bootstrap裏面-->
    <!-- HTML5 shim 和 Respond.js 是爲了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：經過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起做用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<h1>你好，世界！</h1>

<!-- jQuery是js的一個框架-->
<!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->
<script src="src/js/bootstrap.min.js"></script>
</body>
</html>

柵格系統

響應式佈局

根據顯示器信息，動態調整元素大小和佈局，本身寫真的很麻煩，使用用bootStrap裏面的瀏覽器

bootstrap實現響應式佈局依賴於柵格系統：一行平均分爲12個格子，能夠指定元素佔幾個格子，而且能夠指定同一個元素在不一樣的界面上佔用的格子數不同，例如在pc上佔4個，在手機上佔12個app

步驟：

  1. 定義容器，至關於以前的table

    容器分類：

    1. container：兩邊有留空，可是是動態的。看起來有一些空，看起來沒有那麼緊湊
2. container-fluid：每一種設備都是100%寬度

  2. 定義行，至關於以前的tr。樣式：row

  3. 定義元素，至關於td，指定該元素在不一樣的設備上所佔的格子數目。樣式:col-設備代號-格子數目

    設備代號：

    1. xs：超小屏幕，小於768px
    2. sm:小屏幕，平板電腦，大於768px
    3. md：桌面顯示器,大於992px
    4. lg:大桌面顯示器,大於1200px

實例

<!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標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <!-- 上面的是固定寫法，不修改就行了-->
    <!-- viewport相似於窗口的意思-->
    <title>Bootstrap helloworld</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- 目的是兼容IE，這些包不在咱們下載好的bootstrap裏面-->
    <!-- HTML5 shim 和 Respond.js 是爲了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：經過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起做用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- jQuery是js的一個框架-->
    <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
    <script src="src/js/jquery-3.4.1.min.js"></script>
    <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->
    <script src="src/js/bootstrap.min.js"></script>
    <style>
        .inner{
            border:1px solid red;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-1 col-md-1 inner">框架</div>
        <div class="col-lg-1 col-md-1 inner">框架</div>
        <div class="col-lg-1 col-md-1 inner">框架</div>
        <div class="col-lg-1 col-md-1 inner">框架</div>
        <div class="col-lg-1 col-md-1 inner">框架</div>
        <div class="col-lg-1 col-md-1 inner">框架</div>
        <div class="col-lg-1 col-md-1 inner">框架</div>
        <div class="col-lg-1 col-md-1 inner">框架</div>
        <div class="col-lg-1 col-md-1 inner">框架</div>
        <div class="col-lg-1 col-md-1 inner">框架</div>
        <div class="col-lg-1 col-md-1 inner">框架</div>
        <div class="col-lg-1 col-md-1 inner">框架</div>
    </div>
</div>
</body>
</html>

注意這裏我卡了很久，緣由是下載的bootstrap版本好像有問題，若是<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">這裏使用本地的bootstrap.min.css柵格系統就不能生效，可是用cdn在線版本就能夠了。CDN速度也挺快的好像，可能不必使用下載版本？

其餘注意事項：

  1. 一行中要是格子數目超出12，則超出部分自動換行
  2. 柵格類屬性能夠向上兼容：從每一個類的定義上也能看出來，只有大於多少px的限制，沒有小於。向下是不兼容的。若是設備的寬度小於了設置的柵格類屬性的設備代號的最小值，默認按一個元素佔一行來處理

CSS樣式

這裏的要求比較低，只要能查詢文檔並實現、修改就行了

全局CSS樣式

  1. 按鈕

    class="btn btn-default"

  2. 圖片

    注意圖片的路徑：src指的當前目錄就是該html文件所在的目錄，若是圖片放在單獨的目錄裏，例如和src並列的img目錄，須要使用："../../img/lockPicture.jpg"這種格式來表示

    圖片還有形狀：方形、圓形和相框形式，要用的時候去文檔裏查吧

  3. 表單

  4. 表格

    爲任意 <table> 標籤添加 .table 類能夠爲其賦予基本的樣式 — 少許的內補（padding）和水平方向的分隔線。

    經過 .table-striped 類能夠給以內的每一行增長斑馬條紋樣式

    添加 .table-bordered 類爲表格和其中的每一個單元格增長邊框。

    經過添加 .table-hover 類可讓 中的每一行對鼠標懸停狀態做出響應。

    將任何 .table 元素包裹在 .table-responsive 元素內，便可建立響應式表格，其會在小屏幕設備上（小於768px）水平滾動。當屏幕大於 768px 寬度時，水平滾動條消失。

組件

  1. 導航條

    一個例子：

    <!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="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是爲了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：經過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起做用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<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>

<!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

  2. 分頁條

    一個例子：

    <nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li class="disabled"><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>

插件

  1. 輪播圖
<!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="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是爲了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：經過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起做用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<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/daniel-leone-v7daTKlZzaw-unsplash.jpg" alt="...">
            <div class="carousel-caption">
               A
            </div>
        </div>
        <div class="item">
            <img src="../../img/lockPicture.jpg" alt="...">
            <div class="carousel-caption">
                B
            </div>
        </div>
        <div class="item">
            <img src="../../img/lockPicture.jpg" alt="...">
            <div class="carousel-caption">
                B
            </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>

<!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程