BOOTstrap3 各类CSS样式范例

来源：互联网发布：qt编程用什么软件编辑：程序博客网时间：2024/05/16 11:32

1.5 Bootstrap 范例

[html] view plain copy
<!DOCTYPE html>                                             
<html lang="zh-cn">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">  
  <!-- Bootstrap 核心 CSS 文件-->  
  <link rel="stylesheet" href="css/bootstrap-3.3.7.min.css">  
   
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->  
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->  
<!--[if lt IE 9]>  
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>  
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>  
<![endif]-->  
   
  <!-- Bootstrap 的 JavaScript 插件需要引入 jQuery -->  
  <scriptsrcscriptsrc="js/jQuery.min.js"></script>  
  <!-- Bootstrap 核心 JavaScript 文件 -->  
  <scriptsrcscriptsrc="js/bootstrap-3.3.7.min.js"></script>  
</head>  
<body>  
</body>  
</html>  

注1：HTML 5 文档类型（Doctype）

Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 html5 文档类型（Doctype）。

注2：移动设备优先是 Bootstrap 3 的最显著的变化。

在之前的 Bootstrap 版本中（直到 2.x），您需要手动引用另一个 CSS，才能让整个项目友好的支持移动设备。

现在不一样了，Bootstrap 3 默认的 CSS 本身就对移动设备友好支持。

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加viewport meta 标签，如下所示：

width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width可以确保它能正确呈现在不同设备上。

initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。

在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。

通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。

注3：Bootstrap的.css 和.js 放在css文件，js文件下；font文件放在css文件同目录下，

因为写图标<span class="glyphicon glyphicon-search"></span>时，按照以下CSS规则找到图标：

@font-face { //自定义字体

font-family: 'Glyphicons Halflings';

src: url('../fonts/glyphicons-halflings-regular.eot');

src:url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular')

format('svg'); }

.glyphicon {

position: relative;

top: 1px;

display: inline-block;

font-family: 'Glyphicons Halflings';

-webkit-font-smoothing: antialiased;

font-style: normal;

font-weight: normal;

line-height: 1;

-moz-osx-font-smoothing: grayscale;

}

注4：对原样式不满意，可以写myBootstrap .css放在link Bootstrap的css之后。

2排版样式

2.1页面主体

Bootstrap 将全局font-size 设置为14px，line-height 行高设置为1.428(即20px)；

<p>段落元素被设置等于1/2 行高(即10px)；颜色被设置为#333。

2.2标题

从h1 到h6《36px、30px、24px、18px、14px、12px》

并且还支持普通内联元素定义class=(.h1 ~ h6)来实现相同的功能。

//内联元素使用标题字体

<span class="h1">Bootstrap</span>

<h2>Bootstrap 框架<small>Bootstrap小标题</small></h2>

2.3内联文本元素

//添加标记，<mark>元素或.mark 类

<p>Bootstrap<mark>框架</mark></p>

//各种加线条的文本

<del>Bootstrap 框架</del>//删除的文本

<s>Bootstrap 框架</s>//无用的文本

<ins>Bootstrap 框架</ins>//插入的文本

<u>Bootstrap 框架</u>//效果同上，下划线文本

//各种强调的文本

<small>Bootstrap 框架</small>//标准字号的85%

<strong>Bootstrap 框架</strong>//加粗700

<em>Bootstrap 框架</em>//倾斜

2.4对齐

<p class="text-left">Bootstrap 框架</p> //居左

<p class="text-center">Bootstrap 框架</p> //居中

<p class="text-right">Bootstrap 框架</p> //居右

<p class="text-justify">Bootstrap 框架</p> //两端对齐，支持度不佳

<p class="text-nowrap">Bootstrap框架</p> //不换行

2.5大小写

//设置英文文本大小写

<p class="text-lowercase">Bootstrap 框架</p> //小写

<p class="text-uppercase">Bootstrap 框架</p> //大写

<p class="text-capitalize">Bootstrap 框架</p>//首字母大写

2.6缩略语

//缩略语

Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>

2.7地址文本

//设置地址，去掉了倾斜，设置了行高，底部20px

<strong>Twitter,Inc.</strong><br>

795 Folsom Ave, Suite 600<br>

San Francisco, CA 94107<br>

<abbr title="Phone">P:</abbr> (123) 456-7890

</address>

2.8引用文本

//默认样式引用，增加了做边线，设定了字体大小和内外边距

Bootstrap 框架

</blockquote>

//反向

Bootstrap 框架

</blockquote>

2.9列表排版

//移出默认样式

//设置成内联

//水平排列描述列表

<dt>Bootstrap</dt>

<dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd>

</dl>

2.10代码

//内联代码

//用户输入

press <kbd>ctrl + ,</kbd>

//代码块

<pre><p>Pleaseinput...</p></pre>

3表格和按钮

3.1表格：table

//对table使用，可以同时使用

【基本格式：class="table"】

【条纹状表格：class="table table-striped"】（隔行变色）

【带边框的表格：class="table table-bordered"】

【悬停鼠标：class="table table-hover"】（悬停变色）

【精简表格：class="table table-condensed "】（padding减半）

//对<tr>, <th> 和 <td> 使用

【状态类：active、success、info、warning、danger】

【隐藏某一行：class="sr-only"】：<trclass="sr-only">

//对<table>父元素使用，响应式，小于768px 水平滚动

【响应式表格：class="table-responsive"】

</div>

3.2按钮

3.2.1可作为按钮使用的标签或元素

//转化成普通按钮

<button class="btn btn-default">Button</button>

注意事项有三点：

(1).针对组件的注意事项

虽然按钮类可以应用到<a> 和<button> 元素上，但是，导航和导航条组件只支持

<button> 元素。

(2).链接被作为按钮使用时的注意事项：

如果<a> 元素被作为按钮使用-- 并用于在当前页面触发某些功能-- 而不是用于

链接其他页面或链接当前页面中的其他部分，那么，务必为其设置role="button" 属性。

(3).跨浏览器展现：

我们总结的最佳实践是：强烈建议尽可能使用<button> 元素来获得在各个浏览器上获得相匹配的绘制效果。

另外，我们还发现了Firefox <30 版本的浏览器上出现的一个bug，其表现是：阻止我们为基于<input> 元素所创建的按钮设置line-height 属性，这就导致在Firefox 浏览器上不能完全和其他按钮保持一致的高度。

3.2.2预定义样式：

【btn-default：默认样式】

【btn-success：成功样式】

【btn-info：一般信息样式】

【btn-warning：警告样式】

【btn-danger：危险样式】

【btn-primary：首选项样式】

【btn-link：链接样式】

3.2.3尺寸大小

【从大到小的尺寸】

【class="btn btn-lg"、class="btn"、class="btn btn-sm"、class="btn btn-xs"】

3.2.4块级按钮

//块级换行,且宽度拉伸至父元素100%的宽度

<button class="btn btn-block">Button</button>

3.2.5激活状态

//激活按钮

<button class="btn active">Button</button>

3.2.6禁用状态

//禁用按钮

<button class="btn" disabled="disabled">Button</button>

4表单和图片

4.1图片

Bootstrap 提供了三个可对图片应用简单样式的 class：

·img-rounded：添加 border-radius:6px 来获得图片圆角。

·img-circle：添加 border-radius:50% 来让整个图片变成圆形。

·img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

//三种形状

//响应式图片

4.2表单

4.2.1基本格式：

·向 <form> 元素添加 role="form"。

·把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。

·向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" (焦点事件)

</div>

<label>

<input type="checkbox">请打勾

</label>

</div>

</form>

4.2.2内联表单：【form-inline】

//让表单左对齐浮动，并表现为inline-block内联块结构

注：当小于768px，会恢复独占样式

4.2.3水平排列：【form-horizontal】

·向父 <form> 元素添加 class .form-horizontal。

·把标签和控件放在一个带有 class .form-group 的 <div> 中。

·向标签添加 class .control-label。

</div>

</div>

</form>

效果：

4.2.4表单合组：【input-group-addon】

//前后增加片段

//也可以是<span class="input-group-addon">￥</span>

//也可以是<span class="input-group-addon">.00</span>

</div>

效果：

4.2.5复选框和单选框：

//设置复选框，在一行

<label>

<input type="checkbox">体育

</label>

</div>

//设置禁用的复选框【disabled】，对div使用class里，对input fieldsed作为属性使用。

<label>

<input type="checkbox" disabled>音乐

</label>

</div>

//对每个复选框使用，设置内联一行显示的复选框【checkbox-inline】

<input type="checkbox">体育

</label>

<input type="checkbox" disabled>音乐

</label>

//设置单选框：【radio】

<label>

<input type="radio"name="sex" disabled>男

</label>

</div>

4.2.6下拉列表

//设置下拉列表，form-control焦点事件，multiple多选

</select>

</select>

4.2.7校验状态

【has-error：错误状态、has-success：成功状态、has-warning：警告状态】

//对父元素使用可以使文字和框都变色

</div>

效果：

4.2.8添加额外的图标

【glyphicon-ok：成功状态、glyphicon-warning-sign：警告状态、glyphicon-remove：错误状态】

//文本框右侧内置文本图标

</div>

效果：

4.2.9控制尺寸

//可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度

<input type="password" class="form-control input-lg"> //大

<input type="password" class="form-control"> //中

<input type="password" class="form-control input-sm"> //小

注：也可以设置父元素form-group-lg、form-group-sm，来调整。

5 辅组类

5.1 情景文本颜色，如果文本是个链接鼠标移动到文本上会变暗

【text-muted：柔和灰】

【text-primary：主要蓝】

【text-success：成功绿】

【text-info：信息蓝】

【text-warning：警告黄】

【text-danger：危险红】

5.2 情景背景色，如果文本是个链接鼠标移动到文本上会变暗

【bg-primary：主要蓝】

【bg-success：成功绿】

【bg-info：信息蓝】

【bg-warning：警告黄】

【bg-danger：危险红】

5.3关闭按钮

5.4 三角符号

5.5 快速浮动

注：这个浮动其实就是float，只不过使用了!important 加强了优先级。

5.6 块级居中

注：就是margin:x auto；并且设置了display:block;。

5.7 清理浮动

</div>

注：clearfix放在浮动的父元素上，实际是:after来实现的。

5.8 显示和隐藏

<div class="hidden">hidden</div>

6 响应式工具

在媒体查询时，针对不同的屏幕大小，有时需要显示和隐藏部分内容。响应式工具类，就提供了这种解决方案。响应式实用工具目前只适用于块和表切换。

//超小屏幕激活显示

<div class="visible-xs-block">Bootstrap</div>

//超小屏幕激活隐藏

<div class="hidden-xs">Bootstrap</div>

超小屏幕
手机 (<768px)

小屏幕
平板 (≥768px)

中等屏幕
桌面 (≥992px)

大屏幕
桌面 (≥1200px)

.visible-xs-*

可见

隐藏

.visible-sm-*

隐藏

可见

隐藏

.visible-md-*

隐藏

可见

隐藏

.visible-lg-*

隐藏

可见

.hidden-xs

隐藏

可见

.hidden-sm

可见

隐藏

可见

.hidden-md

可见

隐藏

可见

.hidden-lg

可见

隐藏

从 v3.2.0 版本起，形如 .visible有了三种变体，*是block或inline或inline-block，列表如下：

.visible-*-block

display: block;

.visible-*-inline

display: inline;

.visible-*-inline-block

display: inline-block;

因此，以超小屏幕（xs）为例，可用的 .visible-*-* 类是：.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。

阅读全文

0 0