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="" class="form-control">
<option value="">111</option>
<option value="">222</option>
<option value="">333</option>
</select>
</p>
<textarea name="" 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">«</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">«</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">»</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>