我的编程空间,编程开发者的网络收藏夹
学习永远不晚

bootstrap3.0中栅格系统原理是怎样的

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

bootstrap3.0中栅格系统原理是怎样的

这篇文章给大家介绍bootstrap3.0中栅格系统原理是怎样的,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

栅格系统(布局)

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。

我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理:

行(row)必须包含在.container中,以便为其赋予合适的排列(aligment)和内补(padding)。使用行(row)在水平方向创建一组列(cpumn)。你的内容应当放置于列(cpumn)内,而且,只有列(cpumn)可以作为行(row)的直接子元素。类似Predefined grid classes like .row and .cp-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。通过设置padding从而创建列(cpumn)之间的间隔(gutter)。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个.cp-xs-4来创建。

DW6编码实现

Okay勒,下面开始写代码了额。首先上一张图看看我使用的编辑器,之前在学校学习Html+CSS的时候使用较多的工具。

bootstrap3.0中栅格系统原理是怎样的

然后新建一个HTML文档,选择类型HTML5

bootstrap3.0中栅格系统原理是怎样的

创建好后,另存为与上一节的讲解中js、css文件夹的同一目录下。

bootstrap3.0中栅格系统原理是怎样的

layout.html就是我刚刚创建的文件。Bootstrap.html也是上一节中创建的第一个html页面。

现在可以将Bootstrap.html中的代码全部Copy到layout.html页面。

然后在body标签下添加如下代码

代码如下:


<h2>Hello, world!</h2>
<h3class="page-header">区域一</h3>
<p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p>
<h3class="page-header">区域二</h3>
<p>IfyouworkwithBootstrap'suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter'sCSShinterbasedonless.js.</p>
<h3class="page-header">区域三</h3>
<p>Withinthedownloadyou'llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>



这几个标签大家应该都能看的明白,最基础最简单的。

添加完后layout.html页面所有代码如下

代码如下:


<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<!--Bootstrap-->
<linkhref="css/bootstrap.min.css"rel="stylesheet"media="screen"></p> <p><!--HTML5ShimandRespond.jsIE8supportofHTML5elementsandmediaqueries-->
<!--WARNING:Respond.jsdoesn'tworkifyouviewthepageviafile://-->
<!--[ifltIE9]>
<scriptclass="lazy" data-src="<a href="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script">https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script</a>>
<scriptclass="lazy" data-src="<a href="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script">https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script</a>>
<![endif]-->
</head>
<body>
<h2>Hello,world!</h2>
<h3class="page-header">区域一</h3>
<p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p>
<h3class="page-header">区域二</h3>
<p>IfyouworkwithBootstrap'suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter'sCSShinterbasedonless.js.</p>
<h3class="page-header">区域三</h3>
<p>Withinthedownloadyou'llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>
<scriptclass="lazy" data-src="js/jquery-2.0.3.min.js"></script>
<scriptclass="lazy" data-src="js/bootstrap.min.js"></script>
</body>
</html>

当然效果也很简单,我还是把截图放上,可以进行对比。

bootstrap3.0中栅格系统原理是怎样的

优化一:可以发现上图的页面效果占满全屏,我们可以通过Bootstrap 样式类对上面的内容进行居中。

代码如下:


<div class="container">
.........之前上面添加在body标签下的代码
</div>



效果如下

bootstrap3.0中栅格系统原理是怎样的

可以发现container这个类设置了宽度,并且可以让内容显示在页面的中间。

优化二:将三个区域显示在同一排,并且平均分成三栏。

首先为三个区域添加一个容器,可以使用div,并且为div添加一个类 <div class="row">.

然后我们为每个小的区域也添加一个容器div,并且为div添加一个类<div class="cp-xs-4">

简单代码实现如下

代码如下:


<div class="container">
<h2>Hello,world!</h2>
<divclass="row">
<divclass="col-xs-4">
<h3class="page-header">区域一</h3>
<p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p>
</div>
<divclass="col-xs-4">
<h3class="page-header">区域二</h3>
<p>IfyouworkwithBootstrap'suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter'sCSShinterbasedonless.js.</p>
</div>
<divclass="col-xs-4">
<h3class="page-header">区域三</h3>
<p>Withinthedownloadyou'llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>
</div>
</div>
</div>



效果如下

bootstrap3.0中栅格系统原理是怎样的

的确排成一列,然后分成三栏。再结合一下上面栅格系统的6部原理。是不是懂一点了,反正我自己懂了很多。通过同样的方式可以创建出比较复杂的网格布局页面。只需要在布局使用的容器上面添加相应的网格布局的类。比如说如果内容占用6个网格,那么就添加一个cp-xs-6的类、占用四个网格就添加一个cp-xs-4的类,然后在同一排的周围进行使用带有row类的容器。

主要学习的布局(栅格系统),通过简单的实例来理解它的工作原理。

使用过的类有:

1..container:用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询或值范围内都为container设置了max-width,用以匹配栅格系统。

2..cp-xs-4:这个类通过"-"分为三个部分,第三个部分的数字作为一个泛指,它的范围是1到12。就是可以把一个区域分为12个栏,这个要和row类联合使用。

其实这个布局很像HTMl中的Table布局TR行和TD列吧。

暂时的理解就这些,代码直接复制粘贴就可以看效果,当然首先要把预先的css、js文件进行准备。

关于bootstrap3.0中栅格系统原理是怎样的就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

bootstrap3.0中栅格系统原理是怎样的

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

网页设计中栅格系统是怎么样的

小编给大家分享一下网页设计中栅格系统是怎么样的,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!栅格系统的形成1692年,新登基的法国国王路易十四感到法国的印刷水平强
2023-06-08

Bootstrap中的栅格系统是什么

这篇文章主要介绍了Bootstrap中的栅格系统是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕
2023-06-14

linux系统进程管理是怎样的

本篇内容介绍了“linux系统进程管理是怎样的”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1、进程与线程的概念来源百度百科:进程(Proc
2023-06-22

Linux系统中包管理器的演变是怎样的

本篇文章给大家分享的是有关Linux系统中包管理器的演变是怎样的,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。每个电脑设备都使用某种形式的软件来执行其预定任务。在软件开发的早期
2023-06-05

Linux系统中makefile的原理是什么

这篇文章主要为大家分析了Linux系统中makefile的原理是什么的相关知识点,内容详细易懂,操作细节合理,具有一定参考价值。如果感兴趣的话,不妨跟着跟随小编一起来看看,下面跟着小编一起深入学习“Linux系统中makefile的原理是什
2023-06-28

信息系统项目管理师论文写作格式是怎样的

  信息系统项目管理师论文写作格式是怎样的?大家在考前要清楚信息系统项目管理师论文的写作格式要求,今天编程学习网小编就来告诉大家信息系统项目管理师论文格式要求是怎样的。  以下编程学习网小编为大家整理了的软考论文写作格式要求以及写作方法与规范,相信对大家了解信息系统项目管理师论文写作会有帮助。  高级软考考试中一共有三科,下午
信息系统项目管理师论文写作格式是怎样的
2024-04-18

运输费用在ERP系统中是怎样处理的

本篇文章给大家分享的是有关运输费用在ERP系统中是怎样处理的,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。 在ERP项目实施过程中,可能有些人对于运输费用并不关注。其实,运输费
2023-06-05

CentOS系统中VNC配置是怎样的

CentOS系统中VNC配置是怎样的,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。在CentOS系统安装的时候,我们应该对VNC做好配置,所以,在这里,我们来简
2023-06-16

node中的模块系统原理是什么

本篇内容介绍了“node中的模块系统原理是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!模块系统并不是所有编程语言都有内置的模块系统,J
2023-07-05

xp系统无法格式化c盘的问题原因及解决方法是怎样的

xp系统无法格式化c盘的问题原因及解决方法是怎样的,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。一位XP系统用户想在电脑中安装Win7组成双系统,因此想要将C盘格式化,再将
2023-06-13

CentOS管理相关系统是怎样应用的

这篇文章将为大家详细讲解有关CentOS管理相关系统是怎样应用的,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。CentOS管理系统的特性,既可作为高校计算机专业CentOS管理学习,也可以作
2023-06-16

SpringBoot原理中自动配置机制是怎样的

本篇文章为大家展示了SpringBoot原理中自动配置机制是怎样的,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。前言在当下的java生态里,SpringBoot已经成为事实上的开发标准,绝大多数人现
2023-06-25

Linux系统中的Mysql安装过程是怎样的

这期内容当中小编将会给大家带来有关Linux系统中的Mysql安装过程是怎样的,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。Mysql是 Oracle 旗下得一款产品,属于关系型数据库,在 WEB 应用方
2023-06-28

分布式系统CAP定理中的P原理是什么

这篇文章主要介绍“分布式系统CAP定理中的P原理是什么”,在日常操作中,相信很多人在分布式系统CAP定理中的P原理是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”分布式系统CAP定理中的P原理是什么”的疑
2023-07-05

CentOS系统中Redhat的两大Linux产品系列是怎样的

本篇文章为大家展示了CentOS系统中Redhat的两大Linux产品系列是怎样的,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。Linux是GNU/Linux的缩写,通常指各种Linux发行版的通称
2023-06-16

编程热搜

目录