前端框架Bootstrap

# Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式布局、移動設備優先的 WEB 項目。

該框架已經幫你寫好了很多頁面樣式，你如果需要使用，只需要下載它對應文件，之后直接cv拷貝即可

在使用Bootstrap的時候所有的頁面樣式都只需要你通過class來調節即可

版本選擇建議使用v3版本：https://v3.bootcss.com

注意

bootstrap的js代碼是依賴於jQuery的，也就意味着你在使用Bootstrap動態效果的時候，一定要先導入jQuery

布局容器

<div class="container">
    左右兩側有留白
</div>

<div class="container-fluid">
    左右兩側沒有留白
</div>
# 后續在使用bootstrap做頁面的時候 上來先寫一個div class=container,之后在div內部書寫頁面

柵格系統

<div class="row"></div>
寫一個row就是將所在的區域划分成12份

<div class="col-md-6 ">  獲取你所要的份數
# 在使用bootstrap的時候 腦子里面一定要做12的加減法

柵格參數

.col-xs-	.col-sm-	.col-md-	.col-lg-
# 針對不同的顯示器 bootstrap會自動選擇對應的參數
# 如果你想要兼容所有的顯示器 你就全部加上即可


# 在一行如何移動位置
<div class="col-md-8 c1 col-md-offset-2"></div>

排版

bootstrap將所有原生的HTML標簽的文本字體統一設置成了肉眼可以接受的樣式

效果一樣，但是標簽表達的意思不一樣（語義）

表格

<table class="table table-hover table-striped table-bordered">
		
<tr class="success">
    <td>1</td>
    <td>jason</td>
    <td>123</td>
    <td>study</td>
</tr>

<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

表單

<div class="container">
    <div class="col-md-8 col-md-offset-2">
        <h2 class="text-center">登陸頁面</h2>
        <form action="">
            <p>username:<input type="text" class="form-control"></p>
            <p>password:<input type="text" class="form-control"></p>
            <p>
                <select name="" id="" class="form-control">
                    <option value="">111</option>
                    <option value="">222</option>
                    <option value="">333</option>
                </select>
            </p>
            <textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
            <input type="submit">
        </form>
    </div>
</div>

# 針對表單標簽 加樣式就用form-control
	class="form-control"
"""
<input type="checkbox">222
<input type="radio">333
checkbox和radio我們一般不會給它加form-control，直接使用原生的即可
"""

# 針對報錯信息 可以加has-error（input的父標簽加）
<p class="has-error">
    username:
    <input type="text" class="form-control">
</p>

按鈕

<a href="https://www.mzitu.com/" class="btn btn-primary">點我</a>
<button class="btn btn-danger">按我</button>
<button class="btn btn-default">按我</button>
<button class="btn btn-success">按我</button>
<button class="btn btn-info">按我</button>
<button class="btn btn-warning">按我</button>


<button class="btn btn-warning btn-lg">按我</button>
<button class="btn btn-warning btn-sm">按我</button>
<button class="btn btn-warning btn-xs">按我</button>
<input type="submit" class="btn btn-primary btn-block">  
通過給按鈕添加 .btn-block 類可以將其拉伸至父元素100%的寬度，而且按鈕也變為了塊級（block）元素。

圖表

<h2 class="text-center">登陸頁面 <span class="glyphicon glyphicon-user"></span></h2>


    <style>
        span {
            color: greenyellow;
        }
    </style>

# 擴展

導航條

<nav class="navbar navbar-inverse">
<nav class="navbar navbar-default">

分頁器

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

彈框

https://lipis.github.io/bootstrap-sweetalert/
  
  
swal('你還好嗎?')
undefined
swal('你還好嗎?')
undefined
swal('你還好嗎?','我不好，想你了!')
undefined
swal('你還好嗎?','我不好，想你了!','success')
undefined
swal('你還好嗎?','我不好，想你了!','warning')
undefined
swal('你還好嗎?','我不好，想你了!','error')
undefined
swal('你還好嗎?','我不好，想你了!','info')
undefined
# 我們在后面的課程中 還會涉及到該部分內容