Bootstrap前端框架的使用

前端框架Bootstrap

该框架已经帮你写好了很多页面样式，你如果需要使用，只需要下载它对应文件，之后直接cv拷贝即可

在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可

版本选择建议使用v3版本：https://v3.bootcss.com/

注意

bootstrap的js代码是依赖于jQuery的，也就意味着你在使用Bootstrap动态效果的时候，一定要导入jQuery，第一次使用一定要下载本地版文件 否则会没有提示

布局容器

<div class="container"> 左右两侧有留白</div>

<div class="container-fluid">左右两侧没有留白</div>

#后续在使用Boostrap做页面的时候，上来先写一个div class=container,之后再div内部书写页面

栅格系统

<div class="row"></div>
写一个row就是将所有的区域划分成份

<div class="col-md-6">获取你所要的份数

在使用Bootstrap的时候  脑子里面一定要做12的加减法
不同的屏幕有不同的分配方法:
.col-xs-  .col-sm-  .col-md- .col-lg-
针对不同的显示器 bootstrap 会自动选择对应的参数  
如果想要兼容所有屏幕,布局不变,自动响应,把四个都加上
<div class="clearfix"></div> //消除浮动

列偏移 offset-*

排版

bootstrap 默认将所有原生的HTML标签的文本字体,统一设置成了肉眼可以接受的样式

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

表格

.table 表格
.table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。
.table-bordered 类为表格和其中的每个单元格增加边框。
.table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

.active    鼠标悬停在行或单元格上时所设置的颜色
.success    标识成功或积极的动作
.info    标识普通的提示信息或动作
.warning    标识警告或需要用户注意
.danger    标识危险或潜在的带来负面影响的动作


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

 

表单

.form-control 添加到input框 (checked radio加了不好看)
.has-error    错误提示 input所在的父标签
.has-success  正确提示 input所在的父标签

.form-inline  水平显示
.form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局

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

 

按钮

# 按钮颜色
btn btn-default 默认样式
btn btn-primary 首选项
btn btn-success 成功
btn btn-info 一般信息
btn btn-warning 警告
btn btn-danger 危险
btn btn-link 链接
# 按钮大小
.btn-lg、.btn-sm 或 .btn-xs
# 按钮块状 
.btn-block 拉伸至父元素100%的宽度
# 禁用按钮
disabled="disabled

<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）元素。

图表

http://www.fontawesome.com.cn/
pull-left  居右
pull-right 居右

<h2 class="text-center">登陆页面 <span class="glyphicon glyphicon-user"></span></h2>


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

# 扩展

导航条

.navbar-default 默认白色
.navbar-inverse 类可以改变导航条的外观。
.navbar-fixed-bottom 类可以让导航条固定在底部

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

分页器

.active 激活状态
.disabled 禁用状态
<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>


<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/
状态:success warning error info
swal(内容)

swal('你还好吗?')
undefined
swal('你还好吗?')
undefined
swal('你还好吗?','我不好，想你了!')
undefined
swal('你还好吗?','我不好，想你了!','success')
undefined
swal('你还好吗?','我不好，想你了!','warning')
undefined
swal('你还好吗?','我不好，想你了!','error')
undefined
swal('你还好吗?','我不好，想你了!','info')
undefined
# 我们在后面的课程中 还会涉及到该部分内容

进度条

.active 活动状态

列表

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

面板

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>