BootStrap常用组件及其使用效果

2018.6.19  JAVA大实习要做校园导游咨询系统，之前对于前端知之甚少，学习了bootstrap框架，现用于巩固与交流学习

相关链接：Bootstrap中文网 BootCDN官网

BootStrap主要组件及其类

栅格系统	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.栅格系统

总之就是bootstarp用于方便分块地管理网页，方便用户使用的组件，其中：

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>yao@qq.com</td>
        <td>110</td>
      </tr>
      <tr class="success">
        <td>yansiming</td>
        <td>yan@qq.com</td>
        <td>119</td>
      </tr>
      <tr class="warning">
        <td>yanglong</td>
        <td>ys@qq.com</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

一个新入门的前端小萌新～～