zoukankan      html  css  js  c++  java
  • Bootstrap入门(二)栅格

     

    Bootstrap入门(二)栅格 Bootstrap入门(二)栅格 全局CSS样式--栅格 先引入本地的CSS文件(根据自己的文件夹,有不同的引入地址,我是放在一个新建的名为css的文件夹中) container 容器,栅格系统是依赖容器存在的
    ...
    Bootstrap 提供的栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局。参数: 超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px) 栅格系统行为 总是水平排列 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C .container 最大宽度 None (自动) 750px 970px 1170px 类前缀 .col-xs- .col-sm- .col-md- .col-lg- 代码操作 为方便查看栅格效果,为栅格添加一组样式 复制代码 复制代码 先创建一个class为container的div
    ...
    然后添加13个小栅格 复制代码
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    复制代码 第13个自动换行,确实一行最多12份,效果: 再添加两组div 复制代码
    col-md-3
    col-md-3
    col-md-3
    col-md-3
    col-md-3
    col-md-3
    col-md-3
    复制代码 发现少了的,是不会有任何显示的,效果: 添加其中一个栅格的内容量,发现自动换行,效果: 添加两组带偏移效果的div(“col-md-offset-X”属性 X为将分成12份后,偏移多少的位置) 复制代码        
    col-md-4 col-md-offset-1
    col-md-4 col-md-offset-4
    复制代码 效果: 嵌套使用 复制代码
    col-sm-9
    col-xs-8
    col-xs-4
    复制代码 效果: 列排序(“col-md-push- ”、“col-md-pull- ”属性改变列的排序,“col-md-push- X” 向后移动X个单位,“col-md-pull- X”向前移动X个单位) 复制代码
    col-md-9
    col-md-3
    col-md-9 col-md-push-3
    col-md-3 col-md-pull-9
    复制代码 效果: 此文章转载-转载自:http://www.cnblogs.com/hnnydxgjj/p/5847646.html
  • 相关阅读:
    Attributes in C#
    asp.net C# 时间格式大全
    UVA 10518 How Many Calls?
    UVA 10303 How Many Trees?
    UVA 991 Safe Salutations
    UVA 10862 Connect the Cable Wires
    UVA 10417 Gift Exchanging
    UVA 10229 Modular Fibonacci
    UVA 10079 Pizza Cutting
    UVA 10334 Ray Through Glasses
  • 原文地址:https://www.cnblogs.com/HUANGRONG888/p/6151489.html
Copyright © 2011-2022 走看看