全局 CSS 样式 ###
只记录一些自己碰见觉得不了解 查询的 具体参考 http://v3.bootcss.com/css/
为了确保适当的绘制和触屏缩放, 需要在 <head> 之中添加 viewport 元数据标签
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width: 宽度 = 设备宽度
content 属性值 :
width: 可视区域的宽度, 值可为数字或关键词 device-width
height: 同 width
intial-scale: 页面首次被显示是可视区域的缩放级别, 取值 1.0 则页面按实际尺寸显示, 无任何缩放
maximum-scale=1.0, minimum-scale=1.0; 可视区域的缩放级别,
maximum-scale 用户可将页面放大的程序, 1.0 将禁止用户放大到实际尺寸之上
user-scalable=no: 是否可对页面进行缩放, 这样禁用缩放功能后, 用户只能滚动屏幕, 就能让你的网站看上去更像原生应用的感觉
注意, 这种方式我们并不推荐所有网站使用, 还是要看你自己的情况而定!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
排版与链接[/color]
Bootstrap 排版链接样式设置了基本的全局样式分别是:
为 body 元素设置 background-color: #fff;
使用 @font-family-base@font-size-base 和 @line-height-base 变量作为排版的基本参数
为所有链接设置了基本颜色 @link-color , 并且当链接处于 :hover 状态时才添加下划线
布局容器[color=#ff0000]
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器我们提供了两个作此用处的类注意, 由于 padding 等属性的原因, 这两种 容器类不能互相嵌套
.container 类用于固定宽度并支持响应式布局的容器
- <div class="container">
- ...
- </div>
.container-fluid 类用于 100% 宽度, 占据全部视口 (viewport) 的容器
- <div class="container-fluid">
- ...
- </div>
classimg-responsive 可以使图片自适应屏幕
在按钮上使用 Font Awesome 图标 <i class="fa fa-info-circle"></i>
使用 Form Controls 设置输入框样式
(1)栅格系统[/color]
(2)排版[color=#ff0000]
(3)代码[/color]
(4)表格[color=#ff0000]
表格常用的类:
例如:
- <table class="table table-striped table-bordered table-hover table-condensed">
- <tr>
- <td>xingming </td>
- <td>baixiaodan</td>
- </tr>
- <tr><td>chushengriqi</td>
- <td> 10.1</td>
- </tr>
- </table>
通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式, 条纹状表格是依赖 :nth-child CSS 选择器实现的, 而这一功能不被 Internet Explorer 8 支持
table-bordered 给表格添加边框
table-hover 鼠标点到每一行 可以做出反应
table-condensed 类可以让表格更加紧凑, 单元格中的内补 (padding) 均会减半
Firefox 和 fieldset 元素
Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式, 导致响应式表格出现问题可以使用下面提供的针对 Firefox 的 hack 代码解决, 但是以下代码并未集成在 Bootstrap 中:
- @-moz-document url-prefix() {
- fieldset { display: table-cell; }
- }
- <div class="table-responsive">// 响应式表格,(小于 768px)水平滚动当屏幕大于 768px 宽度时, 水平滚动条消失
- <table class="table">
- ...
- </table>
- </div>
(5)表单[/color]
单独的表单控件会被自动赋予一些全局样式
所有设置了 .form-control 类的 <input><textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;
将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列
(6)按钮[color=#ff0000]
预定义样式
- <button type="button" class="btn btn-default">(默认样式)Default</button>
- <button type="button" class="btn btn-primary">(首选项)Primary</button>
- <button type="button" class="btn btn-success">(成功)Success</button>
- <button type="button" class="btn btn-info">(一般信息)Info</button>
- <button type="button" class="btn btn-warning">(警告)Warning</button>
- <button type="button" class="btn btn-danger">(危险)Danger</button>
- <button type="button" class="btn btn-link">(链接)Link</button>
尺寸
需要让按钮具有不同尺寸吗? 使用 .btn-lg.btn-sm 或 .btn-xs btn-block 就可以获得不同尺寸的按钮
禁用状态
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
跨浏览器兼容性
如果为 <button> 元素添加 disabled 属性, Internet Explorer 9 及更低版本的浏览器将会把按钮中的文本绘制为灰色, 并带有恶心的阴影, 目前我们还没有解决办法
(7)图片[/color]
在 Bootstrap 版本 3 中, 通过为图片添加 .img-responsive 类可以让图片支持响应式布局其实质是为图片设置了 max-width: 100%; height: auto; 和 display: block; 属性, 从而让图片在其父元素中更好的缩放
如果需要让使用了 .img-responsive 类的图片水平居中, 请使用 .center-block 类, 不要用 .text-center
[color=#00b050]SVG 图像和 IE 8-10
在 Internet Explorer 8-10 中, 设置为 .img-responsive 的 SVG 图像显示出的尺寸不匀称为了解决这个问题, 在出问题的地方添加 width: 100% \9; 即可 Bootstrap 并没有自动为所有图像元素设置这一属性, 因为这会导致其他图像格式出现错乱
跨浏览器兼容性
请时刻牢记: Internet Explorer 8 不支持 CSS3 中的圆角属性
- <img src="..." alt="..." class="img-rounded">
- <img src="..." alt="..." class="img-circle">
- <img src="..." alt="..." class="img-thumbnail">
size=5](8)辅助类[/color]
- // 文本颜色
- [color=#b7dde8]<p class="text-muted">...</p>
- <p class="text-primary">...</p>
- <p class="text-success">...</p>
- <p class="text-info">...</p>
- <p class="text-warning">...</p>
- <p class="text-danger">...</p>
- // 背景色
- <p class="bg-primary">...</p>
- <p class="bg-success">...</p>
- <p class="bg-info">...</p>
- <p class="bg-warning">...</p>
- <p class="bg-danger">...</p>
- // 关闭按钮
- <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
- // 三角符号 <span class="caret"></span>
- // 快速浮动
- <div class="pull-left">...</div>
- <div class="pull-right">...</div>
- // Classes
- .pull-left {
- float: left !important;
- }
- .pull-right {
- float: right !important;
- }
来源: http://www.qdfuns.com/article/45605/d0753d3c88fefffbaa684bafaefdb117.html