Bootstrap初学基础总结

Bootstrap

1>.Web UI 框架

可以帮助菜鸟程序员 ，迅速简便的搭建起专业级界面效果



2>如何快速掌握利用框架

1.框架的整合和搭建，让框架能够正常跑起来

2.通过复制粘贴文档中的代码，实验框架中的各个组件 记住关键组件的图像 （长什么样）

3>Bootstrap需要导入的文件

1.在head标签中，通过link导入bootstrap.css样式表（核心文件，必须导入）

2.如果使用bootstrap的交互功能和插件需要导入

A) jquery.js

B) bootstrap.js

 

 

4>Bootstrap
容器

.container   宽度是“固定”（不同浏览器窗口宽度对应不同的尺寸）居中

.container-fluid  100%  两侧有边距

如果没有特殊情况，所有内容都应该放在容器中

5>导航条  navbar  

1.两种配色

default（浅色系）  navbar navbar-default

inverse（深色系） navbar navbar-inverse

2.行为

A.默认（圆角，随页面滚动）

B.固定（直角，100%，可以固定在顶部或底部）navbar navbar-default navbar-fixed-top/bottom
  C.静态（直角，100%，随页面滚动）
navbar navbar-default navbar-static-top

3.手机模式

会将导航条上的人内容隐藏起来，同时在右侧出现一个按钮（汉堡图标）

通过按钮控制隐藏内容的显示

6>表格 table

1.形态

默认：只有表格行下横线，表头文字加粗

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

 边框：添加 .table-bordered 类为表格和其中的每个单元格增加边框，同时有竖线。

 紧凑：通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半

悬停：通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应

响应式表格（手机模式）：将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于
768px 宽度时，水平滚动条消失。

7>按钮 btn

颜色

<button type="button" class="btn
btn-default">（默认样式）白色Default  </button>

<button type="button" class="btn
btn-primary">（首选项）深蓝Primary   </button>

<button type="button" class="btn
btn-success">（成功）绿色Success       </button>

<button type="button" class="btn
btn-info">（一般信息）浅蓝Info        </button>

<button type="button" class="btn
btn-warning">（警告）橙色Warning    </button>

<button type="button" class="btn
btn-danger">（危险）红色Danger      </button>

<button type="button" class="btn
btn-link">（链接）白色Link             </button>

尺寸（主要是高度和文字大小）

大号：btn-lg

默认

小号：btn-sm

超小：btn-xs

形态

默认：鼠标指向会变色

按下：向下凹陷

禁用：不会变色，鼠标指针会变成禁止图片，颜色发白，为 <button> 元素添加 disabled 属性，使其表现出禁用状态。

手机默认

通过btn-block将按钮设置为宽度撑满容器100%

8>表单

结构

  <form>

     .form-group

          <label>

             .form-control

 

形态

  默认：上下结构，form-group及其内部的label与form-control都是上下排列

 水平表单：form-group仍然是上下排列，但其内部的label与form-control是左右排列的

  

行内表单：左右结构，from-group及其内部全部左右排列

 导航条内表单：专门在导航条中使用

Bootstrap的单选框和复选框

形态

垂直排列：

Div.checkbox

Label

Input[type=checkbox]

水平排列：

表单的3种状态 

1.焦点状态：我们将某些表单控件的默认 outline 样式移除，然后对 :focus 状态赋予 box-shadow 属性。

2.禁用状态：为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 not-allowed鼠标状态。

3.只读状态：为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。

 

表单控件的装饰

第一种：添加帮助文档

第二种：左侧addon

第三种：右侧加图标（通常用来做输入验证）

分页  pagination

方形，有上一页，下一页，还有页码

翻页   pager

圆角，没有页码！可以水平居中或两端对齐

面板   .pannel

.pannel-heading

.pannel-body

圆角矩形区域，可以带标题栏，也可以不带

图标

Bootstrap自带图标，比较少

推荐使用font-awesome图标

（需要css和fonts这两个文件夹，同时在页面上导入font-awesome.css）

<i class =”glyphicon glyphicon-图标名”>

<i class =”fa fa-图标名”

嵌套使用

<a class=”btn btn-success”>

<i class=”fa fa-图标名”>按钮

</a>

<a class=”btn btn-success  fa fa-search”>按钮</a>

插件的使用规律

1.必须导入jquery.js和Bootstrap.js这个js脚本，否则
不能正常工作

2.插件可以通过html属性实现基本功能（如：打开、关闭，此时不需要写js代码）

3.如果想实现更多的控制，就需要写js

模态框

1.通过HTML属性控制模态框打开和关闭的重要属性

  A.打开按钮上的2个

data-toggle=”modal”

data-target=”样式类或样式id”指定要打开的模态框

B.关闭：

在模态框内部的任意按钮或标签上

data-dismiss=”modal” 会关闭当前所在的模态框

2.通过JavaScript调用，控制模态框的打开和关闭

使用$()找到模态框，然后调用modal()方法

传入文档中指明的参数即可

只需一行 JavaScript
代码，即可通过元素的 id myModal 调用模态框：

$('#myModal').modal('show')     //打开

$('#myModal').modal('hide')     //隐藏

3.模态框的基本样式

.modol

.modol-dialog

.modal-content

.modal-header

.modal-body

.modal-footer

下拉菜单

 

       结构

           .dropdown

              .btn     按钮

                  .caret  下拉按钮图标

                ul.dropdown-menu

基本不需要js控制

 

选项卡

  结构：

ul.nav.nav-tabs

li.active(激活)>a[href=#id][data-toggle=tab]

.tab-content

.tab-pane[id]

 

工具提示

   Tooltip/Popover弹出提示

因为性能原因默认没有激活，需要在页面底部加上相应方法调用初始化一下

Bootstrap布局特性-栅格系统

1.容器.container被栅格系统平分成12份（12列）

2.通过col-lg/md/sm/xs-1（1-12）表示标签所占的份数

3.如果col-*-x中的x之和超过12则超过的标签换行

注意：

lg:表示宽屏桌面显示尺寸 >=1200px

md：方屏显示器的宽度  >=992px

sm:平板                >=768px

xs：手机               <768px

如果浏览器尺寸比col-[*]-1大，则指定的列有效

如果浏览器尺寸比col-[*]-1小，则指定的列无效，变成100%

4、.container这个容器左右各有15px的padding

如果发现因为这15px的padding导致不能对齐

则在.container中添加.row来抵消15px

<div class="row"></div>

列的位置

可以通过  col-*-pull-1  往左边拉

可以通过  col-*-push-1
往右边推

只在列有效时起作用！

 

   列的再拆分--列嵌套

        在col-*-1中使用.row作为容器，可以再次拆分，使用.container不行！

更多源代码实例和样式详解课访问Bootstrap中文网，网址：http://www.bootcss.com/