手记

《深入理解Bootstrap》学习笔记(三)

第二章 整体架构
——2.1 整体架构
——2.2 栅格系统
——2.3 CSS组件架构的设计思想
——2.4 JavaScript插件架构
——2.5 禁止响应式布局

这章内容主要讲的是bootstrap的整体设计思想,个人认为译者在本章开始的那段解释很好,因为这一章节是总结性内容,是对第三~五章的内容的一次总结,已经涉及到后续的内容,不明白作者为什么把这章放在这里,所以如果之前没有接触过bootstrap的话,就跳过学完第三~五章后再看这一章。
2.1 整体架构
整体架构六大部分:12栅格系统 基础布局组件 jQuery 响应式设计 CSS组件 JavaScript插件
2.2 栅格系统
将容器平分12分,在容器内完成列组合、列偏移、列嵌套、列排序的操作并区分4种不同尺寸大小的浏览器进行响应式设计。以下为栅格系统包含的类:
.container:定义容器,根据浏览器超小屏(<768px)小屏(>=768px,<992px)中屏(>=992px,<1220px)大屏(>=1220px)定义class为container的容器宽度为自动、750px、970px、1170px。
.container-fluid:响应式布局定义容器宽度,宽度随浏览器大小而改变。
.row:行,为栅格系统容器和列设置合适的对齐方式和内边距。其直接子元素只有列。
.col-xs- /.col-sm- /.col-md- /.col-lg-:列组合,根据浏览器大小分为四种形式,可以针对不同的浏览器改变宽度,所以可以为一个元素加上所有的列组合设计成响应式布局。其属性全都是左浮动(float:left),和根据列数设定的宽度百分比(width:数值%)。
.col-xs-offset- /.col-sm-offset- /.col-md-offset- /.col-lg-offset-:列偏移,与列组合配合设定偏移宽度,其属性全都是margin-left:数值%。
.col-xs-pull- / .col-sm-pull- / .col-md-pull- /.col-lg-pull-
.col-xs-push- / .col-sm-push- / .col-md-push- /.col-lg-push- :列排序,和列组合配合,设定列的左右移动,以及移动宽度。因为所有的列组合都是左浮动,所以列排序的属性分别对应向左偏移(left:数值%)和向右偏移(right:数值%)。
.clearfix:清除浮动,与.visible-xs/.visible-sm/.visible-md/.visibe-lg配和清除浮动。
2.3 CSS组件架构的设计思想
CSS组件8大类型样式:基础样式、颜色样式、尺寸样式、状态样式、特殊元素样式、并列元素样式、嵌套子元素样式、动画样式。
基础样式:定义CSS组件名称。
颜色样式:bootstrap很多组件都有5中颜色样式:重点蓝(primary)、成功绿(success)、信息蓝(info)、警告橙(warning)、危险红(danger)。定义规则:组件名称-颜色类型。
尺寸样式:一般分为四种 超小(xs)、小型(sm)、普通(md)、大型(lg)
状态样式:active、disabled等,分别定义了其对应的CSS样式。
特定元素:特定类型组件中的一种或几种固定元素样式。
2.4 JavaScript插件结构
bootstrap中插件的调用可以有两种方法:html布局规则和js代码调用。
2.5 禁止响应式布局
步骤:
1 删除名称为viewpot的<mate>标签
2 为container设定固定宽度值
3 移除导航条组件的折叠展开行为
4 为栅格布局额外添加col-xs-*样式

7人推荐
随时随地看视频
慕课网APP

热门评论

http://img.mukewang.com/5785ec9b0001668b28801620.jpg



可以这很屁股 <script>document.write("哎呦不错");</script>

哎哟不错

<script>document.write("哎呦不错");</script>

查看全部评论