<!DOCTYPE html>

    <html lang="en">

    ...

    </html>

bootstrap页面都应该包含html5声明。

框架：

1.<div class="container"> 固定布局，实现的简单的中央布局的页面，默认为940px宽。

    <body>

    <div class="container">

    ...

    </div>

    </body>

2.<div class="container-fluid">流式布局，提供灵活的页面结构，定义了最小和最大宽度，拥有一个左边栏。很适合做应用和文档。

    <div class="container-fluid">

    <div class="row-fluid">

    <div class="span2">

    <!--Sidebar content-->

    </div>

    <div class="span10">

    <!--Body content-->

    </div>

    </div>

    </div>

3.行的差分

    <div class="row"> 12格基本差分

    <div class="span4">...</div>

    <div class="span8">...</div>

    </div>
    <div class="row">12格带偏移量的差分

    <div class="span4">...</div>

    <div class="span4 offset4">...</div>中间相当于空了4个

    </div>
    <div class="row"> 列的内嵌 只需要在在一个存的的 span 中加入一个row 即可。fluid稍微有点不同

    <div class="span12">

    Level 1 of column

    <div class="row">

    <div class="span6">Level 2</div>

    <div class="span6">Level 2</div>

    </div>

    </div>

    </div>
    <div class="row-fluid">

    <div class="span12">

    Level 1 of column

    <div class="row-fluid">

    <div class="span6">Level 2</div>

    <div class="span6">Level 2</div>

    </div>

    </div>

    </div>

bootstrap基础知识点YI的更多相关文章

  1. <<Bootstrap基础教程>> 新书出手,有心栽花花不开,无心插柳柳成荫

    并非闲的蛋疼,做技术也经常喜欢蛋疼,纠结于各种技术,各种需求变更,还有一个很苦恼的就是UI总是那么不尽人意.前不久自己开源了自己做了多年的仓储项目(开源地址:https://github.com/he ...

  2. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  3. fastclick 源码注解及一些基础知识点

    在移动端,网页上的点击穿透问题导致了非常糟糕的用户体验.那么该如何解决这个问题呢? 问题产生的原因 移动端浏览器的点击事件存在300ms的延迟执行,这个延迟是由于移动端需要通过在这个时间段用户是否两次 ...

  4. .NET基础知识点

    .NET基础知识点   l  .Net平台  .Net FrameWork框架   l  .Net FrameWork框架提供了一个稳定的运行环境,:来保障我们.Net平台正常的运转   l  两种交 ...

  5. Bootstrap <基础三十二>模态框（Modal）插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

  6. Bootstrap <基础三十一>插件概览

    在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...

  7. Bootstrap <基础三十>Well

    Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...

  8. Bootstrap <基础二十九>面板（Panels）

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  9. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

随机推荐

  1. 电脑Win7如何取得文件管理所有权（提供各种GHOST版本的Windows）

    电脑Windows7系统如何取得文件管理所有权?从 VISTA开始,微软对操作系统的安全性有了明显的提高,这样使得以前我们在XP下都可以打开或删除的文件(夹),无法在WIN7下进行操作.就算是在 Ad ...

  2. 强化：把treeview的QString路径转换为QModelIndex节点，有了节点就什么都好办了

    http://doc.qt.io/qt-4.8/qdirmodel.html#index-2 甚至还能直接调用setData: setData(const QModelIndex &index ...

  3. wndows make images

    配置文件/etc/xen/mywindows.内容如下 import os, re arch_libdir = 'lib' arch = os.uname()[4] if os.uname()[0] ...

  4. Android 五大布局（LinearLayout、FrameLayout、AbsoulteLayout、RelativeLayout、TableLayout ）

    前言          欢迎大家我分享和推荐好用的代码段~~ 声明          欢迎转载,但请保留文章原始出处:          CSDN:http://www.csdn.net        ...

  5. 关于android 双击事件

    大家好,关于android双击事件 我相信大家都知道 API中是有个方法的,但是必须在Activity中在能使用. 对于到底用不用android 双击事件API各有各的看法. 在Activity中使用 ...

  6. 基于SMTP协议的CMD命令邮件发送

    网上有不少的这类的文章,以是参照这些文章后,自己实际运行的结果.系统使用的是WIN7 旗舰版. 1.打开CMD命令后,连接到SMTP服务器,如连接到QQ的SMTP服务,输入命令 telnet smtp ...

  7. DataSet - DataTable - DataRow 读取 xml 文件 + 搜索

    DataSet ds = XmlHelper.GetDataSetByXml(AppDomain.CurrentDomain.BaseDirectory + "/Config/ConfigN ...

  8. Java NIO 转载

    原文:http://www.iteye.com/magazines/132-Java-NIO  Java NIO 系列教程 2014-04-28  编辑 wangguo 评论(71条) 有204256 ...

  9. Bootstrap第一天

    1.代码引入: 第一步:在html5文档 <meta name="viewport" content="width=device-width, initial-sc ...

  10. Android 调用webservice faultactor 错误

    1.错误:02-05 09:56:17.266: E/WebServiceUtil(801): --- 内部异常堆栈跟踪的结尾 ---' faultactor: 'null' detail: org. ...