BootStrap3.0学习--全局 CSS 样式

最新推荐文章于 2021-04-02 18:25:37 发布

ice_baili

最新推荐文章于 2021-04-02 18:25:37 发布

阅读量1.3k

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/wj2014/article/details/42146821

版权

本文介绍了BootStrap3.0的全局CSS样式，包括HTML5文档类型、移动设备优先策略，重点讲解了Bootstrap的响应式栅格系统，以及布局容器、排版、代码、表格、表单、按钮、图片和辅助类的使用方法，帮助开发者创建适应各种设备的网页布局。

摘要由CSDN通过智能技术生成

设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。

<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>

Bootstrap是移动设备优先哒

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

1.为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。

2.width=device-width告诉浏览器页面的宽度应该等于设备的宽度

3.initial-scale=1页面将是原本尺寸展示，如果后面是2.0的话，就是是将页面放大两倍

4.maximum-scale=1最大放大至原先大小

5.user-scalable=no可以禁用其缩放（zooming）功能。

容器类为包裹页面内容和栅格系统哒。由于 padding等属性的原因，以下两种容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

相应式的网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

工作原理

行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。
内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
通过为“列”设置 padding 属性，从而创建列与列之间的间隔。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行”所包含的“列”抵消掉了padding。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
`.container` 最大宽度	自动	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是