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 危险红
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值