bootstrap学习笔记

什么是 bootstrap？

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。（跨平台能力优秀）
学习bootstrap的关键的查看其API文档

bootstrap 包的内容

基本结构： Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
CSS： Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件： Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件 部分详细讲解。
JavaScript 插件： Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
定制： 您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

bootstrap的安装

CSS

这里.map是映射文件，不需要。.min是压缩后的文件（可读性差）建议在生成环境中使用。除了这两个以外都是未压缩的文件（可读性好）可以在学习环节使用。

js

Bootstrap的js是依赖jQuery的所以切记一定要导入jQuery。（npm.js）不用

在项目中导入js文件时一定要先导入jQuery再导入Bootstrap，顺序不能颠倒！

fonts
全部导入即可

boostrap使用的注意点

1、必须先引入bootstrap的支持,包括js、css、fonts文件
2、引入的文件必须先有jQuery的核心文件，再引入bootstrap的js文件,再引入自己的文件
3、CSS文件必须先引入bootstrap的CSS文件再引入自己的文件
4、font文件无需在页面上引入,但是需要在项目的目录中存在

boostrapCSS具体使用（只演示部分其余的看文档）

按钮

既定样式表

使用：

给标签定义一个class即可，class的值需要与对应样式的类名匹配。

注意除了基本样式.btn外的所以样式都以它为基础，所以应当采用多类名来引用其它样式：

表格

既定样式表

使用：
这里table类名会作为基础样式

它提供了一种响应式表格，可以在显式区域大小变化时改变样式：
通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。

图片

既定样式表

使用：

自定义boostrapCSS

只需在自己的CSS文件中 （内部样式和外部样式都行，注意外部样式的引用语句写在boostrap引用语句的后面） 写要改变的样式即可，注意类名的匹配。

网格（栅格）系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

这个系统是用来进行页面布局的。

Bootstrap 网格系统（Grid System）的工作原理

行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。

内容应该放置在列内，且唯有列可以是行的直接子元素。

预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。

列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。

网格系统是通过指定您想要横跨的十二个可用的列来创建的。
例如，要创建三个相等的列，则使用三个 .col-xs-4。

基本的网格结构

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

注意：如果采用了container样式那么其宽度不一定是充满整个可视区域的

上半部分是采用了container样式的，下半部分是没有采用container样式的。

表单

表单布局

垂直表单（默认）
内联表单
水平表单

垂直或基本表单

向父 <form> 元素添加 role=“form”。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。

内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。

水平表单

向父 <form> 元素添加 class .form-horizontal。
把标签和控件放在一个带有 class .form-group 的 <div> 中。
向标签添加 class .control-label。

可以使用网格系统来影响表单的布局

辅助类

更进一步的美化效果

boostrap布局组件具体使用（只演示部分其余的看文档）

导航栏

创建一个默认的导航栏的步骤如下：
向 <nav> 标签添加 class .navbar、.navbar-default。
向上面的元素添加 role=“navigation”，有助于增加可访问性。
向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

警告框

您可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框，请使用 警告（Alerts） jQuery 插件。

您可以通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。

进度条

Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 不支持动画。

创建一个基本的进度条的步骤如下：
添加一个带有 class .progress 的 <div>。
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
添加一个带有百分比表示的宽度的 style 属性，例如 style=“60%”; 表示进度条在 60% 的位置。

分页

字体图标

如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。

boostrap插件具体使用（只演示部分其余的看文档）

轮播

可以通过自定义函数来修改轮播时间间隔：

模态对话框

一种在当前页面展示的子对话框，可以在其中添加表单等内容。