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