Bootstrap 3之美02-Grid简介和应用

本篇主要包括:

■  Grid简介
■  应用Grid
■  Multiple Grids

Grid简介

Bootstrap中,把页面分成12等份,这就是所谓的Grid。

在Bootstrap中,用类名控制,这些类型遵循".col-xx-6"类似的形式。

2个6就占满整个页面。所以,类名最后面的数字表示要占几个格子。

又比如,3个4也占满整个页面。

又比如,4个3也占满整个页面。

又比如,6个2也占满整个页面。

另外,类似".col-xx-10 .col-xx-offset-2"这样的类名,offset表示偏移,2表示向右偏移2个单元格。

以上值得注意的是:在倒数第二行,当把".col--xx-3"放在".col-xx-3 .col-xx-offset-2"之后的时候,由于超过了12个单元格的大小,".col--xx-3"会自动跑到下一行的最开头。

应用Grid

id为body的section如何应用Grid呢?
→在index.html中,给id为body的section加上class="container"属性
→给id为main的section加上class="col-md-8"属性
→给id为sidebar的section加上class="col-md-4"属性

如何让header和footer部分也应用Grid呢?
→去掉id为page的div的class="container"属性,变为:<div id="page">
→给header加上class="container"属性,变为:<header class="container">
→给footer加上class="container"属性,变为:<footer class="container">

以上,header, body, footer部分都应用了Grid,body的main部分占8个单元格,body的sidebar部分占4个单元格。

so far so good。但是,如果我们把浏览器的宽度缩小到像智能手机屏幕般大小,一些不和谐的方面呈现了出来:

比如,本来一行的标题撑成了2行:

比如,本来可以完整呈现的图片,现在需要滑动水平滚动条才可以窥其全貌:

还比如,原先在右边的部分,被挤到了下方,等等。

如何解决这些问题呢?

Multiple Grids

Multiple Grids的意思是:一个页面元素可以有多个表示单元格大小的类名。不同的页面宽度,启用不同的类。

在Bootstrap 3中,
".col-lg-xx"表示页面宽度>=1200像素。
".col-md-xx"表示页面宽度>=992像素。
".col-sm-xx"表示页面宽度>=768像素。
".col-xs-xx"表示页面宽度<768像素。

我们可以为一个html元素赋予多个类名,区分地表示,在ld情况下占几个单元格,在md情况下占几个单元格,等等。

假设我们需要考虑sm的情况,即面宽度>=768像素的情况。
→在id为main的section中,为class增加col-sm-9
→在id为sidebar的sectioin中,为class增加col-sm-3

现在,把页面宽度调整到大概800像素的大小。

可见,这时候,正如之前设置的,id为main的section占了9个单元格,id为sidebar的sectioin占了3个单元格。

接着,我们再考虑xs的情况,即页面宽度<768像素的情况。
→在id为main的section中,为class增加col-xs-6
→在id为sidebar的sectioin中,为class增加col-xs-6

现在,把页面宽度调整到大概590像素的大小。

可见,这时候,正如之前设置的,id为main的section占了6个单元格,id为sidebar的sectioin占了6个单元格。

但是,当页面宽度<768像素的时候,把左右2边都设置成占6个单元格的做法,不太可能出现在实际项目中,以上这么做只是为了演示。我们还需要把这种情况对应的类名删除。回到如下的状态:

参考资料:WilderMinds

Bootstrap 3之美系类包括:

Bootstrap 3之美01-下载并引入页面

Bootstrap 3之美02-Grid简介和应用

Bootstrap 3之美02-Grid简介和应用

时间: 2024-09-29 12:26:46

Bootstrap 3之美02-Grid简介和应用的相关文章

Bootstrap 3之美05-排版、Button、Icon、Nav和NavBar、List、Table、Form

本篇主要包括: ■  排版■  Button■  Icon■  Nav和NavBar■  List■  Table■  Form 排版 ● 斜体:<em>● 加粗体:<strong>● 突出段落:class="lead"● 字体颜色:class="text-success",class="text-muted",class="text-success",class="text-primary&

Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、用Button和Dropdowns模拟Select、Input Groups、Thumbnails、Panels、Wells

本篇主要包括: ■  Page Header■  Breadcrumbs■  Button Groups■  Dropdowns■  Button Dropdowns■  用Button和Dropdowns模拟Select■  Input Groups■  Thumbnails■  Panels■  Wells □ Page Header Page Header是指页面最顶部. <div class="page-header"> <h1>超级球迷</h1&

Bootstrap 3之美04-自定义CSS、Theme、Package

本篇主要包括: ■  自定义CSS■  自定义Theme■  自定义Package 自定义CSS 有时候,需要自定义或重写Bootstrap默认的CSS.→在css文件夹下创建一个site.css→假设要对container类重写,在site.css中 .container { background-color: #eee; } →把site.css引用到index.html中,并放置在bootstrap.min.cs的下方 <link href="css/bootstrap.min.cs

Bootstrap 3之美07-插件Collapse、Accordion、Modal、Tab、Tooltip、Alert、Carousel

类似Page Header, Breadcrumbs, Dropdowns等,都是Bootstrap的组件,是静态的.如果涉及到交互,Bootstrap提供了插件.这些插件包括: ○ 过渡效果: bootstrap-transition.js○ 模态对话框:bootstrap-modal.js○ 下拉项:bootstrap-dropdown.js...... 这些插件可以单独引入到页面.而在bootstrap.js或bootstrap.min.js文件中已经包含了所有的插件. 本篇主要包括: ■

Bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素

本篇主要包括: ■  添加独立的一行■  文字环绕■  图片自适应■  隐藏元素 添加独立的一行 在id为body的section和id为main的section之间,添加2张图片. 我们发现,新加的2张图片把主体内容挤到了右侧. 那么,我们如何处理新加的2张图片呢?--我们不太可能用container,因为它是页面布局层面的类名.但我们可以把这2张图片放在class名为row的div中. 我们还可以加更多的图片. 现在的图片还没有居中.考虑到总共有12个单元格,而4张图片只占了8个单元格,还空

python入门基础教程02 Python简介

02 Python简介 Python简介 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言,属于应用层软件.自从20 世纪90 年代初Python语言诞生至今,它逐渐被广泛应用于处理系统管理任务.自动化运维.图像处理游戏和Web 网站开发等领域.Python已经成为最受欢迎的程序设计语言之一.4.易读以及可扩展性,在国外用Python做科学计算的研究机构日益增多,一些知名大学已经采用Python教授程序设计课程.例如麻省理工学院的计算机科学及编程导论课程就使用Python语言讲

信息收集、美杜莎简介-9.26

Banner信息收集: Banner信息,欢迎语,在Banner信息中可以得到软件开发商.软件名称.版本.服务等信息,通过这些信息可以使用某些工具直接去使用相对应的exp去攻击. 前提条件:需要和目标建立连接,只有建立了链接才能获取对应的banner信息,目标服务器上可以对banner进行了隐藏着或者禁止读取 收集方式: 1.使用NC(netcat瑞士军刀) nc -nv 192.168.111.10 21 -n  --表示以数字形式显示IP -v  --显示详细信息 2.使用Dmitry(扫描

架构之美02

1. 新代码的定位 一开始就有系统结构清晰的总体视图,所以,新的功能单元可以添加到正确的功能区域,而不是为了一时方便,代码随意添加.(这样,有的时候开发者的工作会需要动写脑筋,但是在系统维护和扩展时,就变得容易了) 2. 系统的一致性 顶层设计的良好风格和决定,为底层代理好处,代码是统一.整洁的.清晰的定义,确保没有重复的代码.接口惯例和常见设计模式被普遍使用.没有特殊生命周期的对象和资源管理问题.(这个重点是在于减少功能重复) 3. 架构增长 没有什么是一层不变的,架构应该是方便扩展.可重构的

【Bootstrap基础学习】02 Bootstarp的布局组件应用示例

字体图标的应用示例 <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-sort-by-attributes"></span> </button> 下拉菜单示例 <div class="dropdown"> <button type="butto