第三篇Bootstrap网格基础

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

网格系统类似一个表格,有行和列,它必须放置在一个类型设置为container的容器里，可以是div,内容放置在列内，网页设计中的网格用于布局内容，让网站易于浏览，下面是一个用bootstrap网格布局的例子。

<div>
<div>col2</div>
<div>col10</div>
</div>

显示效果如下:

加了Class=”row”的样式表示行，加了class=”col-sm-2”的样式表示列，系统将整个屏幕分为12份，col-sm-2表示该列跨2份，col-sm-10比表示该列跨10份。显示的效果就会如上图所示，表示一行两列，第一列占2份，第二列占10份。

bootstrap是一个响应式的前端框架，体现在网格系统中就是对应于不同的显示大小的设备,可以呈现出不同的显示效果。如下所示：

<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-个4</div>
</div>

Col-md-8表示在中等屏幕比如普通台式机和笔记本下该列占8份。Col-xs-12表示在小屏幕比如平板电脑下该列占12份。以上代码表示在普通台式机和笔记本下一行两列，第一列占8份，第二列占4份，在平板电脑下一行两列，第一列占12份，第二列占6份。通过此种方式达到在不同的显示设备上展示不同效果。可以通过调整浏览器的大小来模拟一下这两种情况。

下图表示Bootstrap 的网格系统是如何在多种屏幕设备上工作的

以上所述是小编给大家介绍的第三篇Bootstrap网格基础 的全部叙述，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 第四篇Bootstrap网格系统偏移列和嵌套列

    第四篇Bootstrap网格系统偏移列和嵌套列

    偏移列: 在bootstrap网格系统中我们可以使用偏移列来达到让某列右移的效果,如下所示: <div> <div>col2</div> </div> Class="col-sm-2 col-sm-offset-1"表示该列占两份,并且往右移动一份,看到的效果如下: Col-sm-offset-1表示右移一份.Col-sm-offset-2表示右移两份依次类推.Col-xs类不支持偏移列,但是它可以通过简单的使用一个空的单元格来达到效果.

  • Bootstrap网格系统详解

    Bootstrap网格系统详解

    bootstrap框架中的网格系统就是将容器平分成12份,在使用的时候可以根据实际情况重新编译LESS/SASS源码来修改12这个数值.bootstrap框架的网格系统工作原理: 1.数据行(.row)必须包含在容器(.container)中,以便其赋予合适的对齐方式和内距(padding) <div class="container"> <div class="row"></div> </div> 2.在行(.row

  • 第一次接触神奇的Bootstrap网格系统

    第一次接触神奇的Bootstrap网格系统

    本篇将主要介绍Bootstrap的网格系统. 网格系统的实现是通过定义容器大小,平分12份(或24份.32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统. Bootstrap中的网格系统就是将容器平分成12份. Bootstrap的网格系统用来布局,其实就是列的组合,一共有四种基本的用法: 1.列组合 更改数字来合并列(原则:列总和数不能超12),例如: <!DOCTYPE HTML> <html> <head> <me

  • Bootstrap源码解读网格系统（3）

    源码解读Bootstrap网格系统 工作原理 数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding).如: <div class="container"> <div class="row"></div> </div> .container的实现源码: .container { padding-right: 15px; padding-left: 15px; mar

  • BootStrap3学习笔记(一)之网格系统

    BootStrap3学习笔记(一)之网格系统

    如果显示网格,代码应类似这样: <div class="container"> <div class="row"> <div class="col-md-4"><p>Box 1</p></div> <div class="col-md-4"><p>Box 2</p></div> <div class=&

  • 论Bootstrap3和Foundation5网格系统的异同

    论Bootstrap3和Foundation5网格系统的异同

    Bootstrap和Foundation是我最喜欢的两个前端框架,尤其是在快速开发网站的原型上.它们都提供了随时可用的组件,加快了我的工作流程.除了一些细小差别,在我看来它们大部分的基本特征都是类似. 在这篇文章里,我将介绍它们网格的基本构造.首先,我将会向你展示它们是如何构建的,描述它们的主要部件,以及它们对不同屏幕的大小表现出的差异.然后,我将通过一个真实例子的实践来帮助你增添知识. 让我们一起开始吧! 比较一:媒体查询的比较 在分析Bootstrap和Foundation的栅格结构之前,让

  • 第三篇Bootstrap网格基础

    第三篇Bootstrap网格基础

    Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 网格系统类似一个表格,有行和列,它必须放置在一个类型设置为container的容器里,可以是div,内容放置在列内,网页设计中的网格用于布局内容,让网站易于浏览,下面是一个用bootstrap网格布局的例子. <div> <div>col2</div> <div>col10</div> </div>

  • ASP基础入门第三篇(ASP脚本基础)

    下面就先请大家跟我来学习一些ASP 中应用脚本语言(以VBScript 为主)的基础知识. 在开始学习脚本语言之前,你应该理解一些简单的概念 -- 变量.进程.所谓变量是计算机内存中已命名的存储位置,其中包含了数字或字符串等数据,它使用户便于理解脚本操作的名称,为用户提供了一种存储.检索和操作数据的途径.程序是由一个或多个进程组成的,在 VBScript 中,进程就是"指令块",通常意义上的进程,如 Sub,只是为了简单的数据处理. 在 VBScript 中,严格的来讲变量是不用声明的

  • Bootstrap零基础入门教程(三)

    Bootstrap零基础入门教程(三)

    什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 写到这里,这篇从零开始学Bootstrap(3)我想写以下几个内容: 1. 基于我对Bootstrap的理解,做一个小小的总结.

  • 第七篇Bootstrap表单布局实例代码详解(三种表单布局)

    第七篇Bootstrap表单布局实例代码详解(三种表单布局)

    Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单.下面逐一给大家介绍,有兴趣的朋友一起学习吧. 创建垂直或基本表单: •·向父 <form> 元素添加 role="form". •·把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的. •·向所有的文本元素 <input>.<textarea> 和 <select> 添加 class .form-cont

  • Java基础第三篇 构造器与方法重载

    目录 1.定义构造器 2.初始化方法的优先级 3.方法重载 4.总结 在方法与数据成员中,我们提到,Java中的对象在创建的时候会初始化(initialization).初始化时,对象的数据成员被赋予初始值.我们可以显式初始化.如果我们没有给数据成员赋予初始值,数据成员会根据其类型采用默认初始值.显式初始化要求我们在写程序时就确定初始值,这有时很不方便.我们可以使用构造器(constructor)来初始化对象.构造器可以初始化数据成员,还可以规定特定的操作.这些操作会在创建对象时自动执行 1.定

  • 详解Bootstrap网格垂直和水平对齐方式

    详解Bootstrap网格垂直和水平对齐方式

    目录 1.Bootstrap网格布局 2.垂直对齐 2.1 row标签中设置垂直对齐 2.2 col标签中设置垂直对齐 3.水平对齐 3.1 row标签中设置垂直对齐 1.Bootstrap网格布局 上一节我们介绍了Bootstrap中的网格,网格在网页布局中是一个重点和难点,布局是网页设计的起点和基础,一定要花功夫弄懂,最起码把我写的教程介绍的内容弄懂,因为我写的都是最常用的和最基础的.当然对于一个有一定基础的网页设计师,这些内容相信一看就懂,今天我们进一步学习网格布局. 本节内容涉及到通用类

  • 第二篇Bootstrap起步

    第二篇Bootstrap起步

    在上篇文章给大家介绍了Bootstrap的基础知识,接下来通过本文给大家介绍 我们可以在http://getbootstrap.com下载bootstrap的文件 点击左边的download bootstrap可以下载bootstrap的css,javascript和字体库的已编译版本.点击中间的download source可以下载bootstrap的源代码.一般情况下我们使用bootstrap点击左边的已编译版本下载就可以了. 如果下载的是已编译版结构是: 如果下载的是源代码结构是: Dis

  • BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)

    BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)

    时钟 最简单的时钟制作办法是通过正则表达式的exec()方法,将时间对象的字符串中的时间部分截取出来,使用定时器刷新即可 <div id="myDiv"></div> <script> myDiv.innerHTML = /\d\d:\d\d:\d\d/.exec(new Date().toString())[0]; setInterval(function(){ myDiv.innerHTML = /\d\d:\d\d:\d\d/.exec(new

  • Bootstrap零基础入门教程(二)

    Bootstrap零基础入门教程(二)

    什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 本文重点给大家介绍Bootstrap零基础入门教程(二),具体详情如下所示: 过程中会频繁查阅资料的网站: http://www.

随机推荐