bootstrap

最新推荐文章于 2024-11-02 12:42:04 发布

diedui6626

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量68

点赞数

文章标签： javascript 移动开发 ViewUI

原文链接：http://www.cnblogs.com/yxiaoqian/p/6109007.html

版权

bootstrap:简易模版：

<meta http-equiv='X-UA-Compatible' content='IE=edge'>   //让IE浏览器运行最新的渲染模式
//<meta name='renderer' content='webkit'>让部分国产浏览器默认采用高速模式渲染页面

<meta name='viewport' content='width=device-width,initail-scale=1'>  //为确保适当的绘制和触屏缩放

<link href='bootstrap.min.css' ref='stylesheet'>

<!--[if lt IE9]>        //ie9以下浏览器引入 html5shiv.js  和 respond.js  以支持媒体查询media query和html5
<script src='http:cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js>
<script src='http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js'>
<![endif]-->


<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

禁用响应式布局：1 移除viewport标签，2 设置.container的width值覆盖默认值 3栅格布局，替换掉.col-md-*

支持情况：IE8-11；Android、IOS

bootstrap3.是移动设备优先

1.bootstrap需要为页面内容和栅格系统包裹一个 .container容器。

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

　B类： .container-fluid 用于100%宽度，占据全部适口的viewport 的容器

2 栅格系统中，媒体查询media query 创建的关键的分界点阈值。

　　超小屏幕，.col-xs-手机小与768px ，bootstrap默认

　　小屏幕，.col-sm-平板大于768px @media (min-width:@screen-sm-min){}

　　中等屏幕，.col-md-桌面显示器,大于992px @media (min-width:@screen-md-min){}

　　大屏幕，.col-lg-大桌面显示器，大于等于1200px @media(min-width:@screen-lg-min){}

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

.col-md-offset-4将.col-md-4向右偏移了4个列

.col-md-push-3:将col-md-3推到前面，

.col-md-pull-9：将col-md-9拉到后面，

预定义样式：.h1 .h2 .small .lead让段落更突出 .text-left .text-center .text-right .text-justify .text-nowrap 文本对其类 .text-lowercase .text-uppercase .text-capitalize首字母大写文本大小写 <abbr title="'>文本缩略语 <blockquote>默认引用 .list-unstyle .list-inline

表格：.table .table-striped条纹样式 .table-hover .table-bordered .table-condensed padding减半单元格设置颜色.active .success .info .warning .danger

响应式表格：table要包裹在.table-responsive中。<div class="table-responsive"><table class="table">

表单

role='form' .form-group .form-control .form-inline内连样式表单中label要设置.sr-only .form-horizontal水平排列表单

表单类型：type= text password datetime datetime-local date month time week number email url search tel color

多选框 .checkbox .radio .disabled禁止 .checkbox-inline .radio-inline

.multiple 允许同时选多个

.disabled 禁止用

.readonly 只读属性

按钮<button>、链接<a> .btn .btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link .btn-lg .btn-sm .btn-xs .active 激活状态

图片支持响应式：.img-responsive

.img-rounded 圆角图片 .img-circle圆形图片 .img-thumbnail边框图片