2, Bootstrap 网格系统

CSS 概述

Html5 文档类型

移动设备优先

添加 viewport meta 标签 ,确保网页支持适当的绘制和触屏缩放

<!-- 可添加 user-scalable=no 禁用缩放 -->
<!-- maximum-scale=1.0 和 user-scalable=no 共用后，只能滚动屏幕 -->
<meta name="viewport" content='width=device-width,initial-scale=1.0'

响应式图像

<img src="..." class='img-responsive' alt='响应式图像'>

全局显示、排版和链接

全局显示

body: 字体，字体大小，行高度，文本颜色，背景颜色 font-family,font-size,line-height,color,background-color

排版

使用 @font-family-base、@font-size-base、和 @line-height-base 属性作为排版样式。

链接样式

使用 @link-color 设置全局链接的颜色

避免跨浏览器不一致

使用 Normalize建立跨浏览器的一致性。 Normalize.css

容器( Container )

Bootstrap 网格系统

网格系统

Bootstrap 3 和 Bootstrap 4 最大的区别 在于 Bootstrap 4 使用的是 flexbox(弹性盒子) 而不是 浮动

列类 定制各尺寸设备

.col-xs-   .col-sm-   .col-md-   .col-lg-
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
   4       4        4     4
   4              8
        6              6
                12

小型设备 col6 x 2
中型设备 col4 x 3
大型设备 col3 * 4
分别添加清除浮动 在线例子

6     4
6     4
<div class="clearfix visible-sm-block"></div>
6     4
 <div class="clearfix visible-md-block"></div>

container

两种类型的容器类：

• .container class
  
  • 创建一个固定宽度的容器，其样式显示在
• .container-fluid class
  • 全宽度流体容器

网格列

• 嵌套列
  div.container>div.row>div.col-md-6>(div.col-md-6)*2^+div.col-md-6
• 偏移列
  col-xs-offset-*
• push pull
  col-xs-push-* col-xs-pull-*

动态布局

• 台式机的设计

  div.row>div.col-md-12^+div.row>(div.col-md-4)*3
  

• 平板电脑的设计
  
  平板可以以两种格式查看：纵向和横向。
  
  横向是为中等大小的显示，纵向是为小尺寸的显示。 col-md-* col-sm-*

  div.row>(div.col-md-4.col-sm-6>h3{Post Title n }+p{some words)*6
  

  • 手机的设计
    
    移动设备的横向视图使用 col-sm-*,纵向视图使用col-xs-*

Bootstrap 实用类

元素可见性 .visible - * - *

屏幕尺寸在特定范围内元素可见

.visible-xs|sm|md|lg-inline|block|inline-block

元素隐藏

屏幕尺寸在特定范围内元素隐藏

显示/隐藏打印

描述	描述
.visble-print-block	隐藏浏览器呈现的块元素，打印时可见
.visble-print-inline	隐藏浏览器呈现的内嵌元素，打印时可见
.visble-print-inline-block	隐藏浏览器呈现的inline-block元素，打印时可见
.hidden-print	在浏览器显示的元素，打印时隐藏