第8章 Bootstrap的全局样式.pptx

栅格系统1页面版式2表格3按钮4表单5图片6第8章Bootstrap的全局样式应用案例7小结8

8.1栅格系统栅格系统（GridSystem）主要用于页面布局栅格是由一系列相交的直线（垂直的、水平的）组成的格子用来承载网页的内容

8.1栅格系统8.1.1栅格系统的原理栅格系统使用的类.container类和.container-fluid类容器类.row类行类.col-[screenStyle]-[percent]类列类，使用组合类名，来定义栅格行中的一个具体栅格

8.1栅格系统8.1.1栅格系统的原理栅格系统的工作规则。行必须放置在.container类或.container-fluid类内使用行（.row类）来创建列（.col-[screenStyle]-[percent]类）的水平组。页面元素应该放置在列内，且唯有列可以是行的直接子元素预定义的栅格类，例如.row、.col-xs-4、.col-sm-3等，用于快速创建栅格布局列通过内边距（padding）来创建列内容之间的间隙栅格系统是通过指定横跨12个可用的列来创建的

8.1栅格系统8.1.2栅格系统的类及相关参数

8.1栅格系统8.1.2栅格系统的类及相关参数demo0801.htmldemo0802.html

8.1栅格系统8.1.2栅格系统的类及相关参数demo0803.htmldemo0804.html

8.1栅格系统8.1.3用栅格实现的响应式布局demo0804.html视口尺寸在992~1200px时的效果视口尺寸小于768px时的效果

8.2页面版式8.2.1标题重新定义h1~h6标题（Headings）的样式定义.h1~.h6的标题类在标题中使用small标记或者.small类，可以设置副标题

8.2页面版式8.2.2列表实现了列表（Lists）的增强样式无序列表、有序列表、自定义列表等列表元素的使用方式和HTML5中使用列表的方式相同在页面版式方面，还提供了abbr元素（缩略语）、address元素（地址）、blockquote元素（引用）的增强效果重新定义了mark、strong、del、em等内联文本元素

8.3表格优化了表格（Table）的样式，通过一些表格类，增强了表格的显示效果? .table类，为表格添加基本样式（横向分隔线）.table-striped类，在tbody元素内添加斑马线形式的条纹.table-bordered类，为表格的单元格定义边框样式.table-hover类，在tbody元素内的任一行启用鼠标悬停状态

8.4按钮优化了按钮（Button）的格式，提供如下样式类：.btn类，为按钮添加基本样式。.btn-default类，默认/标准按钮。.btn-primary类，原始按钮样式（未被操作）。.btn-success类，表示成功的按钮。.btn-info类，表示用于弹出信息的按钮。.btn-warning类，表示需要谨慎操作的按钮。.btn-danger类，表示危险动作的按钮.btn-lg、.btn-sm、.btn-xs等类

8.5表单通过一些HTML标记和扩展类可以创建出不同样式的表单（Form）。创建表单的步骤把表单元素放在一个用.form-group类描述的div中，这样可以获取最佳的元素间距可以向所有input元素、textarea元素、select元素添加.form-control类创建垂直表单创建内联表单

8.6图片为图片添加.img-responsive类可以让图片支持响应式布局。下面的类让图片呈现不同的形状.img-rounded类，添加border-radius:6px来获得圆角图片.img-circle类，添加border-radius:50%来让整个图片变成圆形.img-thumbnail类，添加内边距（padding）和一个灰色的边框

8.7应用案例利用Bootstrap的全局CSS样式使用栅格系统、表单、图片等元素一个响应式表单的效果

小结栅格系统主要使用.container类、.container-fluid类、.row类、.col-[screenStyle]-[percent]类来创建页面布局。标题（Headings）和列表（Lists）两种页面版式表格相关类和按钮相关类表单（Form）部分，主要学习了.form-group类、.form-control类、.form-inline类。Bootstrap的图片添加.img-responsive类可以让图片支持响应式布局。Bootstrap还通过为img元素添加.img-rounded类、.img-circle、.img-thumbnail类，让图