Bootstrap的基本应用要点浅析


Posted in Javascript onDecember 19, 2016

Bootstrap是Twitter推出的一个由动态CSS语言Less写成的开源CSS/HTML框架(同时提供Sass 移植版代码)。

用法:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap的HTML标准模板</title> 
  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!--你自己的样式文件 -->
  <link href="css/your-style.css" rel="stylesheet">  
  <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询,如果不需要用可以移除 -->
  <!--[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.4.2/respond.min.js"></script>
  <![endif]-->
 </head>
 <body>
  <h1>Hello, world!</h1>
  <!-- 如果要使用Bootstrap的js插件,必须先调入jQuery -->
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
  <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 </body>
</html>

标题样式:

Bootstrap中可以通过class名实现h1-h6比如:<div class="h1">Bootstrap标题</div>

在Web的制作中,常常会碰到在一个标题后面紧跟着一行小的副标题:

<h1>Bootstrap标题<small>我是副标题</small></h1>

.lead   :增大文本字号,加粗;

给文本添加颜色,通过颜色来强调:

.text-muted:提示,使用浅灰色(#999)

.text-primary:主要,使用蓝色(#428bca)

.text-success:成功,使用浅绿色(#3c763d)

.text-info:通知信息,使用浅蓝色(#31708f)

.text-warning:警告,使用黄色(#8a6d3b)

.text-danger:危险,使用褐色(#a94442)

文本对其:在CSS中常常使用text-align来实现文本对其,bootstrap中:

Text-left   左对齐

Text-center 居中对齐

Text-right   右对齐

Text-justify  两端对齐

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

通过class来 操作在相应的屏幕上的布局

手机屏幕(<768px) 类前缀.col-xs-

平板屏幕(>=768px)类前缀.col-sm-

中等屏幕(>=992px)类前缀.col-md-

大屏幕  (>=1200px)类前缀.col-lg-

列数都为12;所有的列(column)必须放在 .row内

<div class=”row”>
<div class=“col-xs-12 clo-md-8 clo-md-6 col-lg-4”>
<div class=“col-xs-12 clo-md-4 clo-md-6 col-lg-4”>
</div>

实例:

<div class=”container”>
<div class=”row”>
内容
</div>
</div>

将最外层的布局元素 .container修改为 .container-fluid  就可以将固定宽度的栅格布局转换成100%宽度的布局

偏移:

有时候我们不希望相邻的列紧挨在一起,可以用列偏移(offset)来实现  给要偏移的元素加 .col-md-offset-*   (*号代表需要偏移的列数)

例如:“col-md-offset-4”就是在中等屏幕的时候向右偏移4列

列排序:

列排序就是改变列表的方向,就是改变左右浮动,并且设置浮动的距离,通过添加类名实现:

“col-md-push-*”和”col-md-pull-*”(*号代表偏移列数)

向右偏移写push   向左写pull;

列的嵌套:

Bootstrap框架还支持列的嵌套

你可以在列中添加一个或者多个行(rom),然后在这个容器中插入列(像前面的一样)

嵌套的列  在写.col-md-*  的时候是按照父盒子的基础上 再进行分配

以上所述是小编给大家介绍的Bootstrap的基本应用要点浅析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js异或加解密效果代码
Jun 25 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 Javascript
JavaScript获取时区实现过程解析
Sep 24 Javascript
从原生JavaScript到React深入理解
Jul 23 Javascript
详解javascript获取url信息的常见方法
Dec 19 #Javascript
js封装tab标签页实例分享
Dec 19 #Javascript
jQuery焦点图轮播效果实现方法
Dec 19 #Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 #Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 #Javascript
jQuery网页定位导航特效实现方法
Dec 19 #Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 #Javascript
You might like
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
Apache2 httpd.conf 中文版
2006/11/17 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
php和nginx交互实例讲解
2019/09/24 PHP
checkbox勾选判断代码分析
2014/06/11 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
使用Python的PIL模块来进行图片对比
2016/02/18 Python
python的文件操作方法汇总
2017/11/10 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
python for 循环获取index索引的方法
2019/02/01 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
使用Python实现牛顿法求极值
2020/02/10 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
python switch 实现多分支选择功能
2020/12/21 Python
python中最小二乘法详细讲解
2021/02/19 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
html5.2 dialog简介详解
2018/02/27 HTML / CSS
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
委托证明模板
2014/09/16 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python