中文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
 

bootstrap基本布局的更多相关文章

  1. Bootstrap页面布局3 - BS布局以及流动布局

    1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示 ...

  2. Bootstrap 可视化布局--拖拽后弹窗进行编辑

    Bootstrap 可视化布局--拖拽后弹窗进行编辑 最近后台想一个需求,使用可视化布局-中文 | en中拖拽表格后,弹窗进行编辑,保存下载后在后台生成pdf格式. 奈何各种问题不断,使用 jquer ...

  3. 使用BootStrap网格布局进行一次演示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. bootstrap栅格布局-v客学院知识分享

    今天主要跟大家讲解下bootstrap的栅格布局,以及使用过程中应该注意的问题 首先我们要使用bootstrp的栅格布局就必须使用HTML正确的基本结构 如下图: 必须给要使用栅格布局的盒子定义cla ...

  5. 实现 Bootstrap 基本布局

    看到了一篇 20 分钟打造 Bootstrap 站点的文章,内容有点老,重新使用 Bootstrap3 实现一下,将涉及的内容也尽可能详细说明. 1. 创建基本的页面 我们先创建一个基本的 HTML ...

  6. [前端]分享一个Bootstrap可视化布局的网站

    如果你像我一样:是个前端渣,能看懂css和html,略懂Bootstarp,懒! 当你每次都想独立完成一个web页面而不知道从哪里下手的时候,那么下面的这个网站,就是你所以需要的! http://ww ...

  7. BootStrap网格布局

    如何使用BootStrap样式 BootStrap与其他的开源库类似,直接引用它的css样式文件就可以使用了. <link rel="stylesheet" href=&qu ...

  8. Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

    代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...

  9. Bootstrap页面布局2 - 包含BS文件

    如图所示: bootstrap布局基于HTML5,为了使IE8以下也能使用某些HTML5的标签,必须要引入文件:http://html5shiv.googlecode.com/svn/trunk/ht ...

  10. bootstrap学习笔记<八>(bootstrap核心布局风格——栅格系统)

    栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...

随机推荐

  1. 【翻译自mos文章】oracle db 中的用户账户被锁--查看oracle用户的尝试次数

    參考原文: Users Accounts Getting Locked. (Doc ID 791037.1) 事实上这个文章是为oracle 别的软件产品写的,只是涉及到user 锁定问题.那还是跟d ...

  2. OutputStream和InputStream的区别 + 实现java序列化

    我们所说的流,都是针对内存说的,比如为什么打印到屏幕上就是System.out.println();而从屏幕等待用户输入的却是System.in呢?因为对于内存来说,把字符串打印到屏幕上是从内存流向屏 ...

  3. HDU1540 Tunnel Warfare —— 线段树 区间合并

    题目链接:https://vjudge.net/problem/HDU-1540 uring the War of Resistance Against Japan, tunnel warfare w ...

  4. 【Idea】Debug模式

    Idea则是把手标放到你想显示结果的代码上,按Ctrl+F1就显示结果. 如果你想跳到下一个断点直接按F9

  5. SDK介绍

    软件开发工具包(外语首字母缩写:SDK.外语全称:Software Development Kit)一般都是一些软件工程师为特定的软件包.软件框架.硬件平台.操作系统等建立应用软件时的开发工具的集合. ...

  6. adb devices 不识别显示为空(转载)

    转自: http://yinger-fei.iteye.com/blog/1530118 在 android 设备的 Linux 内核中把 USB 驱动的 PID VID 修改以后,也许之前的 adb ...

  7. E20170524-gg

    Awesome   adj. 可怕的; 令人敬畏的; 使人畏惧的; 极好的;

  8. IE6 浏览器常见兼容问题 大汇总(23个)[转载]

    IE6以及各个浏览器常见兼容问题 大汇总 综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼 ...

  9. (11)用css设计电子相册 {上}

    本篇学习资料讲解:       通过css对电子相册进行排版 和 侧面强调“盒子模型.标准流.浮动和定位”的重要性. 先来看看"双向联动模式"的电子相册图: {鼠标指针经过某张图片 ...

  10. RabbitMQ学习之HelloWorld(1)

    RabbitMQ就是一个消息代理(message broker),可以用来接收和发送消息. 消息队列有一些黑话,我们来看下: Producer : 发送message的程序 Queue : 可以用来存 ...