你的位置:首页 > 网页设计

[网页设计][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 >

  <div >.col-md-1</div>

  <div >.col-md-1</div>

  <div >.col-md-1</div>

  <div >.col-md-1</div>

  <div >.col-md-1</div>

  <div >.col-md-1</div>

  <div >.col-md-1</div>

  <div >.col-md-1</div>

  <div >.col-md-1</div>

  <div >.col-md-1</div>

  <div >.col-md-1</div>

  <div >.col-md-1</div>

</div>

<div >

  <div >.col-md-8</div>

<div >.col-md-4</div>

</div>

<div >

  <div >.col-md-4</div>

  <div >.col-md-4</div>

  <div >.col-md-4</div>

</div>

<div >

  <div >.col-md-6</div>

  <div >.col-md-6</div>

</div>

2、.col数大于12,包含多余列的元素另起一行

<div >

  <div >.col-xs-9</div>

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

  <div >.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值改变位置)改变列排序