育才学习网1.bootstrap这种框架应该怎么使用
下面我在这里简单的介绍下Bootstrap框架。
Bootstrap框架属于UI框架，这个和jQuery不太一样，其实准确的描述Bootstrap框架属于css框架而非javascript框架，但是它本身也使用javascript来完善Bootstrap框架的视觉效果。此外，Bootstrap框架十分超前，在支持html5和css3的浏览器上表现特别好，而且对移动终端的浏览器支持也是相当优秀。
一个完整的Bootstrap框架包含如下四个部分：
脚手架（不知道官网为啥这么翻译）：用于重置背景、链接样式、栅格系统等，并包含两个简单的布局结构。Bootstrap的样式使用了lesscss技术，比如重置背景这样的操作，这些比较简单我就不展开叙述了，脚手架里最出彩的是栅格系统和布局。栅格系统是将页面宽度分成12列，栅格系统分为两种类型，一种是默认栅格系统，这时候栅格系统是按940px像素进行等分，我们可以使用span1,span4这样的class属性操作默认栅格布局，另一种是流式栅格系统，这个时候分列的宽度就不是固定，而是根据你可视页面进行12等分，同样可以使用span1,span4操作流式栅格。这个系统非常之好，做css最难的就是div布局，使用栅格系统可以大大简化div的布局操作。另外一个就是做布局操作了，布局也分为固定和流式，让不太精通css布局也能轻松操作布局。
基本的css样式。Bootstrap给出了一样常用的HTML元素的样式，例如：按钮、表单和文字等等。大部分做网站的人都不是美工出身，做出赏心悦目的网页是件很困难的事情，css提供的样式很专业很精美，能让我们轻松开发出一套精美的网站
Css组件：Bootstrap还提供一些常用的css组件，同样很优秀很棒。
Javascript插件：Bootstrap是个开放的系统，我们可以随意扩展Bootstrap，特别是javascript的框架，这样Bootstrap就会更加专业。
Bootstrap是个操作性质的框架，没必要做深入分析，最关键是有没有好的使用实例，我下载Bootstrap发现，下载包里的example不是太强大，例子都在它的官网上，很多对css和javascript不是特别熟悉的人使用起来都不太习惯，因此我将这些例子进行了整合，作为单独的例子工程，这个工程非常全面，我在网上找过，目前还没有比我整理的更详尽的例子，大伙下载下来按照我的工程目录结构就可以进行开发了。
2.如何使用bootstrap框架 bootstrap入门必看
为什么使用这个框架呢？
1、浏览器支持，所有的主流浏览器支持，包括：IE、firefox、opera、chrome、Safari等。
2、容易上手，掌握html+css基础即可。
3、具有设备响应式兼容。bootstrap的响应式css能够自适应于台式机、平板电报和手机。
4、包含很多功能强大内置组件，易于定制。
5、开源。
在其官网下载，包括三种形式，我们选择用于生产环境的bootstrap，这样就无须先学习sass或者less的编译，可以着重于学习bootstrap的应用。下载文件为zip格式，解压后包括三个文件夹。css即bootstrap的样式文件，js文件夹即其js文件，fonts为其字体文件夹。
我们暂且只用到css和js，点开css文件夹和js文件夹，出现如下图。css文件夹中，其中，.css文件是编译好的css文件，同我们平常使用的没有区别，.min.css是压缩后的css文件，可以使用这个文件节省大小，.map是映射less文件和css文件对应位置，暂且忽略，复制.min.css文件到自己项目的css文件夹中，同理，复制js中的.min.js文件到自己项目的js文件夹中。
下图为其基本模板。由于bootstrap是用jquery编写，所以需要jquery支持，我们使用的是在线jquery库。在浏览器查看效果。h1第一级标题使用的样式是bootstrap的样式，而非h1原本的样式。
在head的最开头（必须为最开始，可以在编码之后）加上
<meta name="viewport" content="width=device-width, initial-scale=1">
此为移动端开发经常用的，可以养成好习惯每个网页都添加，可确保适当的触屏缩放和显示比例。
表示：当前的viewport的宽度为设备宽度，当然你也可以设置为具体数值，初始显示为原始比例显示。content共有六个属性：width、height（不常使用）、initial-scale、maximum-scale、minimum-scale、user-scalable
布局容器的使用。
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器，包括两个：.container 类用于固定宽度并支持响应式布局的容器；
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
如下图是一个实例。container中包含的为bootstrap显示的样式。
其支持响应式布局，将浏览器窗口拉宽和拉窄效果不同。
8
在bootstrap官网上有较多实例和组件，可以根据个人需要定制化使用，创作属于自己风格的页面。
3.bootstrap框架怎么使用
全局样式1Bootstrap 中用到一些 HTML元素和CSS属性需要将页面设置为 HTML5 文档类型，即在页面顶部添加“<！DOCTYPE html>”2布局容器：Bootstrap 需要为页面内容和栅格系统包裹一个 .container或container-fluid（占据全部视口viewport的容器）容器。
3栅格系统，Bootstrap 提供了一套最多12列的流式栅格系统，通过 .row表示行 和 .col-xs-4 这种表示宽度的列快速创建栅格布局。4Bootstrap 排版、链接样式设置了基本的全局样式。
font-size 设置为 14px,line-height 设置为 1.428。 （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
基础样式【排版】，1. 标题，可以用来.h1 到 .h6 类给内联属性的文本赋予标题样式，标题内通过 标签或带.small 类的元素标记副标题。主体文本：.lead 类让段落突出显示。
2. 内联文本，使用 标签表示标注文本，删除，无用，插入，下划线，小号（父容器字体大小的 85%）,着重，斜体。3. 文本对齐类，text-left,text-center,text-right,text-justify,text-nowrap4. 文本大小写类，text-lowercase,text-uppercase,text-capitalize5. 缩略语类，为 元素设置 title属性并使用.initialism 类让 font-size 变得稍微小些。
例：attr6. 地址，以日常使用的格式呈现，在行结尾加 保留需要的样式即可。7. 引用，将 HTML 元素包裹在
中即可表现为引用样式。对于直接引用，建议用 标签。8. 列表，list-unstyled类移除默认 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。
list-inline类通过设置 display: inline-block； 并添加少量的内补（padding），将所有元素放置于同一行。dl-horizontal类让
内的短语及其描述排在一行。
【代码】
标签包裹内联样式的代码片段， 标签标记用户通过键盘输入的内容， 展示代码块 。可用pre-scrollable 类设置最高350px带垂直滚动条。标签标记变量， 标签标记程序输出的内容。【表格】.table 类指定基本样式，.table-striped 条纹样式，.table-bordered 类为边框样式，.table-hover 类带鼠标悬停样式，.table-condensed 类紧凑样式。
状态类（行或单元格设置颜色）：active,success,info,warning,info。将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其响应式表格： 会在小屏幕设备上（小于768px）水平滚动。
当屏幕大于 768px 宽度时，水平滚动条消失。【表单】1. 基本实例，所有设置了 .form-control 类的 、