bootstrap基本布局

中文API
bootstrap.cn
 
HTML5文档 类型
 
移动设备优先
width 属性控制设备的宽度。设置为 device-width 确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。
在移动设备浏览器上,通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放(zooming)功能。
通常情况下,maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
 
布局容器
.container 类用于固定宽度并支持响应式布局的容器
<div  class="container"></div>
 
.container-fluid 类用于100%宽度,占据全部视口的容器
<div  class="container-fluid"></div>
 
栅格系统
 
栅格系统通过行(row)与列(column)组合页面布局
行(row)必须在容器.container或。container-fluid中.
栅格系统中的列是通过指定1到12的值来表示范围
 
超小屏幕(<768px) .col-xs-列
小屏幕(>=768px).col-sm-列
中等屏幕(>=992px).col-md-列
大屏幕(>=1200px).col-lg-列
            <div  class="container main">
                  <div  class="row">
                        <!--小屏幕两列。中等屏幕四列-->
                        <div  class="col-md-3 col-sm-6">
                              col-md-3 col-sm-6
                        </div>
                        <div  class="col-md-3 col-sm-6">
                              col-md-3 col-sm-6
                        </div>
                        <div  class="col-md-3 col-sm-6">
                              col-md-3 col-sm-6
                        </div>
                        <div  class="col-md-3 col-sm-6">
                              col-md-3 col-sm-6
                        </div>
                  </div>
            </div>
列偏移
 .col-md-offset-* 类。这些类会把一个列的左外边距(margin)增加 * 列,其中 *范围是从 1 到 11。
列排序
.col-md-push-*和.col-md-pull-*
 
显示或隐藏
.show和hidden类可以强制任意元素显示或隐藏
 
响应式隐藏或显示
 
显示
超小屏幕(<768).visible-xs-*  
小屏幕(>=768).visible-sm-*
中等屏幕(>=992).visible-md-*
大屏幕(>=1200).visible-lg-*
 
.visible-*-*类有三种变体,每个针对CSS中不同的display
.visible-*-block
.visible-*-inline
.visible-*-inline-block
 
隐藏
超小屏幕(<768).hidden-xs
小屏幕(>=768).hidden-sm
中等屏幕(>=992).hidden-md
大屏幕(>=1200).hidden-lg
 
 
 
 
快速浮动
任意元素向左或者向右浮动
.pull-left和pull-right
 
<div  class="pull-left"></div><div class="pull-right"></div>
不能用于导航条组件中
导航条使用.navbar-left或.navbar-right
<ul  class="nav navbar-nav navbar-left"></ul><ul class="nav navbar-nav navbar-right"></ul>
 
水平居中
.center-block
 
清除浮动
.clearfix
 

转载于:https://www.cnblogs.com/54meng/p/7872385.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值