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
  • 相关阅读:
    hdu 5119 Happy Matt Friends
    hdu 5128 The E-pang Palace
    hdu 5131 Song Jiang's rank list
    hdu 5135 Little Zu Chongzhi's Triangles
    hdu 5137 How Many Maos Does the Guanxi Worth
    hdu 5122 K.Bro Sorting
    Human Gene Functions
    Palindrome(最长公共子序列)
    A Simple problem
    Alignment ( 最长上升(下降)子序列 )
  • 原文地址:https://www.cnblogs.com/nield-bky/p/6147181.html
Copyright © 2011-2022 走看看