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 相关文章推荐
如何用javascript控制上传文件的大小
Oct 26 Javascript
JQuery 学习笔记 选择器之二
Jul 23 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 Javascript
创建echart多个联动的示例代码
Nov 23 Javascript
vue过滤器用法实例分析
Mar 15 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之第八天
2006/10/09 PHP
php 时间计算问题小结
2009/01/04 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
jQuery标签替换函数replaceWith()的使用例子
2014/08/28 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
python opencv 简单阈值算法的实现
2019/08/04 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
python实现拼图小游戏
2020/02/22 Python
python numpy--数组的组合和分割实例
2020/02/24 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
全球性的女装店:storets
2019/06/12 全球购物
奥巴马演讲稿
2014/01/08 职场文书
行政内勤岗位职责
2014/04/07 职场文书
务虚会发言材料
2014/12/25 职场文书
民事上诉状范文
2015/05/22 职场文书