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 非图片动态loading效果实现代码
Apr 09 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 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
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
javascript html 静态页面传参数
2009/04/10 Javascript
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
js实现数字滚动特效
2019/12/16 Javascript
python实现井字棋游戏
2020/03/30 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
python实现xlsx文件分析详解
2018/01/02 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
社区道德讲堂实施方案
2014/03/21 职场文书
情人节寄语大全
2014/04/11 职场文书
医药销售自荐书
2014/05/29 职场文书
股指期货心得体会
2014/09/13 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
党员评议自我评价
2015/03/03 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技