Java Web(九)：BootStrap

一、BootStrap概述

1、简介

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。

2、使用bootstrap的好处

• 定义了很多的css样式和js插件，直接可以使用这些样式和插件得到丰富的页面效果。
• 响应式布局（同一套页面可以兼容不同分辨率的设备）。

二、下载安装

1、下载

• bootstrap下载地址：https://github.com/twbs/bootstrap

2、安装

• 将下载的压缩包解压；
• 拷贝解压后的文件夹中内容到项目的webapp文件夹的bootstrap中。

三、响应式布局

1、概念

• 同一套页面可以兼容不同分辨率的设备。

2、实现原理

• 依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子

3、实现步骤

• 定义容器：相当于之前的table，使用container（两边留白）或container-fluid（每一种设备都是100%宽度）。
• 定义行：相当于之前的tr，使用row。
• 定义元素：指定该元素在不同的设备上，所占的格子数目；使用样式为：col-设备代号-格子数目，如：col-md-1

4、注意事项

• 一行中如果格子数目超过12，则超出部分自动换行。
• 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
• 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

四、CSS样式

1、按钮

<button class="btn btn-default" type="submit">Button</button>

2、图片

<img src="../images/guonei_1.jpg" class="img-responsive" alt="Responsive image">

img-responsive ：可以让图片支持响应式布局。 

3、表格

<table class="table table-striped table-bordered table-hover">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>001</td>
        <td>张三</td>
        <td>23</td>
    </tr>
</table>

table：为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。

table-striped：可以给 <tbody> 之内的每一行增加斑马条纹样式。

table-bordered：为表格和其中的每个单元格增加边框。

table-hover：可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

4、表单

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

注：详见bootstrap中文网：Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网