54 前端--Bootstrap框架

時間  2019-11-12
標籤 前端 bootstrap 框架 欄目 Bootstarp 简体版
原文   原文鏈接

目錄javascript

bootstrap

Bootstrap是Twitter開源的基於HTML、CSS、JavaScript的前端框架。css

　　它是爲實現快速開發Web應用程序而設計的一套前端工具包。html

　　它支持響應式佈局，而且在V3版本以後堅持移動設備優先。
優勢：各類命名都統一而且規範化。 頁面風格統一，畫面和諧。前端

下載bootstrap：https://www.bootcss.com/html5

起步

基本模板

<!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>
    <h1>你好，世界！</h1>

    <!-- 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>

柵格系統

Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。java

原理：jquery

  • 「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。
  • 經過「行（row）」在水平方向建立一組「列（column）」。
  • 你的內容應當放置於「列（column）」內，而且，只有「列（column）」能夠做爲行（row）」的直接子元素。
  • 相似 .row 和 .col-xs-4 這種預約義的類，能夠用來快速建立柵格佈局。Bootstrap 源碼中定義的 mixin 也能夠用來建立語義化的佈局。
  • 經過爲「列（column）」設置 padding 屬性，從而建立列與列之間的間隔（gutter）。經過爲 .row 元素設置負值 margin 從而抵消掉爲 .container 元素設置的 padding，也就間接爲「行（row）」所包含的「列（column）」抵消掉了padding。
  • 負值的 margin就是下面的示例爲何是向外突出的緣由。在柵格列中的內容排成一行。
  • 柵格系統中的列是經過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可使用三個 .col-xs-4 來建立。
  • 若是一「行（row）」中包含了的「列（column）」大於 12，多餘的「列（column）」所在的元素將被做爲一個總體另起一行排列。
  • 柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 而且針對小屏幕設備覆蓋柵格類。 所以，在元素上應用任何 .col-md-* 柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 而且針對小屏幕設備覆蓋柵格類。 所以，在元素上應用任何 .col-lg-* 不存在， 也影響大屏幕設備。

柵格參數

手機（<768px） 平板(≥768px) 電腦(≥992px) 大屏膜(≥1200px)
柵格系統行爲 老是水平排列 大於閾值時--> 將換行，水平--> 排列
container 最大寬度 自動 750px 970px 1170px
類前綴 .col-xs- .col-sm- .col-md- .col-lg-
列數 12 12 12 12
最大列寬 自動 ~62px ~81px ~97px 
<div class="col-md-6"></div>        // 表示這個標籤的內容佔4柵格
<div class="col-md-offset-3"></div> // 表示這個標籤距離左邊3個柵格

流式佈局容器

將最外面的佈局元素 .container 修改成 .container-fluid，就能夠將固定寬度的柵格佈局轉換爲 100% 寬度的佈局。npm

<div class="container">
<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

列偏移 col-md-offset-x

使用 .col-md-offset-* 類能夠將列向右側偏移。這些類實際是經過使用 * 選擇器爲當前元素增長了左側的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。bootstrap

//居中
col-md-offset-x
    <div class="container-fluid">
<!--            <h1>xxxx</h1>-->
        <div class="row">
            <div class="col-md-6 col-md-offset-3 c1">       
        </div>
    </div>

列嵌套

爲了使用內置的柵格系統將內容再次嵌套，能夠經過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-* 元素內。被嵌套的行（row）所包含的列（column）的個數不能超過12（其實，沒有要求你必須佔滿12列）。api

<div class="container-fluid">
<!--            <h1>xxxx</h1>-->
        <div class="row">
            <div class="col-md-6 col-md-offset-3 c1">
            // 列中又分柵格
                <div class="row">
                    <div class="col-sm-6 c1"></div>
                    <div class="col-sm-6 c2"></div>
                </div>
            </div>
        </div>
    </div>

CSS樣式

主標題

<h1>一級標題36px</h1>
<h2>二級標題30px</h2>
<h3>三級標題24px</h3>
<h4>四級標題18px</h4>
<h5>五級標題14px</h5>
<h6>六級標題12px</h6>
<!--除了使用h標籤，Bootstrap內置了相應的全局樣式-->
<!--內聯標籤應用標題樣式-->
<span class="h1">一級標題36px</span>
<span class="h2">二級標題30px</span>
<span class="h3">三級標題24px</span>
<span class="h4">四級標題18px</span>
<span class="h5">五級標題14px</span>
<span class="h6">六級標題12px</span>

副標題

<!--一級標題中嵌入小標題-->
<h1>一級標題<small>小標題</small></h1>

文本對齊

<!--文本對齊-->
<p class="text-left">文本左對齊</p>
<p class="text-center">文本居中</p>
<p class="text-right">文本右對齊</p>

文本大小寫

<!--大小寫-->
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

輔助類

文本顏色

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

關閉按鈕

經過使用一個象徵關閉的圖標，可讓模態框和警告框消失。

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

下拉三角

經過使用三角符號能夠指示某個元素具備下拉菜單的功能。注意，向上彈出式菜單中的三角符號是反方向的。

快速浮動

<div class="pull-left">...</div>
<div class="pull-right">...</div>

清除浮動

經過爲父元素添加 .clearfix 類能夠很容易地清除浮動（float）。

<!-- Usage as a class -->
<div class="clearfix">...</div>

顯示與隱藏

<div class="show">...</div>
<div class="hidden">...</div>

表格

Class 描述
.table-striped 條紋狀表格
.table-bordered 帶邊框的表格
.table-hover 鼠標懸停變色的表格
.table-condensed 緊縮型表格
.table-responsive 響應式表格

狀態類

Class 描述
.active 鼠標懸停在行或單元格上時所設置的顏色
.success 標識成功或積極的動做
.info 標識普通的提示信息或動做
.warning 標識警告或須要用戶注意
.danger 標識危險或潛在的帶來負面影響的動做

背景色

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

按鈕

可做爲按鈕使用的標籤或元素

爲 <a>、<button> 或 <input> 元素添加按鈕類（button class）便可使用 Bootstrap 提供的樣式。

<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">

按鈕樣式：

btn btn-default ：默認按鈕背景的顏色，有primary、success...

<button type="button" class="btn btn-default">（默認樣式）Default</button>

<button type="button" class="btn btn-primary">（首選項）Primary</button>

<button type="button" class="btn btn-success">（成功）Success</button>

<button type="button" class="btn btn-info">（通常信息）Info</button>

<button type="button" class="btn btn-warning">（警告）Warning</button>

<button type="button" class="btn btn-danger">（危險）Danger</button>

<button type="button" class="btn btn-link">（連接）Link</button>

按鈕大小：

<p>
  <button type="button" class="btn btn-primary btn-lg">（大按鈕）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按鈕）Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">（默認尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默認尺寸）Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">（小按鈕）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按鈕）Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

圖片

<img src="..." class="img-responsive" alt="Responsive image">

圖片形狀

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Bootstrap組件

須要導入jQuery，以及引入js文件

<script src="../../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

目錄：

  1. 字體圖標(fontawesome裏面比較全
  2. 下拉菜單
  3. 按鈕組
  4. 輸入框俎
  5. 導航
  6. 分頁
  7. 標籤和徽章
  8. 頁頭
  9. 縮率圖
  10. 進度條

響應式開發

爲何要進行響應式開發？

　　隨着移動設備的流行，網頁設計必需要考慮到移動端的設計。同一個網站爲了兼容PC端和移動端顯示，就須要進行響應式開發。

什麼是響應式？

　　利用媒體查詢，讓同一個網站兼容不一樣的終端（PC端、移動端）呈現不一樣的頁面佈局。

用到的技術：

　　CSS3@media查詢

　　用於查詢設備是否符合某一特定條件，這些特定條件包括屏幕尺寸、是否可觸摸、屏幕精度、橫屏豎屏等信息。

常見屬性：

　　1.device-width, device-height 屏幕寬、高

　　2.width,height 渲染窗口寬、高

　　3.orientation 設備方向

　　4.resolution 設備分辨率

語法：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

不一樣的媒體使用不一樣的stylesheet：

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

viewport

　　手機瀏覽器是把頁面放在一個虛擬的"窗口"（viewport）中，一般這個虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每一個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），用戶能夠經過平移和縮放來看網頁的不一樣部分。

設置viewport

　　一個經常使用的針對移動網頁優化過的頁面的 viewport meta 標籤大體以下：

<meta name=」viewport」 content=」width=device-width, initial-scale=1, maximum-scale=1″>
  • width：控制 viewport 的大小，能夠指定的一個值，若是 600，或者特殊的值，如 device-width 爲設備的寬度（單位爲縮放爲 100% 時的 CSS 的像素）。
  • height：和 width 相對應，指定高度。
  • initial-scale：初始縮放比例，也便是當頁面第一次 load 的時候縮放比例。
  • maximum-scale：容許用戶縮放到的最大比例。
  • minimum-scale：容許用戶縮放到的最小比例。
  • user-scalable：用戶是否能夠手動縮放。

JavaScript插件

模態框

模態框的HTML代碼放置的位置

務必將模態框的HTML代碼放在文檔的最高層級內（也就是說，儘可能做爲 body 標籤的直接子元素），以免其餘組件影響模態框的展示和/或功能。

靜態實例：

<!-- 觸發模態框的按鈕 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- 模態框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </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>

注意：

  • 經過爲模態框設置 .bs-example-modal-lg和 .bs-example-modal-sm來控制模態框的大小。
  • 經過 .fade類來控制模態框彈出時的動畫效果（淡入淡出效果）。
  • 經過在 .modal-bodydiv中設置 .row可使用Bootstrap的柵格系統。

動態實例：

點擊下面的按鈕便可經過 JavaScript 啓動一個模態框。此模態框將從上到下、逐漸浮現到頁面前。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </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 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="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." 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>

能夠在爲圖片添加介紹信息：

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

方法：

設置切換間隔爲2秒，默認是5秒。

在jQuery中加：

$('.carousel').carousel({
  interval: 2000
})
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程