十二、Bootstrap中文文檔（其它插件分享）

時間 2019-11-30

標籤十二 bootstrap 中文文檔其它插件分享欄目 Bootstarp 简体版

原文原文鏈接

給你們介紹一個前端框架讓你今後寫起前端代碼與之先前相好比有神助般的效果拉就是Bootstrap.javascript

本片導航：css

1、Bootstrap的下載html

Bootstrap，由Twitter的設計師Mark Otto和Jacob Thornton合做開發，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。（當前版本： v3.3.7）前端

網址：http://v3.bootcss.com/java

一、過程分解jquery

1）點擊"下載Bootstrap"git

2）第一個"下載Bootstrap"github

3）下載到html須要使用框架的目錄bootstrap

4）解壓前端框架

2、css樣式的使用

一、引用

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

二、查詢須要樣式代碼

在"全局CSS樣式"和"組件"裏查找

1）全局CSS樣式：

2）組件

三、代碼舉例（部分示例有興趣的能夠詳細瞭解）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例1</title>
    <!--引用本地的-->
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <!--<link rel="stylesheet" href="my-style.css">-->
    <!--引用CDN-->
    <!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
    <style>
        .c1 {
            background-color: red;
        }
    </style>
</head>
<body>

<div class="container-fluid c1">
    <table class="table table-bordered table-striped table-hover">
        <thead>
        <tr>
            <th>#</th>
            <th> 姓名</th>
            <th>愛好</th>
        </tr>
        </thead>
        <tbody>
        <tr class="active">
            <td>1</td>
            <td>Egon</td>
            <td>槓娘</td>
        </tr>
        <tr class="success">
            <td>1</td>
            <td>Egon</td>
            <td>槓娘</td>
        </tr>
        <tr class="danger">
            <td>1</td>
            <td>Egon</td>
            <td>槓娘</td>
        </tr>
        <tr class="warning">
            <td>1</td>
            <td>Egon</td>
            <td>槓娘</td>
        </tr>
        <tr class="info">
            <td>1</td>
            <td>Egon</td>
            <td>槓娘</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

Bootstrap_示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>柵格示例</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style>
        .c1 {
            background-color: red;
            height: 30px;
        }
    </style>
</head>
<body>
<!--放容器-->
<div class="container-fluid">
    <!--f行-->
    <div class="row">
        <!--列-->
        <div class="col-md-1 c1"></div>
    </div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
</div>
</body>
</html>

Bootstrap_柵格示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標題示例</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <h1>一級標題</h1>
    <h2>二級標題</h2>
    <h3>三級標題</h3>
    <h4>四級標題</h4>
    <h5>五級標題</h5>
    <h6>六級標題</h6>
    <hr>
    <div class="h1">1級標題 36px <small>我是小字兒</small></div>
    <div class="h2">2級標題 30px</div>
    <div class="h3">3級標題 24px</div>
    <div class="h4">4級標題 18px</div>
    <div class="h5">5級標題 14px</div>
    <div class="h6">6級標題 12px</div>

    <p>啊，大海啊，大海啊，大海啊，大海啊，大海啊，大海啊，大海啊，大海</p>
    <p class="lead">全是水
        <mark>全是水</mark>全是水全是水全是水
        <del>全是水全是水全是水全是水</del></p>
</div>
</body>
</html>

Bootstrap_標題,文字示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本對齊</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <p class="text-left">左對齊.</p>
    <p class="text-center">居中.</p>
    <p class="text-right">右對齊.</p>

    <p class="text-justify">兩端對齊.</p>
    <p class="text-justify">a dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia a dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia d                    a         h  ai d ou    s       hi shuia                                  dahai doushi shuia dahai doushi shuia dahai doushi shuidahai doushi shuia dahai doushi shui </p>
    <p class="text-nowrap">a dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia a dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia d                    a         h  ai d ou    s       hi shuia                                  dahai doushi shuia dahai doushi shuia dahai doushi shuidahai doushi shuia dahai doushi shui </p>

    <p class="text-nowrap">沒有換行.</p>
</div>
</body>
</html>

Bootstrap_文本對齊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <ul class="list-unstyled">
        <li>GDP</li>
        <li>翔哥</li>
        <li>強哥</li>
    </ul>

    <!--內聯列表-->
    <ul class="list-inline">
        <li>Python學院</li>
        <li>Linux學院</li>
    </ul>

    <!--描述-->
    <dl>
        <dt>Egon</dt>
        <dd>被Python耽誤的相聲演員</dd>
    </dl>

    <!--代碼-->
    <!--<  > &nbsp-->
    <code>&lt;div&gt;</code>

    <!--代碼片斷-->
    <pre>&lt;p&gt;我是P標籤的內容&lt;/p&gt;</pre>
    <pre>print("Hello world")</pre>

    <!--程序輸出-->
    <samp>Hello world</samp>
</div>
</body>
</html>

Bootstrap_列表示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單示例</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>

<div class="container">

    <div class="row">
        <!--col-md-offset-2 偏移-->
        <!--pull-right  pull-left-->
        <div class="col-md-6 pull-right">
            <form>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
                <div class="form-group">
                    <label for="exampleInputFile">File input</label>
                    <input type="file" id="exampleInputFile">
                    <p class="help-block">Example block-level help text here.</p>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> Check me out
                    </label>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="">
            <form class="form-inline">
                <div class="form-group">
                    <label for="exampleInputName2">Name</label>
                    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail2">Email</label>
                    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
                </div>
                <button type="submit" class="btn btn-default">Send invitation</button>
            </form>
        </div>
    </div>

    <div class="row">
        <div>
            <form class="form-inline">
                <div class="form-group">
                    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
                    <div class="input-group">
                        <div class="input-group-addon">￥</div>
                        <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
                        <div class="input-group-addon">*</div>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Transfer cash</button>
            </form>
        </div>
    </div>

</div>
</body>
</html>

Bootstrap_表單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單示例</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>

<div class="container">

    <div class="row">
        <!--col-md-offset-2 偏移-->
        <!--pull-right  pull-left-->
        <div class="col-md-6 pull-right">
            <form>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
                <div class="form-group">
                    <label for="exampleInputFile">File input</label>
                    <input type="file" id="exampleInputFile">
                    <p class="help-block">Example block-level help text here.</p>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> Check me out
                    </label>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="">
            <form class="form-inline">
                <div class="form-group">
                    <label for="exampleInputName2">Name</label>
                    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail2">Email</label>
                    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
                </div>
                <button type="submit" class="btn btn-default">Send invitation</button>
            </form>
        </div>
    </div>

    <div class="row">
        <div>
            <form class="form-inline">
                <div class="form-group">
                    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
                    <div class="input-group">
                        <div class="input-group-addon">￥</div>
                        <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
                        <div class="input-group-addon">*</div>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Transfer cash</button>
            </form>
        </div>
    </div>

</div>
</body>
</html>

Bootstrap_下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>導航條示例</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>
<!--不用放到container-->
<!--nav標籤-->
<nav class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <!-- 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>

<div class="container" style="height: 1000px">
    ...
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap_導航條

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>巨幕示例</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>

<div class="container-fluid">
    <div class="jumbotron">
        <h1>Hello, world!</h1>
        <p>...</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>
</div>


<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</body>
</html>

Bootstrap_巨幕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>縮略圖</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="../../十月/day1%20國慶做業/img/Bootstrap_i1.png" alt="...">
            </a>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="../../十月/day1%20國慶做業/img/Bootstrap_i2.png" alt="...">
            </a>
        </div>

        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="../../十月/day1%20國慶做業/img/Bootstrap_i3.png" alt="...">
            </a>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="../../十月/day1%20國慶做業/img/Bootstrap_i4.png" alt="...">
            </a>
        </div>
    </div>
</div>

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap_縮略圖

四、模版的使用

1）起步

2）實例精選

3）選定模版，下載

先選擇模版而後打開右鍵另存爲

保存類型：網頁，所有

下載後就能夠用本身的環境中打開進行修改使用

3、JavaScript 效果的引用

若是在下載的Bootstrap的實例中使用到了javascript效果須要引用javascript的js

由於Bootstrap中的js效果都是由jquery寫的因此還要引用jquery

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

jquery須要下載，有興趣的能夠提早了解，在接下來的幾篇隨筆我會接着跟進jQuery的學習！

JavaScript 插件的使用

以模態框爲例注意後面須要modal.js這個文件在哪裏下載？

須要哪一部分的效果均可以打勾最後一塊兒下載

固然中間還有不少設置，有興趣的能夠本身研究。

4、其餘前端插件分享

一、圖標：

[Font Awesome]　　http://fontawesome.io/

二、懶加載：

[jQuery lazy load]　　https://github.com/tuupola/jquery_lazyload

三、提示框

[SweetAlert]　　https://github.com/t4t5/sweetalert

[SweetAlert2]　　https://github.com/limonte/sweetalert2

四、通知

[Toastr]　　http://codeseven.github.io/toastr/

相關標籤/搜索

每日一句

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