bootstrap简介

2021/01/11

bootstrap

<!-- [if lt IE 9]>
条件注释
	1.固定写法不一样
	2.浏览器 满足一定条件 注释里的代码 就会执行
	lt less than 小于               【 if lt IE9 含义：ie9以下 代码就会被执行】
	gt greater than 大于
<[end if]-->

<!-- 普通注释-->

• html5shiv.js （实现html5语义化标签的兼容）
  • html5垫片 低版本的ie如何 兼容 html5的语义化标签
    • 先通过js 主动创建一遍 这个标签
    • 再通过css 来自己加块级 来设置这个标签的 块级特性 display：block
• respond.js
  • 让低版本ie浏览器 识别 媒体查询的代码

栅格系统

• 他是bootstrap框架实现 响应式布局 的关键
• 将 屏幕宽度 按照宽的分类 分成 4种 ，不管哪一种屏幕 1行12列
  1. 大屏幕lg 大于1200px 大桌面显示器
  2. 中等屏幕md 992-1200px 桌面显示器
  3. 小屏幕sm 768-992px 平板
  4. 极小屏幕xs 小于768px 手机
• 使用栅格系统的步骤
  1. 定版心 （1版心 container 2全屏 container-fluid） 【定死】
  2. 定行 .row 【定死】
  3. 按照自己需求 制定 在哪种屏幕下 一列占几份
  4. 超过12列 往下掉 （float:left）本质是浮动
  5. 默认情况
     1. 较大屏幕 沿用较小屏幕的 划分份数 的设置
     2. 设置大屏幕下的几列占几份 比他小的屏幕几列几份会失效【不会沿用大屏幕设置】
     3. 建议 初学者 把每个屏幕怎么放 都思考好
  6. 列嵌套
     1. row里面可以继续嵌套row
     2. 为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）
  7. 列偏移
     1. 使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-1 类将 .col-md-4 元素向右侧偏移了1个列（column）的宽度。 （占了5份）
  8. 内置好用的class
     1. 文本对齐 text-center
     2. 块级元素水平居中 center-block
     3. 浮动 pull-float
     4. 清除浮动 clearfix
     5. 隐藏 hidden
     6. 显示 show
     7. 颜色 bg- text- btn-
        1. primary 主要蓝
        2. warning 警告橙
        3. success 成功绿
        4. info 信息蓝
        5. danger 危险红