Bootstrap知识点概述

HTML5文档类型


Bootstrap 使用的某些HTML元素与CSS属性都需要文档声明是HTML5文档类型。

移动设备优先


Bootstrap 是移动设备优先的,对移动设备的样式融入到了框架的方方面面。 
为确保绘制和缩放效果,要在<head>标签中添加 viewport 元数据标签。

<meta name="viewport" content="width=device-width,initial-scale=1">

移动设备浏览器上,为视口设置meta属性为user-scalable=no可以禁止用户缩放。

容器


容器有两种:流体容器(container-fluid) 和固体容器 (container) 
两种容器之间不能相互嵌套。 
固体容器固定宽度并且支持响应式,有三个阈值,在不同尺寸视窗下显示不同的固定宽度。

将最外面的布局div class改为 .container-fluid,就可以将容器设置为流体容器,宽度为100%。

栅格系统


栅格系统通过行(row)与列(column)来进行页面的布局。

行必须包含在 容器 中.

行在水平方向创建一组列,每一行将页面宽等均的分为12列。

页面内容要放在列中,并且只有列可以作为行的直接子元素。

为列 设置 padding 属性,可以为列与列之间设置间距,为 row 设置负值 margin ,抵消为容器设置的 padding 间接为行抵消了 padding 。

如果一行中包含的列大于12,多余的列会另起一行。

在没有给大屏幕设置栅格类的情况下,小屏幕的栅格类可以在大屏幕下起作用。 
栅格系统对不同尺寸屏幕有不用的前缀

从小到大是兼容的,但是大分辨率在小分辨率下是会从水平排列变垂直排列

列偏移: .col-xx-offset-x ,列会向右偏移设定的多少列。

列排序:.col-md-push-* 和 .col-md-pull-*类可以很容易的改变列的顺序。

排版


除了标题标签<h1><h6>之外,还提供了.h1 到

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值