Bootstrap全局样式

base,前端开发 1

页面必须设置为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/@[email protected][email protected]}

a(@[email protected])
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 &gt; 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值改变位置)改变列排序

具体排版

1、标题和标题类 <h1> ~<h6>和.h1~h6|副标题<small>和.small

font-size                    margin-top                margin-bottom

h1         36px                          20px                          10px

h2         30px                          20px                          10px

h3         24px                          20px                          10px

h4         18px                          10px                          10px

h5         14px                          10px                          10px

h6         12px                          10px                          10px

 

2、内容、p段落  font-size:14px; line-height:20px;margin-bottom:10px;

3、强调突出内容  .leader{margin-bottom:20px;font-size:16px(min-width:768:21px);font-weight:300;}

4、标记文本<mark>和.mark  {padding/background-color}

5、删除的文本<del>  浏览器自带样式

6、无用的文本<s>  浏览器自带样式

7、插入的文本<ins>  浏览器自带样式

8、带下划线文本<u>  浏览器自带样式

9、小号文本<small>和.small  {font-size:85%;}

10、着重<strong>  浏览器自带样式  有语气

11、斜体<em>  浏览器自带样式  有语气

12、高亮文本<b>  浏览器自带样式  不带语气

13、斜体<i>  浏览器自带样式  不带语气  一般用于技术词汇、发言

14、文本对齐  .text-left  .text-center  .text-right  .text-justify  .text-nowrap

15、字母大小写  .text-lowercase  .text-uppercase  .text-capitalized

16、缩略语  <abbr title=””>  {cursor/border-bottom}

17、首字母缩略语  <abbr title .initialism> {font-size:90%/uppercase}

18、地址  <address>  {font-style}

19、引用  <blockquote>  {padding/font-size/border-left}

20、引用+命名来源  <footer>  <cite>

21、引用反向风格  .blockquote-reverse

22、无序列表 <ul>  {margin-top/margin-bottom}

23、有序列表  <ol>  {margin-top/margin-bottom}

24、无样式列表  .list-unstyled  {padding-left/list-style}

25、内联样式  .list-inline  {padding-left/margin-left/list-style}  {display/padding}

26、定义列表  <dl>  {margin-top/margin-bottom}  {font-weight}  {margin-left}

27、定义列表水平排列  .dl-horizontal

28、代码  <code>  {padding/font-size/color/background-color/border-radius}

29、用户输入  <kbd>  {padding/font-size/color/background-color/border-radius /box-shadow}

30、代码块  <pre>  {padding/margin/font-size/color/background-color/word-break/word-wrap/border/border-radius}

31、变量  <var>  浏览器自带样式

32、程序输出  <samp>  {font-family}

表格

1、基本类  .table  {width/margin-bottom/}  {padding/border-top}

2、条纹表格  .table-striped  {nth-of-type(odd):background-color}

3、边框表格  .table-border  {border}

4、鼠标悬停  .table-hover  {background-color}

5、紧缩的表格  .table-condesed

6、状态类  .active  .success  .warning  .danger  .info

7、响应式表格  .table-responsive

 

表单

1、使用label和控件组合使用,包裹在.from-group里面获得最好的排列  {margin-bottom}

2、<input>、<select>、<textarea>加类.form-control  {width/padding/border-radius/border}

3、内联表单  .form-inline

4、水平排列  .form-horizontal+栅格类+.control-label

5、输入框  input:text  几乎浏览器自带样式

6、文本域  input:textarea  几乎浏览器自带样式

7、单选和多选 div+.radio/.radio-inline/.checkkbox/.checkbox-inline+属性disabled/.disabled

8、内联单选和多选  .radio-inline/.checkbox-inline

9、下拉列表  几乎浏览器自带样式

10、静态控件  .form-control-staitic+p

11、禁用状态  disable属性  {cursor/background-color}

12、<filedset>   disable属性  禁用包含的所有控件

13、只读状态  readonly属性  {background-color}

14、校验状态  .has-success  .has-warning  .has-error

15、校验状态+图标  .has-feedback+feedback icon

16、 水平排列/内联+校验+图标  .form-horizontal/.form-inline+校验类+.has-feedback+feedback icon

17、控件尺寸  .input-lg  {height/padding/border-radius/font-size}

18、水平排列控件尺寸  .form-group-lg/.form-group-sm

19、列尺寸  栅格类.row+.col-**-*控制尺寸

严正声明:本站只出售html页面效果模板,不提供任何类型的网站内容数据,模板仅供学习交流使用,不得用于任何商业以及触犯国家法律法规的用途,违者需自行承担全部责任,与本站无以及模板设计作者无关,本站以及模板作者不承担任何连带责任!!!!
关爱邦 | 网站源码程序下载_免费商业源码分享! » Bootstrap全局样式

发表评论

提供最优质的资源集合

立即查看 了解详情