HTML响应式web设计(RWD) Bootstrap

WEB前端 waitig 467℃ 百度已收录 0评论

借鉴:http://v3.bootcss.com/css/

初步介绍Bootstrap 后续随着学习继续补充

 

1、Bootstrap需要将页面 

<!DOCTYPE html>

<html lang="en-US">

</html>

2、使用<viewport>元数据标签确保适当的绘制和触屏缩放

<meta name="viewport"  content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

 视口(viewport)设置meta属性为user-scale=no,可以禁止其缩放功能(zooming),用户只能滚动屏幕,适不适用 

3、布局容器  Bootstrap需要为页面内容和栅格系统包裹一个.container容器 下面两个类都可用,但不能互相嵌套

.container类用于固定宽度并支持响应式布局的容器

.container类用于 100% 宽度,占据全部视口(viewport)的容器

4、栅格系统

栅格系统是用一系列的行(low)和列(column)的组合来创建页面布局

Bootstrap栅格系统的工作原理

  • “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100%
    宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
  • 通过“行(row)”在水平方向创建一组“列(column)”。
  • 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
  • 类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap
    源码中定义的 mixin 也可以用来创建语义化的布局。
  • 通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding
  • 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。
  • 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
  • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备
    , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-lg-*不存在, 也影响大屏幕设备。ootstrap栅格系统的工作原理

5、关于bootstrap栅格系统css中的col-xs-*,col-sm-*,col-md-*的具体含义请参见:

http://blog.csdn.net/sinat_34719507/article/details/53472054

例子:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,">
<link rel="stylesheet" 
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>陈静你好</h1>
<p>大家好 才是真的好</p>
 </div>
 </div>
 
  <div class="container">
<div class="row">

<div class="col-md-4">
<h3>job</h3>
<p>this is a good job</p>
</div>

<div class="col-md-4">
<h3>wether</h3>
<p>this is a good day</p>
</div>

<div class="col-md-4">
<h3>mood</h3>
<p>I am very happy today beacause i love the response web design</p>
</div>
</div>
</div>
</body>
</html>

结果:


本文由【waitig】发表在等英博客
本文固定链接:HTML响应式web设计(RWD) Bootstrap
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)