[Bootstrap]全局样式(一)

页面必须设置也html5文档类型

<!DOCTYPE html>

<html lang=”zh-CN”>

  …

</html>

 

适应移动设备

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

 

排版/链接

scaffolding.less:

body{background-color:#fff/@font-family-base/@font-size-base/@line-height-base}

a(@link-color/@link-hover-color)
Normalize.css

 

栅格系统

容器:

.container(固定宽度响应式)/.container-fluid(百分比打适应)

切莫能够互相嵌套(有padding的因由)

行:

       .row

       必须带有在容器.container或.container-fluid中

       行内得以且只堪创建列(column)

列:

       .col-*-*

       内容在列中

       列与列次的间隔有.col-*-*遭遇的padding属性设置

       第一个*为xs、sm、md和lg,第二个*为1-12

       列数大于12,多余的排列另打一行(本质上是生成引起的换行)

 

传媒询问

超小屏幕(小于768)

凭媒体询问代码——移动优先条件

容器宽度.container为自行

小屏幕(大于768)

@media (min-width:@screen-sm-width:768){}

容器宽度.container为720

中等屏幕(大于992)

@media(min- width:@screen-md-width:992){}

容器宽度.container为970

大屏幕(大于1200)

@media(min-width:@screen-lg-width:1200){}

容器宽度.container为1170

万分屏幕媒体查询类覆盖小屏幕设备类

 

实例

1、根据媒体询问,相应幅度的屏幕展示相应的接近(堆叠/水平排列)

<div class=”row”>

  <div class=”col-md-1″>.col-md-1</div>

  <div class=”col-md-1″>.col-md-1</div>

  <div class=”col-md-1″>.col-md-1</div>

  <div class=”col-md-1″>.col-md-1</div>

  <div class=”col-md-1″>.col-md-1</div>

  <div class=”col-md-1″>.col-md-1</div>

  <div class=”col-md-1″>.col-md-1</div>

  <div class=”col-md-1″>.col-md-1</div>

  <div class=”col-md-1″>.col-md-1</div>

  <div class=”col-md-1″>.col-md-1</div>

  <div class=”col-md-1″>.col-md-1</div>

  <div class=”col-md-1″>.col-md-1</div>

</div>

<div class=”row”>

  <div class=”col-md-8″>.col-md-8</div>

<div class=”col-md-4″>.col-md-4</div>

</div>

<div class=”row”>

  <div class=”col-md-4″>.col-md-4</div>

  <div class=”col-md-4″>.col-md-4</div>

  <div class=”col-md-4″>.col-md-4</div>

</div>

<div class=”row”>

  <div class=”col-md-6″>.col-md-6</div>

  <div class=”col-md-6″>.col-md-6</div>

</div>

2、.col数大于12,包含多余排的元素外于一行

<div class=”row”>

  <div class=”col-xs-9″>.col-xs-9</div>

  <div class=”col-xs-4″>.col-xs-4<br>Since 9 + 4 = 13 >
12, this 4-column-wide div gets wrapped onto a new line as one
contiguous unit.</div>

  <div class=”col-xs-6″>.col-xs-6<br>Subsequent columns
continue along the new line.</div>

</div>

3、col-**-offset-*列偏移(通过margin-left设置偏移)

4、col-**-push-*(通过left值改变位置)和col-**-pull-*(通过right值改变位置)改变列排序

相关文章