学习笔记bootstrap--整体架构

Posted 2020-06-26

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习笔记bootstrap--整体架构相关的知识，希望对你有一定的参考价值。

使用Bootstrap框架的最基本html代码,可以在此基础上进行自己的扩展,只需要确保文件引用顺序一致即可。HTML标准模板如下:

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

      <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <h1>Hello, world!</h1>
      <!-- jQuery (Bootstrap 的 javascript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

bootstrap整体架构图

技术分享

栅格系统：

通过定义容器大小, 平分12份,再调整内外边距,最后再结合媒体查询,就制作出了强大的响应式的栅格系统。Bootstrap默认的栅格系统平分为12 份,在使用的时候大家也可以根据情况通过重新编译LESS源码来修改12这个数值。

技术分享

主要工作原理：

一行数据(row)必须包含在.container中,以便为其赋予合适的对齐方式和内边距(padding)。
使用行(row)在水平方向创建一组列(column) 。
具体内容应当放置于列(column)内,而且只有列(column)可以作为行(row)的直接子元素。

内置一大堆样式,可以使用像.row和.col-xs-4(占4列宽度)这样的样式来快速创建栅格布局。
通过设置padding从而创建列(column)之间的间隔。然后通过为第一列和最后一列设置负值的margin从而抵消掉 padding的影响。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围的。例如,要让屏幕分为3个等宽的部分,可以使用3个.col- xs-4来创建。

技术分享

2号横条,也就是row容器的定义,在row的CSS的定义里,将margin-left和margin-right都定义为-15px(源码810 行),组合row和列以后,就会形成3号横条的效果。

对于4号横条,主要是想表达12个列可以自由组合,可以用完12个,也可以只用一部分,只要符合“col-md-数字”的规则就可以(md是中型屏幕的样式,后面会讲到其他3种形式)

.container样式的源码 ：

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}
@media (min-width: 768px) {
   .container { width: 750px;    /*小型屏幕时，container样式的宽度*/}
}
@media (min-width: 992px) {
   .container { width: 970px;    /*中型屏幕时，container样式的宽度，缩小min-width范          围*/}
}
@media (min-width: 1200px) {
   .container { width: 1170px;    /*大型屏幕时，container样式的宽度，再次缩小min-width范围*/}
}

如果想让row充满全屏100%显示,那就不能用 container样式了,因为container样式针对4个不同的屏幕大小固定了尺寸。这样,就得自己定义一个100%的样式,但是要注意的就是:别忘记修复-15px的外边距(即设置15px的左右 padding值)。

基本用法：

1）列组合

技术分享

如图

技术分享

2）列偏移

有的时候,我们不想让两个相邻的列挨在一起,这时候利用栅格系统的列偏移(offset)功能来实现,而不必再定义margin值。

使用.col-md-offset-*形式的样式就可以将列偏移到右侧。例如,.col-md-offset-4可将.col-md-4向右移动4个列的宽度。

技术分享

如图

技术分享

3）列嵌套

内部所嵌套的row的宽度为100% 时,就是当前外部列的宽度。

技术分享

如图

技术分享

4）列排序

列排序其实就是改变列的方向,也就是改变左右浮动,并且设置浮动的距离。在栅格系统里,可以通过.col-md-push-* 和.col-md-pull-*来实现这一目的

响应式栅格

Bootstrap为不同的屏幕尺寸(4种类型)提供了不同的栅格样式,

包括超小(xs)、小型(sm)、中型（md）、大型 (lg),所以组合起来样式很多,可以是.col-xs-1,也可以是.col-sm-offset-2,还可以是.col-lg-push-1或者.col-lg- pull-1。

技术分享

1)跨设备组合定义

可以在一个元素上应用不同类型的样式,以适配不同尺寸的屏幕。

技术分享

在中型屏幕里：

技术分享

在小型屏幕里：

技术分享

所以可以在一个div上分别应用xs、sm、md、lg类型的样式,以便在所有的设备上都能进行正常浏览。

2）清除浮动问题

利用clearfix样式清除浮动,但是前提条件是在超小型屏幕上能显示才行(因为其是用visible-xs样式控制的

使用如下：

技术分享

3）列偏移和列排序

由于响应式设计是利用了媒体查询的特性,而所有以col-*开头的样式都是在媒体查询里定义的,所以像列偏移(offset)、列排序(pull和push)相关的样式也都可以用,

如下：

技术分享

CSS组件架构的设计思想

CSS的特性可理解为不同名的样式可以叠加在一起使用;同名的样式,后面的会覆盖前面的,从而达到组合应用的效果。

CSS组件可分为8中基本类型：

技术分享

1）基础样式

任何一个CSS组件在刚开始都要先定义基本样式,

一般是定义该样式下的字体(font-)、外内边距 (padding,margin)、显示方式(display)、边框 (border)以及其他相关的内容。

2）颜色样式

Bootstrap默认为很多组件都提供了5种颜色的样式,这5种颜色分别是:primary(重点蓝)、success(成功绿)、info(信息蓝)、warning(警告橙)、danger(危险红)。定义规则是:组件名称-颜色类型,如btn-primary、 alert-info。

3）尺寸样式

一般组件都有4种尺寸:超小(xs)、小型(sm)、普通、大型 (lg)

调整尺寸主要是调整所对应元素的padding和圆角设置,有时候也会相应调整行间距和字体大小。

4）状态样式

有一些可单击元素,经常需要根据状态来显示其效果,比如高亮可用的时候用active样式,禁用的时候用disabled样式或 disabled属性。

这种类型的样式一般是处理元素的阴影、鼠标形状、透明度、虚框等方面的内容。

5）特殊元素样式

所谓特殊元素,即特定类型的组件一般只使用某一种或者几种固定的元素,比如alert警告框内一般只用警告标题、内容和关闭链接元素,再如导航(nav)里的经常用的li元素。在定义这些组件的时候,也要为这些常用的元素定义其相关的默认样式。

6)并列元素样式

一般来说,只需要考虑两方面即可:其一水平并列时候的左右内边距(padding-left、padding-right)和外边距 (margin-left、margin-right);其二:垂直并列时的上下内边距(padding-top、padding-bottom)和外边距(margin- top、margin-bottom) 。

7)嵌套子元素样式

8)动画样式

只需要在progress样式上应用一个active样式,即可开启动画过渡效果。

JavaScript插件架构