响应式布局——(一)bootstrap栅格系统

bootstrap根据不同屏幕尺寸,选择不同的栅格选项。一共有四种栅格选项,超小屏(手机)、小屏(平板)、中屏(桌面)、大屏(超大桌面)。栅格系统分为12列,即每行最多可容纳12列。若<HTML>里,一个.row内包含的列(column)大于12个(即,一行中的栅格单元超过12个单元),则会自动排版,总之,一行只能最多12列,具体分析往后阅读。

一、 栅格系统的使用

使用栅格系统时,需要在<head>部分做如下处理:

1 <head>
2     <meta charset="UTF-8">
3     <title>Document</title>
4     <meta name="viewport" content="width=device-width, initial-scale=1.0">
5     <link rel="stylesheet" href="css/bootstrap.min.css">
6     <!-- [if lt IE 9]>
7         <script  src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
8     <![endif] -->
9 </head>

1. 为了确保适当的绘制和触屏缩放,需要在<head>中添加viewport元数据标签

width=device-width     宽度等于设备宽度

initial-scale=1.0            初始显示大小——原始大小,即不进行缩放

2. 导入bootstrap.css文件【bootstrap核心CSS文件,必须导入】,有两种方式导入方式:

一是,直接导入本地.css文件: <link rel="stylesheet" href="css/bootstrap.min.css">

二是,使用CDN加速服务:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

获取最新版地址,请关注官网http://getbootstrap.com/getting-started/

3. 兼容性:

bootstrap是基于CSS3的,对于IE8- 不支持

IE8需要Respond.js配合才能实现对媒体查询(media query)的支持。

以下代码实现兼容性

<!-- [if lt IE 9]>
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif] -->

二、栅格系统在多种屏幕设备上如何工作

使用方式:在相应的<div>上加上对应的类名即可。 类名形式为:  类前缀+num

如: <div class="col-md-1"></div>

表示中等屏幕,该<div>仅占1列

三、移动设备(xs),平板(sm),桌面屏幕(md)

移动设备(手机)用   .col-xs-*    类

平板用                   .col-sm-*  类

桌面屏幕用            .col-md-*  类

它们的布局有如下关系:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <link rel="stylesheet" href="css/bootstrap.min.css">
 8     <!-- [if lt IE 9]>
 9         <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
10     <![endif] -->
11     <style>
12         div.example{
13             margin-bottom: 80px;
14         }
15         div.row{
16             margin-bottom: 15px;
17         }
18
19         [class ^="col-"]{
20             padding: 10px;
21             background-color: #cff;
22             border: 1px solid #fca;
23             font-weight: bold;
24         }
25     </style>
26 </head>
27 <body>
28     <div class="example">
29         <h1>移动设备,桌面</h1>
30         <!-- Stack the columns on mobile by making one full-width and the other half-width -->
31         <div class="row">
32           <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
33           <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
34         </div>
35
36         <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
37         <div class="row">
38           <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
39           <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
40           <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
41         </div>
42
43         <!-- Columns are always 50% wide, on mobile and desktop -->
44         <div class="row">
45           <div class="col-xs-6">.col-xs-6</div>
46           <div class="col-xs-6">.col-xs-6</div>
47         </div>
48     </div>
49
50     <div class="example">
51         <h1>手机,平板,桌面</h1>
52         <div class="row">
53           <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
54           <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
55         </div>
56         <div class="row">
57           <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
58           <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
59           <!-- Optional: clear the XS cols if their content doesn‘t match in height -->
60           <div class="clearfix visible-xs-block"></div>
61           <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
62         </div>
63     </div>
64 </body>
65 </html>

上图的代码实现

1. 超小屏(手机 col-xs-* ) 与 中屏(桌面 col-md-*)之间有3:2的换算关系

2. 在中屏以上屏幕(>=992px)中,才会显示上图效果;

若<=992px或是<=768px (在手机或者平板上),有的一行 ( .row ) 已经超过12列,则分两行显示。

四、多余的列另起一行(列数>12)

如果一个.row内包含的列大于12个,包含多余列的元素将作为一个整体单元被另起一行排列

1 <h1>多余的列另起一行</h1>
2         <div class="row">
3           <div class="col-xs-9"> .col-xs-9</div>
4           <div class="col-xs-4"> .col-xs-4<br/>9+4>12,所以.col-xs-4另起一行</div>
5           <div class="col-xs-8"> .col-xs-8<br/>4+8<=12,所以.col-xs-8仍在该行中显示</div>
6         </div>

多余的列另起一行

时间: 2024-11-05 02:18:56

响应式布局——(一)bootstrap栅格系统的相关文章

0083 移动端WEB开发之响应式布局、bootstrap

移动端WEB开发之响应式布局 1. 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: 小于768的为超小屏幕(手机) 768~992之间的为小屏设备(平板) 992~1200的中等屏幕(桌面显示器) 大于1200的宽屏设备(大桌面显示器) 1.2 响应式布局容器 响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果. 原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列

响应式布局---2. Bootstrap前端开发框架

1.1 介绍 Bootstrap来自Twitter,是目前最受欢迎的前端框架.Bootstrap是基于HTML.CSS和JAVASCRIPT的,它简洁灵活,使得web开发更加快捷. 中文官网:http://www.bootcss.com/ 官网:http://getbootstrap.com/ 推荐使用:https://v3.bootcss.com/ 1.2 使用 控制权在框架本身,使用者要按照框架所规定的某种规范进行开发 Bootstrap使用四部曲: 1.2.1 创建文件夹结构 在https

响应式布局及bootstrap

bootstrap:移动端有限.没有ID选择器,就算有也是 通过class名称来的容器 container ,row要放在容器container中,且一个网页只允许有一个container 禁止响应式布局:1,写一个宽度:2,去掉<meta·······>.col-xs:禁用超小模式 所有JavaScript插件都依赖于jQuery 基本模板[移动端上写代码,都要写mate viewport] 定制Bootstrap js放在body结束标签之前 HTML5文档类型<htmmml lan

web多终端开发学习系列(一)--- 响应式布局框架BootStrap学习

最近在温习web的开发,毕业之后就没接触web开发了.当时HTML5在国内貌似还是刚刚起步,能适配HTML5的浏览器很少.移动界面框架也才刚刚开始,记得当时曾经学过sencha touch的移动框架以及jquery mobile框架.这两个框架都对响应式布局进行了不错的适配及实现.响应式布局说白了就是对于多个移动终端只需一个界面即可全部适配,可大大地减少开发的工作量. 最近一年Bootstrap开始广泛地被使用了,基于此框架开发出来的插件数不胜数.所以我花了几天时间学习了下Bootstrap,本

响应式布局之BootStrap

本文在于巩固基础 学习bootStrap官网http://getbootstrap.com/ 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. 而bo

基于Bootstrap3制作响应式布局网站(一)

前言 原创文章,欢迎转载,请保留出处. 有任何错误.疑问或者建议,欢迎指出. 我的邮箱:[email protected] 现在的上网设备十分多,每种设备的分辨率都不一样,传统的网站开发需要花很大功夫才能实现不同分辨率下兼容布局,而Bootstrap的出现使得网站开发更加简单快捷.Bootstrap是Twitter推出的一个用于前端开发的开源工具包,其中的一个特性就是支持响应式布局. 何为响应式布局 我们可以查阅百度百科得到比较权威的解析: 响应式布局是Ethan Marcotte在2010年5

巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!

摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Bootstrap的中文官网首页为模板进行展示其栅格布局的使用方法以及相关知识点.相信在看完这篇文章之后,你完全可以轻松使用栅格布局. 网站效果图如下所示: PC版: 移动版: 1.栅格系统(布局) Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加

Bootstrap响应式布局以及栅格框架

一.Bootstrap简单配置简单使用Bootstrap,只需引入: <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/bootstrap.js" ></script> <link rel="stylesheet&q

Bootstrap 栅格系统(布局)

1.栅格系统(布局)Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系统叫做布局.它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中.下面就简单介绍一下Bootstrap栅格系统的工作原理: 网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再

Bootstrap响应式布局

Bootstrap响应式布局可以使用栅格化系统,在桌面>970px上变为水平排列,方法: 1.包含在.container或.container-fluid中 2.使用.col-md-*栅格类,创建栅格系统 典型布局: <div class="container"> <div class="row"> <div class="col-md-4">d</div> <div class=&qu