返回顶部
首页 > 资讯 > 精选 >如何理解Bootstrap3.0栅格系统
  • 341
分享到

如何理解Bootstrap3.0栅格系统

2023-06-08 03:06:47 341人浏览 独家记忆
摘要

这篇文章主要介绍“如何理解Bootstrap3.0栅格系统”,在日常操作中,相信很多人在如何理解Bootstrap3.0栅格系统问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何理解Bootstrap3.0栅

这篇文章主要介绍“如何理解Bootstrap3.0栅格系统”,在日常操作中,相信很多人在如何理解Bootstrap3.0栅格系统问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何理解Bootstrap3.0栅格系统”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

栅格系统(布局)

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

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

行(row)必须包含在.container中,以便为其赋予合适的排列(aligment)和内补(padding)。使用行(row)在水平方向创建一组列(column)。你的内容应当放置于列(column)内,而且,只有列(column)可以作为行(row)的直接子元素。类似Predefined grid classes like .rowand .col-xs-4这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。通过设置padding从而创建列(column)之间的间隔(gutter)。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个.col-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>
<h3 class="page-header">区域一</h3>
<p>Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
<h3 class="page-header">区域二</h3>
<p>If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.</p>
<h3 class="page-header">区域三</h3>
<p>Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>

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

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

代码如下:


<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"><pre></pre><pre><font face="Arial"><!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]>
<script 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>>
<script 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>
<h3 class="page-header">区域一</h3>
<p>Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
<h3 class="page-header">区域二</h3>
<p>If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.</p>
<h3 class="page-header">区域三</h3>
<p>Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p> <script src="js/Jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

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

如何理解Bootstrap3.0栅格系统

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

代码如下:


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

效果如下

如何理解Bootstrap3.0栅格系统

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

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

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

然后我们为每个小的区域也添加一个容器div,并且为div添加一个类<div >

简单代码实现如下

代码如下:


<div class="container"> <h2>Hello, world!</h2> <div class="row"> <div class="col-xs-4"> <h3 class="page-header">区域一</h3> <p>Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p> </div> <div class="col-xs-4"> <h3 class="page-header">区域二</h3> <p>If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.</p> </div> <div class="col-xs-4"> <h3 class="page-header">区域三</h3> <p>Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p> </div> </div> </div>

效果如下

如何理解Bootstrap3.0栅格系统

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

到此,关于“如何理解Bootstrap3.0栅格系统”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: 如何理解Bootstrap3.0栅格系统

本文链接: https://www.lsjlt.com/news/251259.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何理解Bootstrap3.0栅格系统
    这篇文章主要介绍“如何理解Bootstrap3.0栅格系统”,在日常操作中,相信很多人在如何理解Bootstrap3.0栅格系统问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何理解Bootstrap3.0栅...
    99+
    2023-06-08
  • bootstrap3.0中栅格系统原理是怎样的
    这篇文章给大家介绍bootstrap3.0中栅格系统原理是怎样的,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。栅格系统(布局)Bootstrap内置了一套响应式、移动设备优先的流式栅格...
    99+
    2024-04-02
  • Bootstrap3.0栅格系统的方法教程
    本篇内容主要讲解“Bootstrap3.0栅格系统的方法教程”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Bootstrap3.0栅格系统的方法教程”吧!栅格选项  通过下面的截图可以比较清楚的...
    99+
    2023-06-08
  • Bootstrap中如何使用栅格系统
    这篇文章给大家分享的是有关Bootstrap中如何使用栅格系统的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、什么是栅格系统官方文档中是这样说的:Bootstrap 提供了一套...
    99+
    2024-04-02
  • Bootstrap栅格系统怎么用
    这篇文章主要为大家展示了“Bootstrap栅格系统怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Bootstrap栅格系统怎么用”这篇文章吧。如果你以前...
    99+
    2024-04-02
  • bootstrap栅格系统是什么
    这篇文章主要介绍了bootstrap栅格系统是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 栅格系统是Bootstrap中的核心,正...
    99+
    2024-04-02
  • Bootstrap怎么实现栅格系统
    这篇文章将为大家详细讲解有关Bootstrap怎么实现栅格系统,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1、简介Bootstrap内置了一套响应式、移动设备优先的流式...
    99+
    2024-04-02
  • Bootstrap中的栅格系统是什么
    这篇文章主要介绍了Bootstrap中的栅格系统是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕...
    99+
    2023-06-14
  • 如何理解Bootstrap3.0中CSS知识
    这篇文章主要介绍“如何理解Bootstrap3.0中CSS知识”,在日常操作中,相信很多人在如何理解Bootstrap3.0中CSS知识问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何理解Bootstrap...
    99+
    2023-06-08
  • CSS中的栅格系统是怎样的
    这期内容当中小编将会给大家带来有关CSS中的栅格系统是怎样的,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。说到栅格系统(grid system),你也许见过这样的概念:像...
    99+
    2024-04-02
  • bootstrap的栅格系统有哪些作用
    本文小编为大家详细介绍“bootstrap的栅格系统有哪些作用”,内容详细,步骤清晰,细节处理妥当,希望这篇“bootstrap的栅格系统有哪些作用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起...
    99+
    2024-04-02
  • Bootstrap中栅格系统的用法示例
    这篇文章主要介绍了Bootstrap中栅格系统的用法示例,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。Bootstrap之栅格系统Boots...
    99+
    2024-04-02
  • HTML教程:如何使用栅格系统进行页面布局
    在网页设计中,页面布局是一个非常重要的环节。合理的页面布局不仅能够提升用户体验,还能使网页更加美观和易于浏览。为了实现灵活、响应式的页面布局,我们可以使用栅格系统。栅格系统是一种将页面划分为等宽的列的方法,通过将页面划分为不同的列数和宽度,...
    99+
    2023-10-21
    html 页面布局 栅格系统
  • bootstrap中12栅格系统指的是什么
    这篇“bootstrap中12栅格系统指的是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这...
    99+
    2024-04-02
  • 如何实现bootstrap3.0多种表格效果
    这篇文章主要讲解了“如何实现bootstrap3.0多种表格效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何实现bootstrap3.0多种表格效果”...
    99+
    2024-04-02
  • css如何实现栅格布局
    这篇文章主要介绍css如何实现栅格布局,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、使用float:代码如下:<!DOCTYPE html><html>&...
    99+
    2024-04-02
  • 网页设计中栅格系统是怎么样的
    小编给大家分享一下网页设计中栅格系统是怎么样的,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!栅格系统的形成1692年,新登基的法国国王路易十四感到法国的印刷水平强...
    99+
    2023-06-08
  • 如何解决Boostrap栅格系统与自己额外定义媒体查询的冲突问题
    小编给大家分享一下如何解决Boostrap栅格系统与自己额外定义媒体查询的冲突问题,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!html结构如下<div class=&qu...
    99+
    2024-04-02
  • 如何使用matplotlib绘制栅格数据
    要使用matplotlib绘制栅格数据,可以按照以下步骤进行操作:1. 导入matplotlib库和numpy库:```python...
    99+
    2023-09-20
    matplotlib
  • 前端响应式布局与Bootstrap栅格系统怎么应用
    这篇“前端响应式布局与Bootstrap栅格系统怎么应用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“前端响应式布局与Boo...
    99+
    2023-07-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作