2018.6.19 JAVA大实习要做校园导游咨询系统，之前对于前端知之甚少，学习了bootstrap框架，现用于巩固与交流学习
相关链接：Bootstrap中文网 BootCDN官网
| 栅格系统 | col-lg-3(占3/12) | col-sm-3(占3/12) | col-xs-3(占3/12) |
| 表单 | form-group | form-control | |
| 按钮 | btn | btn-default | btn-info |
| 按钮组 | btn-toolbar | ||
| 导航 | nav | nav-tabs | nav-pills |
| 导航栏 | nav-bar | ||
| 面板 | panel | ||
| 表格 | table | ||
| 其他组件 | label | list-group |
1.栅格系统
col-lg-数字（lg代表large,sm代表小，xs代表最小）
数字总占12份，分成多少块取绝于自己，例如下面这个2-7-3的类型：
代码：
可以看出是仅仅使用了这一个类就可以达到很好地组织页面的效果。
2.表单
通常表单都有一个<form></form>标签所包含，用于写登录注册等表单提交项
BootStrap提供了很完善的表单美化组件，最关键的类有两个：form-group、form-control:
使用例子：
代码部分：
alert可用于表示一些提示信息，之后的alert-success呈现绿色，warning呈现黄色，error呈现红色，之后的编辑框也有展现
表单之中包含好几项，每一项由一个form-group包含，即用户名及其输入框，密码及其输入框,之后的has-success呈现绿色等提示信息。
利用form-inline类包含form-group组件可以将很多行组件放在一行显示
～延伸－选择大区、国家等也可以用这个form-control样式：
代码：
是不是觉得灰常好看呢！！！！！
～用于小小调整的input之前的Logo显示
例如金额输入¥logo显示：
涨逼格神器！
可以将input变大！仅仅一句在类里添加input-lg
当然也可以变小：input-sm
3.按钮
按钮类
主要是按钮的样式及其颜色，下面分别展示了各种样式及其对应代码
<button class="btn btn-default">默认</button> <button class="btn btn-primary">一般</button> <button class="btn btn-warning">警告</button> <button class="btn btn-danger">错误</button> <button class="btn btn-info">信息</button>
～按钮大小类
<button class="btn btn-primary btn-xs">最小</button> <button class="btn btn-primary btn-sm">小</button> <button class="btn btn-primary">默认</button> <button class="btn btn-primary btn-lg">大</button>
~占母元素整宽类：btn-block
~按钮不可点： disabled属性：disabled
<button disabled="disabled" class="btn btn-default">戳我</button>
4.按钮组
多个按钮联合使用时使用：btn-toolbar
<div class="btn-toolbar">
<div class="btn-group btn-group-lg">
<button class="btn btn-default"type="button" name="button">戳我</button>
<button class="btn btn-default"type="button" name="button">戳我</button>
<button class="btn btn-default"type="button" name="button">戳我</button>
</div>
<div class="btn-group btn-group-sm">
<button class="btn btn-default"type="button" name="button">戳我</button>
<button class="btn btn-default"type="button" name="button">戳我</button>
<button class="btn btn-default"type="button" name="button">戳我</button>
</div>
<div class="btn-group btn-group-xs">
<button class="btn btn-default"type="button" name="button">戳我</button>
<button class="btn btn-default"type="button" name="button">戳我</button>
<button class="btn btn-default"type="button" name="button">戳我</button>
</div>
<div class="btn-group-vertical">//垂直！！！！！！！！！
<button class="btn btn-default"type="button" name="button">戳我</button>
<button class="btn btn-default"type="button" name="button">戳我</button>
<button class="btn btn-default"type="button" name="button">戳我</button>
</div>
</div>
5.导航
两种导航栏格式：
1.nav.nav-tabs(知乎在用哦) 注意这里是在ul里加类，即这是整个导航栏作用样式，并不是单独的导航选项！
2.nav.nav-pills(类似按钮的导航栏)
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
<p>
<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
</p>
3.导航栏的堆叠显示
就是在类中加nav-stacked类表示堆叠显示
<ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">登录</a></li> <li><a href="#">注册</a></li> <li><a href="#">忘记密码</a></li> </ul>
6.导航栏
导航栏用于全局导航，其中包含1⃣️导航栏头部navbar-header,之中可以包含Logo，防在navbar-brand中
包含导航列表nav.navbar-nav
包含导航栏内表单navbar-form
可以添加导航内浮动：navbar-left、navbar-right
～效果：
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header"> 头部！
<div class="navbar-brand">Logo</div> Logo!
</div>
<ul class="nav navbar-nav"> ul导航栏！
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<form class="navbar-form navbar-left"> navbar表单
<div class="form-group">
<input type="text" class="form-control">
</div>
<button class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right"> navbar-浮动
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
7.面板
1.panel类＋panel-default／panel-warning/panel-info
2.panel-heading头部分（可包含panel-title直接标注标题）
3.panel-body
4.panel-footer(防止喧宾夺主，可以给文字添加text-muted使其变淡)
例子：
代码：
<div class="panel panel-warning">
<div class="panel-heading">
<div class="panel-title">
用户统计
<div class="small text-muted">
每日用户情况统计
</div>
</div>
</div>
<div class="panel-body">
昨日共有188888人参观本网站
</div>
<div class="panel-footer">
<div class="small text-muted">
参考人数：3000000
</div>
</div>
</div>
8.表格
最基础样式添加，直接在table中添加类table:
添加分格样式：table-striped
悬停高亮：table-hover
加边框：table-bordered
单行不同显示：对应行添加不同样式：danger\success\info
code：
<table class="table table-striped">
<thead>
<tr>
<th>用户名</th>
<th>邮箱</th>
<th>电话</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td>yaomenglong</td>
<td>[email protected]</td>
<td>110</td>
</tr>
<tr class="success">
<td>yansiming</td>
<td>[email protected]</td>
<td>119</td>
</tr>
<tr class="warning">
<td>yanglong</td>
<td>[email protected]</td>
<td>120</td>
</tr>
</tbody>
</table>
9.其他组件：
1.页码(pagination与pager)
普通类型：
代码：
<ul class="pagination">
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
</ul>
圆滑类型：
<ul class="pager">
<li><a href="#">上一页</a></li>
<li class="disabled"><a href="#">下一页</a></li>
</ul>
2.路径标签(breadcrumb)
代码：
<div class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">tool</a></li>
<li class="active">锤子</li>
<span class="badge">20k</span>
</div>
3.标签（label）
<label class="label label-info">思敏小可爱</label>
<label class="label label-success">思敏小可爱</label>
<label class="label label-warning">思敏小可爱</label>
4.图腾（badge）常用与阅读量或点赞数
<btton class="btn btn-info">赞<span class="badge">10</span></btton>
5.列表组件（list-group与list-group-item）
<div class="list-group">
<a href="#" class="list-group-item">1</a>
<a href="#" class="list-group-item">2</a>
<a href="#" class="list-group-item">3</a>
<a href="#" class="list-group-item">4</a>
</div>
以上就是BootStrap常用组件的效果与代码啦，当然还有部分细节没有列出来，但是应该足够交流学习以及自己复习啦
锵锵锵锵！第一篇博客诞生！！记录一下时间哈哈哈哈哈哈－－2018-6.19-18.04
一个新入门的前端小萌新～～