Bootstrap 笔记一.栅格布局

一.概述

1-1. 概述 / 优点

• bootstrap 是基于HTML、CSS、JS的一个CSS/HTML框架
• bootstrap 是基于HTML5、CSS3开发的，兼容JQuery
• 非常好的响应式布局
• JQuery插件的支持
• 全新自定义选项
• 丰富的组件
• 改进工具提示
• 支持HTML5、CSS3
• 对LESS和SASS的支持

1-2. 整体组织架构

• 栅格系统
• 尺寸和状态样式
• 嵌套子元素
• 基础样式和颜色样式
• 动画样式
• 特殊和并列元素样式

1-3. 引入bootstrap的 css样式/js/font

 

<link rel="stylesheet"type="text/css" href="bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>

 

 

 

 

---

二.栅格系统(12列)

2-1. 概念解释

• 以规则的网络阵列来定义和规范网页中的版面布局以及信息布局
• 注意：bootstrap内置响应式、移动设备优先的流式栅格系统

2-2. 栅格系统规则

• 数据行包含在 container 这个容器中 （父容器），调试内外编剧 / 对齐方式 ...
• 行 row，可多个 ，默认有12列
• 具体内容放在列元素之内，列元素是row元素的直接子元素
• col-md-n 表示占位的大小
• clo-md-offset-n 表示偏移的距离
• 嵌套 row 放到 col-md-n 中
• clo-md-push-n 控制元素向右移动
• clo-md-pull-n 控制元素向左移动

<div class="container">
    <div class="row">
            <div class="col-md-1">1</div>
            <div class="col-md-2">2</div>
            <div class="col-md-3">3</div>
    </div>
    <div class="row">
            <div class="col-md-3 clo-md-offset-5">1</div>
    </div>
    //...
</div>

 

2-3. 栅格参数

• .col-xs- 超小屏幕 手机 (<768px)
• .col-sm- 小屏幕 平板 (≥768px)
• .col-md- 中等屏幕 桌面显示器 (≥992px)
• .col-lg- 大屏幕 大桌面显示器 (≥1200px)

响应式高端操作

<div class="container">
    <div class="row">
            <div class="col-sm-4 col-md-8">1</div>
            <div class="col-sm-8 col-md-4">2</div>
    </div>
    <div class="row">
            
    </div>
    //...
</div>