首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap中CSS的使用方法

Posted in Javascript onFebruary 17, 2016

Bootstrap 使用了一些 HTML5 元素和 CSS 属性，所以需要使用 HTML5 文档类型。

<!DOCTYPE html>
<html lang="zh-CN">
 ...
</html>

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

<meta name="viewport" content="width=device-width, //视口宽度为设备宽度
   initial-scale=1.0, //缩放程度
   maximum-scale=1.0, //最大缩放级别（可选）
   user-scalable=no">//禁止页面缩放（可选）

Bootstrap 使用 Normalize 来建立跨浏览器的一致性。Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。

关于布局

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

img-responsive 用于img元素

container 用于包裹页面上的内容的元素

  • 行需要放在container，并用来创建列的水平组。
  • 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。

Bootstrap中CSS的使用方法

  • 行列可相互嵌套，嵌套后的自适应以父级元素为准，而不是设备宽度
  • 要创建三个相等的列，则使用三个 col-xs-4，要是12个列就12个col-xs-1。
<div class="container">
 <div class="row">
 <div class="col-xs-6 col-md-2 col-md-offset-1"></div>
 <div class="col-xs-6 col-md-3"></div>
 <div class="col-xs-6 col-md-3"></div>
 <div class="col-xs-6 col-md-3"></div>
 </div>
 <div class="row">...</div>
</div>
<div class="container">.... 
<!--以上代码在手机上就是两行两列，在电脑上是一行四列，其中第一列前面有空白，比其它列宽度小三分之一-->
//可使用.col-md-push-* 和 .col-md-pull-* 这种类设定显示，col-md-push-6按照我个人的理解，是在左面浮动了6列，然后再插入元素，col-md-pull-3则是在右边浮动了3列，然后从右往左插入元素
  • 媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
//对于所有带有 min-width: @screen-sm-min 的设备，如果屏幕的宽度小于 @screen-sm-max，则会进行一些处理。

关于排版

  • 关于文本
<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>灰
<p class="text-primary">本行内容带有一个 primary class</p>蓝
<p class="text-success">本行内容带有一个 success class</p>绿
<p class="text-info">本行内容带有一个 info class</p>深蓝
<p class="text-warning">本行内容带有一个 warning class</p>黄
<p class="text-danger">本行内容带有一个 danger class</p>红

Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title 属性添加了文本）。为了得到一个更小字体的文本，请添加 .initialism 到 <abbr>。

<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

  • 使用 <address> 标签，您可以在网页上显示联系信息。
  • 使用<Blockqoute>标签作为引用
<blockquote>这是一个带有源标题的引用。<small>Someone famous in Source Title</small></blockquote>
  • list-unstyled用于未定义样式列表ul，list-inline用于水平列表ul
  • pre-scrollable使pre可滚动
  • <code>内联显示代码，<pre>显示多行代码

关于表格

Bootstrap中CSS的使用方法

Bootstrap中CSS的使用方法

通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。

<div class="table-responsive">
 <table class="table">
 <caption>响应式表格布局</caption>
 <thead>
 <tr>
 <th>产品</th>
 <th>付款日期</th>
 <th>状态</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>产品1</td>
 <td>23/11/2013</td>
 <td>待发货</td>
 </tr>
 </tbody>
 </table>
</div>

关于表单

  • 在form上加上属性role="form"就会应用Bootstrap基本的表单结构，此时默认为垂直表单
  • 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
  • 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。
<input type="text" class="form-control" placeholder="文本输入"/>
<textarea class="form-control" rows="3"></textarea>
<label for="name">可多选的选择列表</label>
 <select multiple class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>
  • 在form加上类calss=form-inline，那么表单元素就会变成内联的
  • 在form加上类class=form-horizontal，那么表单元素就会变成水平的

1）设置表单控件padding和margin值
2）改变“form-group”的表现形式，类似于网格系统的“row”。
3）向标签添加 class .control-label。

  • 复选框和单选框

1）对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。

  • 当您需要在一个水平表单内的表单标签后放置纯文本时，请在 <p> 上使用 class .form-control-static。
  • 禁用的输入框 input，如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性
  • 对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。
  • Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。
  • .input-lg 和.input-sm可以改变输入框的高度样式
  • help-block   Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在 <input> 后使用 .help-block。
<input class="form-control" type="text" placeholder="">
 <span class="help-block">一个较长的帮助文本块，超过一行，
 需要扩展到下一行。本实例中的帮助文本总共有两行。</span>

关于按钮

<button type="button" class="btn btn-default">默认按钮</button>

<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>

<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>

<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>

<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>

<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>

<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>

按钮的大小

<p>
 <button type="button" class="btn btn-primary btn-lg">
 大的原始按钮
 </button>
</p>
<p>
 <button type="button" class="btn btn-primary">
 默认大小的原始按钮
 </button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-sm">
 小的原始按钮
 </button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-xs">
 特别小的原始按钮
 </button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-lg btn-block">
 块级的原始按钮
 </button>
</p>
  • class为active表示激活按钮
  • class为disabled表示禁用按钮

在a和input上使用按钮class也能弄成按钮的样子，但是考虑到跨浏览器的问题还是在button上比较好。

关于图片

关于图片的样式除了之前提到的img-responsive用于图片的自适应之外还有以下三个样式：

  • .img-rounded 圆角图片
  • .img-circle 圆形图片
  • .img-thumbnail 缩略图功能

 关于其它样式类

  • .pull-left左浮动
  • .pull-right右浮动
  • center-block内容居中
  • .clearfix清除浮动
  • .caret显示下拉式
  • .close关闭图标

关于不同设备

Bootstrap中CSS的使用方法

Bootstrap中CSS的使用方法

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是Bootstrap中CSS的使用方法，希望大家会喜欢。

Bootstrap中CSS的使用方法

- Author -

Troy123

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js 判断 enter 事件
Feb 12 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
详解JS函数重载
Dec 04 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
JavaScript实现点击图片换背景
Nov 20 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 #Javascript
基于javascript简单实现对身份证校验
Jan 25 #Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 #Javascript
Bootstrap布局组件应用实例讲解
Feb 17 #Javascript
深入php面向对象、模式与实践
Feb 16 #Javascript
三个js循环的关键字示例(for与while)
Feb 16 #Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 #Javascript
Stater(1) csgo(1) protocol(1) xps(1) 404(1) CAD(1) sock(2) 403(1) XPathParser(1) macos(1)
You might like
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
JQuery组件基于Bootstrap的DropDownList（完整版）
2016/07/05 Javascript
vue router demo详解
2017/10/13 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值，数据同步
2019/07/13 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
Python实现端口复用实例代码
2014/07/03 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
python 命名规范知识点汇总
2020/02/14 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
python 如何对logging日志封装
2020/12/02 Python
匈牙利超级网上商店和优惠：Alza.hu
2019/12/17 全球购物
2019年Java 最常见的 面试题
2016/10/19 面试题
旅游管理毕业生自荐信
2013/11/05 职场文书
初中生物教学反思
2014/01/10 职场文书
应届电子商务毕业自荐书范文
2014/02/11 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
企业宣传语大全
2015/07/13 职场文书
2019交通安全宣传标语集锦！
2019/06/28 职场文书