bootstrap前端框架笔记

本人技拙，还望不吝赐教。

bookstrap笔记      1.BookStrap是轻量级的CSS基础代码。大部分前端人员都具归零的思想 2.各浏览器的初始标准都不一样，因此要做到兼容就要初始浏览器的CSS样式，目前比较实用的全局初始有两中： Eric Meyer Reset CSS 和 YUI reset css3.Rel是relationship的英文缩写，它描述了当前页面与href所指定文档的关系；stylesheet就是样式表的意思；CSS是 Cascading Style Sheet（级联样式表）的缩写4.font-weight 设置成normal变成了常规效果（不加粗）  可以设置*** 为副标题5.如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。6.标签总结：强调相关的类在Bootstrap中除了使用标签、等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：.text-muted：提示，使用浅灰色（#999）.text-primary：主要，使用蓝色（#428bca）.text-success：成功，使用浅绿色(#3c763d).text-info：通知信息，使用浅蓝色（#31708f）.text-warning：警告，使用黄色（#8a6d3b）.text-danger：危险，使用褐色（#a94442）.text-muted {color: #999;}.text-primary {color: #428bca;}a.text-primary:hover {color: #3071a9;}.text-success {color: #3c763d;}a.text-success:hover {color: #2b542c;}.text-info {color: #31708f;}a.text-info:hover {color: #245269;}.text-warning {color: #8a6d3b;}a.text-warning:hover {color: #66512c;}.text-danger {color: #a94442;}a.text-danger:hover {color: #843534;}文本对齐风格在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：  左对齐，取值left  居中对齐，取值center  右对齐，取值right  两端对齐，取值justify为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：  .text-left：左对齐  .text-center：居中对齐  .text-right：右对齐  .text-justify：两端对齐.text-left {text-align: left;}.text-right {text-align: right;}.text-center {text-align: center;}.text-justify {text-align: justify;}列表--简介在HTML文档中，列表结构主要有三种：有序列表、无序列表和定义列表。具体使用的标签说明如下：无序列表

…

有序列表

…

定义列表

…

…

Bootstrap根据平时的使用情形提供了六种形式的列表：    普通列表    有序列表    去点列表    内联列表    描述列表    水平描述列表列表--无序列表、有序列表无序列表无序列表和有序列表使用方式和我们平时使用的一样（无序列表使用ul，有序列表使用ol标签），在样式方面，Bootstrap只是在此基础上做了一些细微的优化，源码请查看bootstrap.css文件的第569行~第579行：ul,ol {  margin-top: 0;  margin-bottom: 10px;}ul ul,ol ul,ul ol,ol ol {  margin-bottom: 0;}从源码上我们可以得知，Bootstrap对于列表，只是在margin上做了一些调整。我们来看一个简单的示例(右侧代码编辑器10-16行)。列表嵌套在Bootstrap中列表也是可以嵌套的，如右侧编辑器中的代码就是有序列表（25-35行）。列表--内联列表Bootstrap像去点列表一样，通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。列表--定义列表对于定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。dl {margin-top: 0;margin-bottom: 20px;}dt,dd {line-height: 1.42857143;}dt {font-weight: bold;}dd {margin-left: 0;}代码（一）本节内容相对来说比较简单，一般在个人博客上使用的较为频繁，用于显示代码的风格。在Bootstrap主要提供了三种代码风格：1、使用来显示单行内联代码2、使用

来显示多行块代码3、使用来显示用户输入代码预编译版本的Bootstrap将代码的样式单独提取出来：1、LESS版本，请查阅code.less文件2、Sass版本，请查阅_code.scss文件编译出来的CSS代码请查阅bootstrap.css文件第688行~第730行，由于代码太长，此处不一一列举。在使用代码时，用户可以根据具体的需求来使用不同的类型：1、：一般是针对于单个单词或单个句子的代码2、

：一般是针对于多行代码（也就是成块的代码）3、:一般是表示用户要通过键盘输入的内容虽然不同的类型风格不一样，但其使用方法是类似的。code风格：

Bootstrap的代码风格有三种：

不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代。而且对于

代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格。建议在编写HTML标签时，就控制好，例如查看右侧代码编辑器上的15-19行。表格表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格，在接下来的内容中，我们会详细介绍Bootstrap的表格使用。表格表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格，在接下来的内容中，我们会详细介绍Bootstrap的表格使用。同样的，如果你对CSS预处理器熟悉，你可以使用Bootstrap提供的预处理版本：    LESS版本，对应的文件是 tables.less    Sass版本，对应的文件是 _tables.scss如果你不懂LESS或Sass也不妨，你在bootstrap.css文件中第1402行~第1630行中可以查阅到所有有关于table的样式代码。由于代码太长，此处不一一列举。刚已经说了，Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：    .table：基础表格    .table-striped：斑马线表格    .table-bordered：带边框的表格    .table-hover：鼠标悬停高亮的表格    .table-condensed：紧凑型表格    .table-responsive：响应式表格水平表单Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格（标签居左，表单控件居右）见下图。在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：1、在

元素是使用类名“form-horizontal”。2、配合Bootstrap框架的网格系统。（网格布局会在以后的章节中详细讲解）在元素上使用类名“form-horizontal”主要有以下几个作用：1、设置表单控件padding和margin值。2、改变“form-group”的表现形式，类似于网格系统的“row”。内联表单有时候我们需要将表单的控件都在一行内显示，类似这样的：在Bootstrap框架中实现这样的表单效果是轻而易举的，你只需要在元素中添加类名“form-inline”即可。内联表单实现原理非常简单，欲将表单控件在一行显示，就需要将表单控件设置成内联块元素（display:inline-block）。/*源码请查阅bootstrap.css文件第1928行~第1962行*/如果你要在input前面添加一个label标签时，会导致input换行显示。如果你必须添加这样的一个label标签，并且不想让input换行，你需要将label标签也放在容器“form-group”中，如：

邮箱

密码

记住密码

进入邮箱

库引用地址:  bootstrap框架: //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css  jquery库: http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js  bootstrap.min.js：http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js  栅格系统  bootstrap中的组件和css样式bootstrap插件javascript