前端之Bootstrap框架

時間 2020-07-30

標籤前端 bootstrap 框架欄目 Bootstarp 简体版

原文原文鏈接

前端之Bootstrap框架

Bootstrap

前端樣式框架樣式：提早將不少樣式都已經寫好了，封裝成一個個的類，咱們只需調用對應的樣式類來實現框架樣式css

想要使用前端框架必需要先下載到原本去調用或者導入CDN，BootCDN 獲取對應的連接引入html

使用

一、全局CSS樣式

一、佈局容器

一、左右留白的頁面框架 container前端

<div class="container">
    ......
</div>

二、所有佔滿瀏覽器窗口的容器框架 container-fluidpython

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

二、柵格系統

在佈局容器內建立頁面佈局jquery

一、先用row來劃分行，一行默認是12份git

二、再用col-**-數字，來劃定份數github

三、能夠經過柵格系統控制在多種不一樣尺寸屏幕展現效果相同bootstrap

手機：col-xs-數字api

平板：col-sm-數字瀏覽器

電腦：col-md-數字

超大屏幕：col-lg-數字

各類類參數能夠疊加使用

四、能夠控制劃分的份數左右移動用，col-md-offset-數字，從左往右移幾份

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">這是佔了6個柵格，在中間</div>
        <div class="col-md-6 ">這是佔了6個柵格，在左邊</div>
        <div class="col-md-4 col-sm-4 col-xs-4">佔了4個柵格</div>
        <div class="col-md-4 col-xs-4 col-md-offset-8 col-xs-offset-8">這是佔了4個柵格，在右邊</div>
    </div>
</div>

三、排版

設置副標題：small

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>

四、對齊

左對齊：text-left

居中對齊：text-center

右對齊：text-right

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

五、改變大小寫

所有大寫：text-lowercase

所有小寫：text-uppercase

首字母大寫：text-capitalize

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

六、列表

無樣式列表 (大列表無樣式，小列表下有點序號)：list-style

<ul class="list-unstyled">
  <li>...</li>
</ul>

內聯列表（將全部元素放在一行）：list-inline

<ul class="list-inline">
  <li>...</li>
</ul>

七、用戶輸入

用<kbd>標籤標示用戶輸入的內容

<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

八、表格

基本帶邊框：table

條紋帶表格：table-striped

帶邊框表格：table-bordered

鼠標懸停：table-hover

設置顏色：active(懸停在單元格上的顏色)、success(淡綠色)、danger(淡紅色)、warning(淡黃色)、info(淡藍色)、primary(無色)

九、表單

全部的表單標籤通常設置設置form-control類

十、按鈕

能夠爲a、button、input標籤添加button類，btn btn-default

按鈕顏色：btn-default（默認樣式樣式）、btn-danger（紅色）、btn-primary（藍色）、btn-success（綠色）、btn-info（淡藍色）

按鈕尺寸：btn-lg（大按鈕）、btn-sm（小按鈕）、btn-xs（超小按鈕）

禁用按鈕：disabled='disabled'

<p>
  <button type="button" class="btn btn-danger btn-lg">（大按鈕）Large button</button>
</p>
<p>
  <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-primary btn-xs" disabled>禁用（超小尺寸）Extra small button</button>
</p>

十一、圖片

響應式圖片（讓圖片更好的縮放）：img-responsive

圖片形狀：img-rounded（方形）、img-circle（圓形）、img-thumbnail（四邊留白方形）

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

十二、顏色

給文本加顏色

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

給背景加顏色

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

1三、浮動

向左浮動：pull-left

向右浮動：pull-right

1四、讓內容居中

center-block

二、組件

組件中包括圖標、下拉框、導航條、警告框、彈出框、分頁、進度條等等

圖標可在圖標庫中找到對應的圖標使用其代碼前須要先下載該庫到本地後導入，以後直接找到相應的圖標複製代碼就好，圖標庫fontawesome

三、JavaScript插件

JavaScript插件中包括js代碼樣式有：模態框、下拉菜單、滾動監聽、標籤頁、彈出框、警告框、按鈕等等

其中警告框、彈出框能夠用 SweetAlert 中的樣式更加好看，使用其代碼前須要先下載該庫到本地後導入

練習：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖書管理系統</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-inverse">
    <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">圖書管理系統</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">BMS</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="#">書籍 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">做者</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">更多 <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">搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Mr沈</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">更多操做 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">修改密碼</a></li>
                        <li><a href="#">修改頭像</a></li>
                        <li><a href="#">後臺管理</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">註銷</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div class="container-fluid">
    <div class="col-md-2">
        <div class="list-group">
            <a href="#" class="list-group-item active">
                圖書詳情列表
            </a>
            <a href="#" class="list-group-item">做者列表</a>
            <a href="#" class="list-group-item">出版社列表</a>
            <a href="#" class="list-group-item">更多操做</a>
        </div>
    </div>
    <div class="col-md-10">
        <div class="panel panel-primary">
            <div class="panel-heading clearfix">
                <h3 class="panel-title">圖書管理系統 <i class="fa fa-leanpub pull-right" aria-hidden="true"></i></h3>
            </div>
            <div class="panel-body">
                <a href="#" class="btn btn-success">新增</a>
                <form class="form-inline pull-right">
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control" id="exampleInputAmount" placeholder="關鍵字">
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">搜索</button>
                </form>
                <table class="table table-striped table-hover" style="margin-top: 10px">
                    <thead>
                    <tr>
                        <th>序號</th>
                        <th>書名</th>
                        <th>價格</th>
                        <th>做者</th>
                        <th>出版社</th>
                        <th class="text-center">操做</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>python從入門到放棄</td>
                        <td>999.99</td>
                        <td>Mr沈</td>
                        <td>中國人民出版社</td>
                        <td class="text-center">
                            <a href="" class="btn btn-primary btn-xs">編輯</a>
                            <a href="" class="btn btn-danger btn-xs">刪除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>西遊記</td>
                        <td>666.66</td>
                        <td>吳承恩</td>
                        <td>古代出版社</td>
                        <td class="text-center">
                            <a href="" class="btn btn-primary btn-xs">編輯</a>
                            <a href="" class="btn btn-danger btn-xs">刪除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>前端從入門到入墳</td>
                        <td>999.99</td>
                        <td>Mr沈</td>
                        <td>教育出版社</td>
                        <td class="text-center">
                            <a href="" class="btn btn-primary btn-xs">編輯</a>
                            <a href="" class="btn btn-danger btn-xs">刪除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <nav aria-label="Page navigation" class="pull-right">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><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="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>


    </div>
</div>

</body>
</html>