CSSbootstrap详解PPT

《CSSbootstrap详解PPT》由会员分享，可在线阅读，更多相关《CSSbootstrap详解PPT（62页珍藏版）》请在装配图网上搜索。

1、CSS层叠样式表苏永苏永QQ：958624863CSS层叠样式表层叠样式表 CSS的全称是Cascading Style Sheet，中文翻译为“层叠样式表”。实用CSS可以改变HTML的基本特性，从而控制传统网页上的元素，如精确的空白、段落缩进、文本的外观和链接的状态等等。这样，你就可以实现对网页元素的格式控制。CSS不仅允许你指定单个网页的外观，还可以被用来为网站提供一致的界面。CSS样式通常保存在外部的.css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。这样，创建的文档内容和文档的显示外观就有着明显的相互独立。当然，CSS样式也

2、可以以标签的形式写在网页文件的标签中，或是直接将CSS语句书写在某个元素标签的属性部分。当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，它们产生作用的优先级别优先级别为如下顺序：内联样式（在 HTML 元素内部）内部样式表（位于 标签内部）外部样式表（以CSS文件独立存在）CSS 语法由三部分构成：选择器、属性和值：selector property:value 选择器(selector)通常是你希望定义的HTML元素或标签，属性(property)是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并

3、由花括号包围，这样就组成了一个完整的样式声明（declaration）,例如：body color:blue 如果值为若干单词，则要给值加引号：p font-family:sans serif;如果要定义不止一个声明，则需要用分号将每个声明分开。最后一条规则是不需要加分号的，但是一般在每条声明的末尾都会加上分号，包括最后一条规则。这么做的好处是尽可能的减少出错的可能性。p text-align:center;color:red;在书写的时候可以每行只描述一个属性，以便使样式定义的可读性更强。p text-align:center;color:black;font-family:arial;选择

4、器的分组 可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明，用逗号将需要分组的选择器分开。h1,h2,h2,h3,h5,h6 color:green;在上面的例子中，对所有的标题标签进行了分组。所有的标题元素都是绿色的。选择器的类型选择器的类型1 1 后代选择器后代选择器 通过依据元素在其位置的上下文关系来定义样式，在通过依据元素在其位置的上下文关系来定义样式，在 CSSCSS中，通过中，通过这种方式来应用规则的选择器被称为派生选择器这种方式来应用规则的选择器被称为派生选择器 。这样可以利用元素。这样可以利用元素的上下文关系来应用或者避免某项规则。的上下文关系来应用或者避免某项规

5、则。li b li b font-style:italic;font-style:italic;font-weight:normal;font-weight:normal;2 2 子选择器子选择器 与后代选择器相比，子元素选择器（与后代选择器相比，子元素选择器（Child selectorsChild selectors）只能选择作为某元素子）只能选择作为某元素子元素的元素。元素的元素。如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器元素，请使用子元素选择器。h1 strong co

6、lor:red;h1 strong color:red;这个规则会把第一个这个规则会把第一个 h1 h1 下面的两个下面的两个 strong strong 元素变为红色，但是第二个元素变为红色，但是第二个 h1 h1 中的中的 strong strong 不受影响：不受影响：This is very very important.This is very very important.This is really very important.This is really very important.3 id3 id选择器选择器 id id 选择器可以为标有特定选择器可以为标有特定idid的

7、的HTMLHTML元素指定特定的样式。元素指定特定的样式。id id 选择器以选择器以 “#”来定义。下面的两个来定义。下面的两个idid选择器，第一个可以定义元素的颜色为红色，第二个定选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：义元素的颜色为绿色：#red color:red;#red color:red;#green color:green;#green color:green;这个段落是红色。这个段落是红色。font id=这句文本是绿色。这句文本是绿色。注意：一个值的注意：一个值的idid属性只能在每个属性只能在每个HTMLHTML文档中出现一次。文档中出现一次

8、。idid选择器和后代选择器选择器和后代选择器 id id选择器常常用于建立后代选择器。选择器常常用于建立后代选择器。#sidebar p#sidebar p font-style:italic;font-style:italic;text-align:right;text-align:right;margin-top:10px;margin-top:10px;上面的样式只会应用于出现在上面的样式只会应用于出现在idid是是sidebarsidebar的元素内的段落。这个元素很可能是的元素内的段落。这个元素很可能是 div div 或者是表格单元，即使被标注为或者是表格单元，即使被标注为sid

9、ebarsidebar的元素只能在文档中出现一次，这的元素只能在文档中出现一次，这个个idid选择器作为后代选择器也可以被使用很多次。选择器作为后代选择器也可以被使用很多次。4 4 类选择器类选择器 在在 CSS CSS 中，类选择器以一个点号显示：中，类选择器以一个点号显示：.center text-align:center .center text-align:center 因此，所有拥有因此，所有拥有 center center 类的类的HTMLHTML元素均为居中。元素均为居中。This heading will be center-This heading will be cente

10、r-aligned aligned This paragraph will also be This paragraph will also be center-aligned.center-aligned.和和 id id 一样，一样，class class 也可被用作后代选择器：也可被用作后代选择器：.fancy td color:#f60;background:#666;.fancy td color:#f60;background:#666;类名为类名为fancyfancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字。的更大的元素内部的表格单元都会以灰色背景显示橙色文字。元素也

11、可以基于它们的类而被选择：元素也可以基于它们的类而被选择：td.fancy color:#f60;background:#666;td.fancy color:#f60;background:#666;在上面的例子中，类名为在上面的例子中，类名为fancyfancy的表格单元将是带有灰色背景的橙色。你可的表格单元将是带有灰色背景的橙色。你可以将类以将类fancyfancy分配给任何一个表格元素任意多的次数。那些以分配给任何一个表格元素任意多的次数。那些以 fancy fancy 标注的单标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为元格都会是带有灰色背景的橙色。那些没有被分配名为fa

12、ncyfancy的类的单元格不会的类的单元格不会受这条规则的影响。当然，任何其他被标注为受这条规则的影响。当然，任何其他被标注为fancyfancy的元素也不会这条规则的影的元素也不会这条规则的影响。响。5 5 属性选择器属性选择器 对带有指定属性的对带有指定属性的 HTML HTML 元素设置样式。元素设置样式。属性选择器在为不带有属性选择器在为不带有 class class 或或 id id 的表单设置样式时特别有用：的表单设置样式时特别有用：inputtype=text inputtype=text width:150px;width:150px;display:block;displa

13、y:block;margin-bottom:10px;margin-bottom:10px;background-color:yellow;background-color:yellow;font-family:Verdana,Arial;font-family:Verdana,Arial;6 6 相邻兄弟选择器相邻兄弟选择器 可选择紧接在另一元素后的元素，且二者有相同父元素。可选择紧接在另一元素后的元素，且二者有相同父元素。li+li font-weight:bold;li+li font-weight:bold;List item 1 List item 1 List item 2 Lis

14、t item 2 List item 3 List item 3 List item 1 List item 1 List item 2 List item 2 List item 3 List item 3 7 7 伪类伪类(Pseudo-classes)(Pseudo-classes)CSS CSS 伪类用于向某些选择器添加特殊的效果。伪类用于向某些选择器添加特殊的效果。8 8 伪元素伪元素 CSS CSS 伪元素用于向某些选择器设置特殊效果。伪元素用于向某些选择器设置特殊效果。创建创建CSSCSS样式表的方法有三种：样式表的方法有三种：1 1 外部样式表外部样式表 当样式需要应用于很多页

15、面时，外部样式表将是理想的选择。当样式需要应用于很多页面时，外部样式表将是理想的选择。WebWeb页面使用页面使用 标签链接到样式表文件。标签链接到样式表文件。标签写在文档的头部（标签写在文档的头部（headhead）：）：如何创建如何创建 CSSCSS 外部样式表可以在任何文本编辑器进行编辑。文件不能包含任何的外部样式表可以在任何文本编辑器进行编辑。文件不能包含任何的 html html 标签。样式表应该以标签。样式表应该以 .css.css 扩展名进行保存。扩展名进行保存。hr hr color:sienna color:sienna p p margin-left:20px margin

16、-left:20px body body background-image:url(images/back40.gif)background-image:url(images/back40.gif)2 2 内部样式表内部样式表 当单个文档需要特殊的样式时，就应该使用内部样式表。内部样式表是使当单个文档需要特殊的样式时，就应该使用内部样式表。内部样式表是使用用 标签写在头部：标签写在头部：hr color:sienna hr color:sienna p margin-left:20px p margin-left:20px body background-image:url(images/ba

17、ck40.gif)body background-image:url(images/back40.gif)3 3 内联样式表内联样式表 当样式仅需要在一个元素上应用一次时，就需要内联样式表。要使用内联当样式仅需要在一个元素上应用一次时，就需要内联样式表。要使用内联样式，你需要在相关的标签内使用样式（样式，你需要在相关的标签内使用样式（stylestyle）属性，）属性，StyleStyle属性可以包含任属性可以包含任何何CSSCSS属性。属性。This is a paragraph This is a paragraph 1 1、继承、继承 CSS CSS的某些样式是具有继承性的，继承是一种规

18、则，它允许样式不仅应用于的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定某个特定htmlhtml标签元素，而且应用于其后代。标签元素，而且应用于其后代。可以继承的类：可以继承的类：CSSCSS的继承、层叠和特殊性的继承、层叠和特殊性文本相关属性文本相关属性列表相关属性列表相关属性2 2、特殊性、特殊性 有的时候我们为同一个元素设置了不同的有的时候我们为同一个元素设置了不同的CSSCSS样式代码，那么元素会启用哪样式代码，那么元素会启用哪一个一个CSSCSS样式呢样式呢?我们来看一下面的代码：我们来看一下面的代码：pcolor:red;.firstcolor:green;文

19、本文本文本p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。权值的规则：权值的规则：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。3 3、层叠、层叠 我们来思考一个问题：如果在我们来思考一个问题：如果在htmlhtml文件中对于同一个元素可以有多个文件中对于同一个元素可以有多个csscss样样式存在并且这多个式存在并且这多个csscss样式具有相同权重值怎么办？好，这一小节中的层叠帮你样式具有相同权重值怎么办？好，这一小节中的层叠帮你解决这个问

20、题。解决这个问题。层叠层叠就是在就是在htmlhtml文件中对于同一个元素可以有多个文件中对于同一个元素可以有多个csscss样式存在，当有相同权重样式存在，当有相同权重的样式存在时，会根据这些的样式存在时，会根据这些csscss样式的样式的前后顺序前后顺序来决定，处于最后面的来决定，处于最后面的csscss样式样式会被应用。会被应用。所以前面的所以前面的csscss样式优先级就不难理解了：样式优先级就不难理解了：内联样式表（标签内部）内联样式表（标签内部）嵌入样式表（当前文件中）嵌入样式表（当前文件中）外部样式表（外部文外部样式表（外部文件中）。件中）。4 4、重要性、重要性 我们在做网页代

21、码的时，有些特殊的情况需要为某些样式设置具有最高权我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用值，怎么办？这时候我们可以使用!important!important来解决。来解决。这里注意当网页制作者不设置这里注意当网页制作者不设置csscss样式时，浏览器会按照自己的一套样式来样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级惯把字号设置为大一些，使其查看

22、网页的文本更加清楚。这时注意样式优先级为：为：浏览器默认的样式浏览器默认的样式 网页制作者样式网页制作者样式 用户自己设置的样式用户自己设置的样式，但记，但记住住!important!important优先级样式是个例外，权值高于用户自己设置的样式。优先级样式是个例外，权值高于用户自己设置的样式。CSS CSS 盒模型盒模型 (Box Model)(Box Model)盒模型(Box Model)规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。元素框的最内部分是实际的元素框的最内部分是实际的内容，直接包围内容的是内边距。内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边内边

23、距呈现了元素的背景。内边距的边缘是边框。边框以外是外距的边缘是边框。边框以外是外边距，外边距默认是透明的，因边距，外边距默认是透明的，因此不会遮挡其后的任何元素此不会遮挡其后的任何元素。外边距合并外边距合并 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。1、当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。2、当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。3、假设有

24、一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：如果这个外边距遇到另一个元素的外边距，它还会发生合并：CSSCSS定位定位(Positioning)(Positioning)CSS 定位(Positioning)属性允许你对元素进行定位。定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。1、相对定位 设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在

25、它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。元素会导致它覆盖其它框。2、绝对定位 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。绝对定位使元素的位置与文档流无关，因此不占据空间。这一

26、点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。CSS CSS 浮动浮动 首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会

27、为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。举几个栗子举几个栗子 默认情况（没有浮动）默认情况（没有浮动）div2左浮动，那么它将脱离标准流，但div1、div3、div4仍然在标准流当中，所以div3会自动向上移动，占据div2的位置，重新组成一个流。又因为浮动是漂浮在标准流之上的，因此div2挡住了一部分div3，div3看起来变“矮”了。div2在每个例子中都是浮动的，但并没有跟随到在每个例子中都是浮动的，但并没有跟随到div1之后之后？结论：假如某个div元素A是浮动的，如果A元素上一个元素也

28、是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。只把div2、div4左浮动？清除浮动清除浮动 语法：语法：clear:none|left|right|both 取值：取值：none :默认值。允许两边都可以有浮动对象默认值。允许两边都可以有浮动对象 left :不允许左边有浮动对象不允许左边有浮动对象 right :不允许右边有浮动对象不允许右边有浮动对象 both :不允许有浮动对象不允许有浮动对象注意：对于注意：对于CSS的清

29、除浮动的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。的元素本身，不能影响其他元素。清除浮动几种方法清除浮动几种方法 浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容这样让清除浮动更难了。解决浮动引起

30、的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。性方面还有问题。1、父级、父级div定义定义 height原理：父级原理：父级div手动定义手动定义height，就解决了父级，就解决了父级div无法自动获取到高度的问题。无法自动获取到高度的问题。优点：简单、代码少、容易掌握优点：简单、代码少、容易掌握 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，不一样时，会产生问题会产生问题 建议：不推荐使用，只建议高度固定的布局时使用建议：不推荐使用，只建议高度固定的布局时使用 清除浮动几种方法清除浮动几种方

31、法 2、结尾处加空、结尾处加空div标签标签 clear:both 原理：添加一个空原理：添加一个空div，利用，利用css提高的提高的clear:both清除浮动，让父级清除浮动，让父级div能自动获取到高度能自动获取到高度 优点：简单、代码少、浏览器支持好、不容易出现怪问题优点：简单、代码少、浏览器支持好、不容易出现怪问题 缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空多空div，让人感觉很不好，让人感觉很不好 建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法建议：不推荐使用，但此方法是以前主要使用的一种清

32、除浮动方法 清除浮动几种方法清除浮动几种方法 3、父级、父级div定义定义 伪类伪类:after 和和 zoom 原理：原理：IE8以上和非以上和非IE浏览器才支持浏览器才支持:after，原理和方法，原理和方法2有点类似，有点类似，zoom(IE专有属性专有属性)可解决可解决ie6,ie7浮动问题浮动问题 优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）用，如：腾迅，网易，新浪等等）缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能缺点：代码多、不少初学者不理解原理，要两句代码结合使用才

33、能让主流浏览器都支持。让主流浏览器都支持。建议：推荐使用，建议定义公共类，以减少建议：推荐使用，建议定义公共类，以减少CSS代码。代码。清除浮动几种方法清除浮动几种方法 4、父级、父级div定义定义 overflow:hidden 原理：必须定义原理：必须定义width或或zoom:1，同时不能定义，同时不能定义height，使用，使用overflow:hidden时，浏览器会自动检查浮动区域的高度时，浏览器会自动检查浮动区域的高度 优点：简单、代码少、浏览器支持好优点：简单、代码少、浏览器支持好 缺点：不能和缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。配合使用，因为超出的

34、尺寸的会被隐藏。建议：只推荐没有使用建议：只推荐没有使用position或对或对overflow:hidden理解比较深的朋理解比较深的朋友使用。友使用。清除浮动几种方法清除浮动几种方法 5、父级、父级div定义定义 overflow:auto 原理：必须定义原理：必须定义width或或zoom:1，同时不能定义，同时不能定义height，使用，使用overflow:auto时，浏览器会自动检查浮动区域的高度时，浏览器会自动检查浮动区域的高度 优点：简单、代码少、浏览器支持好优点：简单、代码少、浏览器支持好 缺点：内部宽高超过父级缺点：内部宽高超过父级div时，会出现滚动条。时，会出现滚动条。

35、建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。出现滚动条就使用吧。清除浮动几种方法清除浮动几种方法 6、父级、父级div 也一起浮动也一起浮动 原理：所有代码一起浮动，就变成了一个整体原理：所有代码一起浮动，就变成了一个整体 优点：没有优点优点：没有优点 缺点：会产生新的浮动问题。缺点：会产生新的浮动问题。建议：不推荐使用，只作了解。建议：不推荐使用，只作了解。清除浮动几种方法清除浮动几种方法 7、父级、父级div定义定义 display:table 原理：将原理：将div属性变成表格属性变成表格 优点：

36、没有优点优点：没有优点 缺点：会产生新的未知问题。缺点：会产生新的未知问题。建议：不推荐使用，只作了解。建议：不推荐使用，只作了解。清除浮动几种方法清除浮动几种方法 8、结尾处加、结尾处加 br标签标签 clear:both 原理：父级原理：父级div定义定义zoom:1来解决来解决IE浮动问题，结尾处加浮动问题，结尾处加 br标签标签 clear:both 建议：不推荐使用，只作了解。建议：不推荐使用，只作了解。Bootstrap 简洁、直观、强悍的前端开发框架，让简洁、直观、强悍的前端开发框架，让web开发更开发更迅速、简单。迅速、简单。Bootstrap 是由是由 Twitter 的的

37、Mark Otto 和和 Jacob Thornton 开发的。它是基于开发的。它是基于 HTML、CSS、JAVASCRIPT 的，用于开发响应式布局、移动设备优的，用于开发响应式布局、移动设备优先的先的 WEB 项目。它简洁灵活，使得项目。它简洁灵活，使得 Web 开发更加快开发更加快捷。捷。Bootstrap简单易学简单易学只要你具备只要你具备 HTML 和和 CSS 的基础知识，你就可以很快的掌握的基础知识，你就可以很快的掌握Bootstrap，进而开发出自己的网站。学习完本教程后，你即可达，进而开发出自己的网站。学习完本教程后，你即可达到使用到使用 Bootstrap 开发开发 We

38、b 项目的中等水平。当然，这是建立在项目的中等水平。当然，这是建立在你已经熟悉掌握你已经熟悉掌握 HTML 和和 CSS 的基础上。的基础上。简介简介为什么使用 Bootstrap移动设备优先移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。浏览器支持浏览器支持：所有的主流浏览器都支持 Bootstrap。容易上手容易上手：只要你具备 HTML 和 CSS 的基础知识，你就可以开始学习 Bootstrap。响应式设计响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。它为开发人员创建接口提供了一个简洁统一的解决方案。它包

39、含了功能强大的内置组件，易于定制。它还提供了基于 Web 的定制。它是开源的。基本结构：基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基提供了一个带有网格系统、链接样式、背景的基本结构。这将在本结构。这将在 Bootstrap 基本结构基本结构 部分详细讲解。部分详细讲解。CSS：Bootstrap 自带以下特性：全局的自带以下特性：全局的 CSS 设置、定义基本的设置、定义基本的 HTML 元素样式、可扩展的元素样式、可扩展的 class，以及一个先进的网格系统。这将，以及一个先进的网格系统。这将在在 Bootstrap CSS 部分详细讲解。部分详细讲解。组件：组件

40、：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在单、导航、警告框、弹出框等等。这将在 布局组件布局组件 部分详细讲解。部分详细讲解。JavaScript 插件：插件：Bootstrap 包含了十几个自定义的包含了十几个自定义的 jQuery 插件。你插件。你可以直接包含所有的插件，也可以逐个包含这些插件。这将可以直接包含所有的插件，也可以逐个包含这些插件。这将在在 Bootstrap 插件插件 部分详细讲解。部分详细讲解。定制：你可以定制定制：你可以定制 Bootstrap 的组件、的组件、L

41、ESS 变量和变量和 jQuery 插件来得插件来得到你自己的版本到你自己的版本Bootstrap 包的内容包的内容Bootstrap基本模板HTML 5 文档类型（文档类型（Doctype）.移动设备优先移动设备优先 width 属性控制设备的宽度。假设你的网站将被带有不同屏幕分辨率的设备浏览，那属性控制设备的宽度。假设你的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为么将它设置为 device-width 将确保它能正确呈现在不同设备上。将确保它能正确呈现在不同设备上。initial-scale=1.0 确保网页加载时，以确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。的比

42、例呈现，不会有任何的缩放。在移动设备浏览器上，通过为在移动设备浏览器上，通过为 viewport meta 标签添加标签添加 user-scalable=no 可以禁用可以禁用其缩放（其缩放（zooming）功能。通常情况下，）功能。通常情况下，maximum-scale=1.0 与与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还

43、是要看你自己的情况而定！而定！Bootstrap CSS 概览概览什么是什么是 Bootstrap Bootstrap 网格系统（网格系统（Grid SystemGrid System）？）？Bootstrap Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到设备或视口大小的增加而适当地扩展到 1212 列。它包含了用于简单的布局选项的预列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。让我们来理解一下定义类，也包含了用于生成

44、更多语义布局的功能强大的混合类。让我们来理解一下上面的语句。上面的语句。Bootstrap 3 Bootstrap 3 是移动设备优先的，在这个意义上，是移动设备优先的，在这个意义上，Bootstrap Bootstrap 代码从代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。本电脑、台式电脑）上的组件和网格。Bootstrap Bootstrap 网格系统（网格系统（Grid SystemGrid System）的工作原理）的工作原理网格系统通过一系列包含内

45、容的行和列来创建页面布局。下面列出了网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap Bootstrap 网格系统是如何工作的：网格系统是如何工作的：行必须放置在行必须放置在.container.container class class 内，以便获得适当的对齐（内，以便获得适当的对齐（alignmentalignment）和内边）和内边距（距（paddingpadding）。）。使用行来创建列的水平组。使用行来创建列的水平组。内容应该放置在列内，且唯有列可以是行的直接子元素。内容应该放置在列内，且唯有列可以是行的直接子元素。预定义的网格类，比如预定义的网格类，

46、比如.row.row 和和.col-xs-4.col-xs-4，可用于快速创建网格布局。，可用于快速创建网格布局。列通过内边距（列通过内边距（paddingpadding）来创建列内容之间的间隙。该内边距是通过）来创建列内容之间的间隙。该内边距是通过.rows.rows 上的上的外边距（外边距（marginmargin）取负，表示第一列和最后一列的行偏移。）取负，表示第一列和最后一列的行偏移。网格系统是通过指定你想要横跨的十二个可用的列来创建的。例如，要创建三个相网格系统是通过指定你想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个等的列，则使用三个.col-xs-4.co

47、l-xs-4。Bootstrap 网格系统网格系统网格选项额外的小设备收集（768px）小型设备平板电脑（768px）中型设备台式电脑（992px）大型设备台式电脑（1200px）网格行为一直是水平的开始是堆叠在一起的，当大于这些阈值时将变为水平排列最大容器宽度None(auto)750px970px1170pxClass 前缀.col-xs-.col-sm-.col-md-.col-lg-列#12121212最大列宽Auto62px81px97px间隙宽度30px（一个列的每边分别 15px）30px（一个列的每边分别 15px）30px（一个列的每边分别 15px）30px（一个列的每边分

48、别 15px）可嵌套YesYesYesYes偏移量YesYesYesYes列排序YesYesYesYes基本的网格结构 .元素被添加，确保适当的居中和最元素被添加，确保适当的居中和最大宽度。大宽度。一旦添加了容器，接下来你需要考虑以行为单位。添加一旦添加了容器，接下来你需要考虑以行为单位。添加.，并在行内添加两个列，并在行内添加两个列。网格中的每一行是由网格中的每一行是由 12 个单元组成的，你可以使用这些单元定义列的个单元组成的，你可以使用这些单元定义列的尺寸。在我们的实例中，有两个列，每个列由尺寸。在我们的实例中，有两个列，每个列由 6 个单元组成，即个单元组成，即 6+6=12。你可以尝

49、试其他更多的选项，比如你可以尝试其他更多的选项，比如 和和 或或 和和。你可以尝试一下，确保总和总是你可以尝试一下，确保总和总是 12。细节细节使用col-md-offset-x定义偏移量 .col-md-4 .col-md-4.col-md-offset-4 .col-md-3.col-md-offset-3 .col-md-3.col-md-offset-3 .col-md-6.col-md-offset-3使用.col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将.col-

50、md-4 元素向右侧偏移了4个列（column）的宽度。嵌套列为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的.row 元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。Level 1:.col-sm-9 Level 2:.col-xs-8.col-sm-6 Level 2:.col-xs-4.col-sm-6 列排序通过使用.col-md-push-*和.col-md-pull-*类就可以很容易的改变列（column）的顺序。.col-md-9.col-md-p

51、ush-3 .col-md-3.col-md-pull-9 为了加快对移动设备友好的页面开发工作，利用媒为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。机显示或隐藏内容的工具类。有针对性的使用这类工具类，从而避免为同一个网有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本。相反，通过使用这些工具站创建完全不同的版本。相反，通过使用这些工具类可以在不同设备上提供不同的展现形式。类可以在不

52、同设备上提供不同的展现形式。响应式工具响应式工具可用的类从从 v3.2.0 版本起，形如版本起，形如.visible-*-*的类针对每种屏幕大小都有了三种变体，的类针对每种屏幕大小都有了三种变体，.visible-*-block、.visible-*-inline 和和.visible-*-inline-block。.visible-xs、.visible-sm、.visible-md 和和.visible-lg 类也同时存在。但是类也同时存在。但是从从 v3.2.0 版版本开始不再建议使用本开始不再建议使用。除了。除了 相关的元素的特殊情况外，它们与相关的元素的特殊情况外，它们与.visib

53、le-*-block 大体相同。大体相同。字体字体图标（图标（Glyphicons）字字体体图标（图标（Glyphicons）是在）是在 Web 项目中使用的图标字体。虽然，项目中使用的图标字体。虽然，Glyphicons Halflings 需要商业许可，但是你可以通过基于项目的需要商业许可，但是你可以通过基于项目的 Bootstrap 来免费使用这些图标。来免费使用这些图标。获取字获取字体体图标（图标（Glyphicons）在在 fonts 文件夹内可以找到字形图标（文件夹内可以找到字形图标（Glyphicons），它包含了下列这些文件：），它包含了下列这些文件：glyphicons-halflings-regular.eotglyphicons-halflings-regular.svgglyphicons-halflings-regular.ttfglyphicons-halflings-regular.woff相关的相关的 CSS 规则写在规则写在 dist 文件夹内的文件夹内的 css 文件夹内的文件夹内的 bootstrap.css 和和 bootstrap-min.css 文件上。文件上。用法用法如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。的空间。