1、第第4 4章章 BOOTSTRAPBOOTSTRAP基础基础1Bootstrap基础Bootstrap入门Bootstrap基本样式设计Bootstrap入门BootstrapBootstrap简介简介lBootstrapBootstrap是由著名的美国社交网络及微博服务网站是由著名的美国社交网络及微博服务网站TwitterTwitter开发的，开发的，一款目前很受欢迎的前端框架。一款目前很受欢迎的前端框架。BootstrapBootstrap是一个免费、开源的前端开是一个免费、开源的前端开发框架，使用发框架，使用BootstrapBootstrap可以方便、快速地实现响应式网页的开发。可以方
2、便、快速地实现响应式网页的开发。Bootstrap Bootstrap 是基于是基于HTML 5HTML 5、CSS 3CSS 3、JavaScriptJavaScript的，包含了丰富的组件，的，包含了丰富的组件，比如布局、表单、表格、导航、图像等的模板以及比如布局、表单、表格、导航、图像等的模板以及JavaScriptJavaScript插件等。插件等。它简洁灵活，使得它简洁灵活，使得 Web Web 开发更加快捷，并能轻松制作出响应式网页的开发更加快捷，并能轻松制作出响应式网页的效果效果。lBootstrapBootstrap的源码是基于的源码是基于CSS CSS 预处理脚本预处理脚本L
3、essLess和和 SassSass开发的，支持响开发的，支持响应式设计，目前基本所有的移动设备和主流浏览器都支持应式设计，目前基本所有的移动设备和主流浏览器都支持BootstrapBootstrap。BootstrapBootstrap目前最新版本是目前最新版本是Bootstrap 4Bootstrap 4，相关文件都可在其中文官网，相关文件都可在其中文官网上下载。上下载。Bootstrap入门lBootstrapBootstrap提供了压缩版（生产版）与未压缩版（开发版）两种形式的提供了压缩版（生产版）与未压缩版（开发版）两种形式的压缩包。如果对预定义的压缩包。如果对预定义的Bootstr
4、apBootstrap样式没有改动只是直接调用，在部样式没有改动只是直接调用，在部署网站的时候调用压缩版（生产版）就可以了。署网站的时候调用压缩版（生产版）就可以了。lBootstrap Bootstrap 包的内容包括以下内容。包的内容包括以下内容。基本页面结构。提供了一个带有网格系统、链接样式、背景的基本结基本页面结构。提供了一个带有网格系统、链接样式、背景的基本结构。构。全局的全局的 CSS CSS 设置。包括定义基本的设置。包括定义基本的 HTML HTML 元素样式、可扩展的元素样式、可扩展的classclass以及网格系统。在标签中使用以及网格系统。在标签中使用BootstrapB
5、ootstrap提供的提供的CSSCSS类，即可轻松实现多类，即可轻松实现多种已定义好的基本样式。种已定义好的基本样式。可重用组件。可重用组件。BootstrapBootstrap包含了十几个可重用的组件，用于创建图像、包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。下拉菜单、导航、警告框、弹出框等等。JavaScript JavaScript 插件。包含了十几个自定义的插件。包含了十几个自定义的jQueryjQuery插件。可以直接包插件。可以直接包含所有的插件，也可以逐个包含这些插件。含所有的插件，也可以逐个包含这些插件。Bootstrap入门lBootstra
6、pBootstrap具有以下特征。具有以下特征。（1 1）适用于）适用于HTML5HTML5文档类型文档类型（2 2）移动设备优先）移动设备优先BootstrapBootstrap是移动设备优先的，针对移动设备的样式直接融合进了框架的是移动设备优先的，针对移动设备的样式直接融合进了框架的内核中。内核中。l如何如何使用使用BootstrapBootstrap？要使用要使用BootstrapBootstrap，必须首先正确导入相关的包来搭建环境，在官网中提，必须首先正确导入相关的包来搭建环境，在官网中提供了代码的基本供了代码的基本模板模板要导入3个包：一个CSS文件，一个jQuery文件和一个JS
7、的包，并且要注意顺序，jQuery包必须在JS包的上面先引用。Bootstrap入门l导入导入BootstrapBootstrap时可以直接导入可靠网站上的相关时可以直接导入可靠网站上的相关BootstrapBootstrap文件，也文件，也可以把可以把BootstrapBootstrap源文件下载、解压并放到网站目录后直接使用。如果源文件下载、解压并放到网站目录后直接使用。如果直接使用默认的直接使用默认的BootstrapBootstrap样式，则只需直接调用样式，则只需直接调用bootstrap.min.cssbootstrap.min.css、jquery-1.11.1.min.jsjq
8、uery-1.11.1.min.js和和bootstrap.min.jsbootstrap.min.js文件文件。l示例示例代码如下代码如下：link=stylesheetscript/jquery-1.11.1.min.jsscript lBootstrapBootstrap可视化可视化在线在线编辑器：编辑器：http:/ CCDreamweaver CC中创建中创建BootstrapBootstrap页面页面打开打开“新建文档新建文档”窗口，窗口，“文件类型文件类型”选择选择HTMLHTML，“框架框架”选择选择BootstrapBootstrap。对于。对于Bootstrap CSSBo
9、otstrap CSS文件的调用，如果网站目录中已有文件的调用，如果网站目录中已有BootstrapBootstrap相关文件，可以直接以相关文件，可以直接以“使用现有文件使用现有文件”的选项指定调用地址的选项指定调用地址直接调用；如果没有，则可通过直接调用；如果没有，则可通过“新建新建”选项创建。单击选项创建。单击“创建创建”按钮，按钮，即可新建即可新建BootstrapBootstrap页面页面Bootstrap基本样式设计l网格系统网格系统：也也称栅格系统，是称栅格系统，是Bootstrap Bootstrap 提供的一套响应式、移动设提供的一套响应式、移动设备优先的流式布局系统。备优先
10、的流式布局系统。Bootstrap Bootstrap 需要为页面内容包裹一需要为页面内容包裹一个个.container.container或或.container-fluid.container-fluid容器容器。在。在这种网格系统中，浏览器这种网格系统中，浏览器会随着屏幕的大小的增减自动分为最多会随着屏幕的大小的增减自动分为最多1212列，通过一系列的行（列，通过一系列的行（rowrow）与列（与列（columncolumn）的组合来创建页面布局）的组合来创建页面布局。具体详见具体详见第五第五章章l图片图片样式样式。BootstrapBootstrap提供了以下提供了以下3 3个可对图片
11、应用的简单样式个可对图片应用的简单样式classclass。（1 1）.imgimg-rounded-rounded：添加：添加border-radius:6pxborder-radius:6px来获得图片圆角。来获得图片圆角。（2 2）.imgimg-circle-circle：添加：添加border-radius:50%border-radius:50%来让整个图片变成圆形。来让整个图片变成圆形。（3 3）.imgimg-thumbnail-thumbnail：添加一些内边距（：添加一些内边距（paddingpadding）和一个灰色的边框）和一个灰色的边框。l响应式响应式图片图片。若若为
12、图片添加对为图片添加对.imgimg-responsive-responsive 类的调用，可以让图类的调用，可以让图片支持响应式布局。其实质是为图片设置了属性片支持响应式布局。其实质是为图片设置了属性“max-width:max-width:100%;height:auto;display:block;100%;height:auto;display:block;”，从而让图片在其父元素中，从而让图片在其父元素中更好地缩放更好地缩放。l让图片让图片居中居中：可以可以使用使用.center-block .center-block 类使图片水平居中显示。类使图片水平居中显示。Bootstrap基
13、本样式设计l排版样式与辅助排版样式与辅助类类1 1页面页面主体主体（1 1）BootstrapBootstrap将全局将全局 font-size font-size 设置为设置为 14px 14px，line-height line-height 设置为设置为 1.4281.428。这些属性直接赋予。这些属性直接赋予 元素和所有段落元素。另外，元素和所有段落元素。另外，（段落）元素还被设置了等于（段落）元素还被设置了等于 1/2 1/2 行高（即行高（即 10px 10px），颜色被设置为），颜色被设置为#333#333的底部外边距（的底部外边距（marginmargin）（2 2）为）为元素
14、添加元素添加.lead.lead类，可以让段落类，可以让段落突出显示突出显示2 2标题标题格式格式【例【例4-44-4】【例【例4-54-5】（1 1）BootstrapBootstrap重新定义了重新定义了HTMLHTML中的中的h1h1h6h6的的6 6级级标题标题BootstrapBootstrap的标题和普通标题的的标题和普通标题的区别区别l副标题副标题。在标题内还可以嵌入。在标题内还可以嵌入 标签或添加标签或添加.small .small 类的元素，可以用来标记副标题类的元素，可以用来标记副标题 Bootstrap基本样式设计3 3内联文本元素内联文本元素（1 1）添加标记，使用）添
15、加标记，使用元素或元素或.mark.mark 类类（2 2）添加线条的）添加线条的文本文本（3 3）强调作用的文本）强调作用的文本【例4-6】内联元素内联元素【例【例4-7】内联元素 内联元素 内联元素 内联元素 【例【例4-8】内联元素 内联元素 内联元素【例【例4-9】主标题副标题small 主标题副标题big 加粗strong 斜体em 删除线del下划线insBootstrap基本样式设计4 4对齐对齐方式方式5 5大大小写小写。用于用于对英文文本的大小写进行设置对英文文本的大小写进行设置【例【例4-10】Bootstrap 对齐Bootstrap 对齐 Bootstrap 对齐 【例
16、【例4-11】Bootstrap 大小写 Bootstrap 大小写 Bootstrap 大小写Bootstrap基本样式设计6 6缩略语缩略语可使用可使用 标签设置标签设置titletitle属性，当鼠标指针悬停在缩略词上时，就会属性，当鼠标指针悬停在缩略词上时，就会显示完整显示完整内容内容。BootBoot 还还可为可为 添加添加.initialisminitialism类，设置字体的大小为类，设置字体的大小为90%90%，字母为，字母为大写大写 BootBoot 7 7地址文本地址文本设置了行高设置了行高20px20px、底部边距、底部边距20px20px，并去掉了倾斜。，并去掉了倾斜。
17、8 8引用文本引用文本对默认样式进行引用，增加了左边线，设定了字体大小和内外边距对默认样式进行引用，增加了左边线，设定了字体大小和内外边距。默认居左显示，也可以通过设置类默认居左显示，也可以通过设置类.blockquoteblockquote-reverse-reverse或者或者.pull-right.pull-right使引用文本居右。使引用文本居右。【例【例4-12】居左引用文本居右引用文本1局右引用文本2Bootstrap基本样式设计9 9列表排版列表排版（1 1）.list-.list-unstyledunstyled类：移除默认样式，即去掉列表前的小黑点类：移除默认样式，即去掉列表
18、前的小黑点。（2 2）.list-inline.list-inline类：设为内联，使得列表从垂直排列变为水平类：设为内联，使得列表从垂直排列变为水平排列排列（3 3）使用）使用.dl-horizontal.dl-horizontal类可使定义列表水平排列类可使定义列表水平排列【例【例4-13】列表样式1 列表样式2 列表样式3【例【例4-14】列表样式1 列表样式2 列表样式3 【例【例4-15】Bootstrap Bootstrap 页面排版的样式Bootstrap基本样式设计10.10.代码代码（1 1）内联代码）内联代码。例如：。例如：<section>lt;section&
19、gt;（2 2）键盘文本）键盘文本 。例如：。例如：ctrl+,ctrl+,（3 3）代码块）代码块，例如：，例如：<p>Helloworldlt;p>Helloworld<lt;/;/p>p>Bootstrap基本样式设计1111辅助类辅助类BootstrapBootstrap提供了一组工具类。通过颜色来展示意图，用于文字颜色以及提供了一组工具类。通过颜色来展示意图，用于文字颜色以及背景色的设置背景色的设置。（1 1）情境文本颜色。）情境文本颜色。【例例4-164-16】（2 2）情境背景色。）情境背景色。类描述.text-muted柔和灰.text-prim
20、ary主要蓝.text-success成功绿.text-info信息蓝.text-warning警告黄.text-danger危险红类描述.text-muted柔和灰.text-primary主要蓝.text-success成功绿.text-info信息蓝.text-warning警告黄.text-danger危险红Bootstrap基本样式设计（3 3）关闭按钮。即一个象征关闭的）关闭按钮。即一个象征关闭的“”图标，例如：图标，例如：×/button×（4 4）三角符号。通过使用三角符号可以指示某个元素具有下拉菜单的功）三角符号。通过使用三角符号可以指示某个元素具有下
21、拉菜单的功能。例如：能。例如：/span（5 5）快速浮动类）快速浮动类.pull-left.pull-left和和.pull-right.pull-right。可通过这两个类使得页面。可通过这两个类使得页面元素靠左或靠右浮动。元素靠左或靠右浮动。Bootstrap基本样式设计（6 6）使内容块居中的类）使内容块居中的类.center-block.center-block。为任意元素设置。为任意元素设置 display:display:block block 属性并通过属性并通过 margin margin 属性让其中的内容居中。可通过调用属性让其中的内容居中。可通过调用类类.center-b
22、lock.center-block使得元素居中，例如：使得元素居中，例如：居中居中/div（7 7）清除浮动。通过为父元素添加）清除浮动。通过为父元素添加.clearfixclearfix 类可以很容易地清除浮类可以很容易地清除浮动（动（floatfloat）。例如：）。例如：div class=（8 8）可通过类）可通过类.show.show及及.hidden.hidden设置显示或隐藏内容。设置显示或隐藏内容。showshowhiddenhiddenBootstrap基本样式设计l表格样式表格样式lBootstrapBootstrap提供了一些丰富的表格样式供开发者使用。提供了一些丰富的表
23、格样式供开发者使用。【例例4-184-18】（1 1）可对表格设置基本表格样式类）可对表格设置基本表格样式类.table.table。例如为【例。例如为【例4-184-18】的表格】的表格添加对添加对.table.table类的调用：类的调用：（2 2）通过调用类）通过调用类.table-striped.table-striped可实现条纹状表格效果，让可实现条纹状表格效果，让 里里的行产生一行隔一行加单色背景效果。如为【例的行产生一行隔一行加单色背景效果。如为【例4-184-18】的表格添加类】的表格添加类.table-stripedtable-striped的调用如下：的调用如下：Boot
24、strap基本样式设计（3 3）通过调用类）通过调用类.table-bordered.table-bordered可给表格添加边框。例如：可给表格添加边框。例如：table class=table table-bordered（4 4）通过调用类）通过调用类.table-hover.table-hover可以让可以让 下的表格悬停鼠标指针实下的表格悬停鼠标指针实现背景效果。例如现背景效果。例如：table class=table table-hover（5 5）通过调用类）通过调用类.srsr-only-only可以隐藏行。例如可以隐藏行。例如：-only（6 6）通过调用类）通过调用类.ta
25、ble-responsive.table-responsive可实现响应式表格。表格父元素设可实现响应式表格。表格父元素设置响应式，当屏幕小于置响应式，当屏幕小于768px768px时，表格就会自适应，出现边框，多的隐藏时，表格就会自适应，出现边框，多的隐藏可以滚动。例如可以滚动。例如：body class=table-responsive（7 7）精简表格。）精简表格。（8 8）通过调用类）通过调用类.table-condensed class.table-condensed class，行内边距（，行内边距（paddingpadding）被切）被切为两半，可让表看起来更紧凑。为两半，可让表
26、看起来更紧凑。（9 9）上下文）上下文类允许改变表格行或单个单元格的背景颜色类允许改变表格行或单个单元格的背景颜色类描述.active对某一特定的行或单元格应用悬停颜色.success表示一个成功的或积极的动作.warning表示一个需要注意的警告.danger表示一个危险的或潜在的负面动作Bootstrap基本样式设计l徽章徽章lBootstrapBootstrap中的徽章（中的徽章（BadgesBadges）与标签相似，主要的区别在于徽章的边角）与标签相似，主要的区别在于徽章的边角更加圆滑。徽章主要用于突出显示新的或未读的项。如需使用徽章，只需更加圆滑。徽章主要用于突出显示新的或未读的项。
27、如需使用徽章，只需要把要把添加到链接、添加到链接、Bootstrap Bootstrap 导航等这些元素上导航等这些元素上即可。即可。l设置未读信息数量徽章可使用以下代码：设置未读信息数量徽章可使用以下代码：a=#信息信息 10 10l在按钮中使用徽章可使用以下代码：在按钮中使用徽章可使用以下代码：button class=3class=badge3以下代码可激活状态自动适配色调：以下代码可激活状态自动适配色调：-pills a =#首页首页 2 2 a =#资讯资讯/li l【例【例4-204-20】是一个使用徽章的例子。】是一个使用徽章的例子。Bootstrap基本样式设计l字体图标字体图
28、标Bootstrap Bootstrap 捆绑了捆绑了 200 200 多种字体格式的字形。字体图标是在多种字体格式的字形。字体图标是在 Web Web 项目项目中使用的图标字体。在中使用的图标字体。在BootstrapBootstrap源文件的源文件的 fonts fonts 文件夹内可以找到字文件夹内可以找到字体图标，它包含了下列这些文件：体图标，它包含了下列这些文件：glyphicons-halflings-regular.eotglyphicons-halflings-regular.eotglyphicons-halflings-regular.svgglyphicons-halfl
29、ings-regular.svgglyphicons-halflings-regular.ttfglyphicons-halflings-regular.ttfglyphicons-halflings-regular.woffglyphicons-halflings-regular.woffl相关的相关的 CSS CSS 规则写在规则写在 distdist 文件夹内的文件夹内的 csscss 文件夹内的文件夹内的 bootstrap.css bootstrap.css 和和 bootstrap-min.css bootstrap-min.css 文件上。文件上。l如需使用图标，可通过类似如下的代码调用相关的如需使用图标，可通过类似如下的代码调用相关的classclass即即可可span class=-searchl【例【例4-214-21】给出了若干使用字体图标的】给出了若干使用字体图标的例子例子l如如需使用其他字体图标，可参考以下网址：需使用其他字体图标，可参考以下网址：https:/
