功能强大的Bootstrap使用手册(一)


Posted in Javascript onAugust 02, 2016

BootStrap对开发者来说最大的好处就是响应式布局和一些优秀的样式。
现在我给大家介绍一些使用BootStrap的步骤和一些常用的东西。

1.编写头部

<head>
 <meta charset="UTF-8">
 <!--为了让ie采用最新的渲染模式,要把这个标签添加上-->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!--针对响应式布局,首先获取设备的物理宽度,根据设备物理宽度设置网页宽度,按照1:1缩放-->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>LearnBootstrap</title>
 <!--直接引用文件-->
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 <!--引用cdn地址-->
 <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

 <!--为了支持ie9以下,要加上这些-->
 <!--[if lt IE 9]>
 <!--让他支持h5标签-->
 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <!--让他支持媒体查询,也就是响应式-->
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <!--[endif]-->
</head>

2.引入js

这个可以写在body

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

3.使用container类
container类是一个常用的div类
主要是用居中功能

<div class="container">hello</div>

4.使用栅格化系统

栅格化系统是BootStrap一个非常常用的一个布局系统
简单的使用如下

<div class="row">
 <!--xs表示在手机上,sm表示在平板上,md表示在桌面上。后面的数字表示占多少列,满屏为12列-->
 <!--内容超过栅格高度,则会增加高度,不会增加宽度-->
 <!--offset表示向右移动几列-->
 <div class="col-xs-12 col-sm-6 col-md-8 col-md-offset-4">.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8</div>
 <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<div class="row">
 <!--push向后移动,pull向前移动-->
 <div class="col-xs-12 col-sm-6 col-md-8 col-md-push-4">.col-xs-12 .col-sm-6 .col-md-8</div>
 <div class="col-xs-6 col-md-4 col-md-pull-8">.col-xs-6 .col-md-4</div>
</div>

可以看到栅格化系统可以根据不同设备调整不同宽度

5.使用表格

<div class="container">
 <!--响应式表格,内容太长可以左右移动-->
 <div class="table-responsive">
 <!--table 后几个分别是表格有边框,鼠标经过tbody行时颜色加深,表格紧缩-->
 <table class="table table-bordered table-hover table-condensed">
 <thead>
 <tr>
 <th>表格标题</th>
 <th>表格标题</th>
 <th>表格标题</th>
 </tr>
 </thead>
 <tbody>
 <!--该行颜色为浅绿-->
 <tr class="success">
 <th>表格内容</th>
 <th>表格内容</th>
 <th>表格内容</th>
 </tr>
 <!--该行颜色为浅蓝-->
 <tr class="info">
 <th>表格内容</th>
 <th>表格内容</th>
 <th>表格内容</th>
 </tr>
 <!--该行颜色为米白-->
 <tr class="warning">
 <th>表格内容</th>
 <th>表格内容</th>
 <th>表格内容</th>
 </tr>
 </tbody>
 </table>
 </div>
</div>

如果是想某一格变颜色也可以在th标签内加类像tr一样

6.使用表单

最基本的用法如下

<div class="container">
 <form>
 <!--的部分项是一个form-group的父布局,里面有label和input-->
 <div class="form-group">
 <!--label的for要和input的id对应-->
 <label for="exampleInputEmail1">Email address</label>
 <!--input的class要设为form-control-->
 <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
 </div>
 <div class="form-group">
 <label for="exampleInputPassword1">Password</label>
 <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
 </div>
 <div class="form-group">
 <label for="exampleInputFile">File input</label>
 <input type="file" id="exampleInputFile">
 <!--帮助提示文字-->
 <p class="help-block">Example block-level help text here.</p>
 </div>
 <div class="checkbox">
 <label>
 <input type="checkbox"> Check me out
 </label>
 </div>
 <button type="submit" class="btn btn-default">Submit</button>
 </form>
</div>

如果将form的类设为form-inline则将所有元素显示在同一行

如果将form的类设为form-horizontal则每个form-group显示一行,不过要自己设置宽度

<div class="container">
 <!--让每一个form-group显示一行,不过每个form-group的子项都要规定宽度-->
 <form class="form-horizontal">
 <div class="form-group">
 <label for="Emai" class="col-md-2 control-label">Email</label>
 <!--input-group让提示和补充显示在同一行-->
 <div class="col-md-10">
 <input class="form-control" type="email" placeholder="Email" id="Emai">
 </div>
 </div>
 <div class="form-group">
 <label for="Passwor" class="col-sm-2 control-label">Password</label>
 <div class="col-sm-10">
 <input class="form-control" type="password" placeholder="Password" id="Passwor">
 </div>
 </div>
 <button type="submit" class="btn btn-primary col-md-offset-2">summit</button>
 </form>
</div>

我们通常在注册账号时,信息错误或者正确他会在旁边提示,而且输入框的颜色会不同
Bootstrap给我们提供了这个很实用的功能

<div class="container">
 <form>
 <!--父div的类要增加两项-->
 <!--成功状态-->
 <div class="form-group has-success has-feedback">
 <label class="control-label" for="inputSuccess2">Input with success</label>
 <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
 <!--右边的图标-->
 <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
 <!--这个信息隐藏,增加了代码的可读性-->
 <span id="inputSuccess2Status" class="sr-only">(success)</span>
 </div>
 <!--警告状态-->
 <div class="form-group has-warning has-feedback">
 <label class="control-label" for="inputWarning2">Input with warning</label>
 <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
 <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
 <span id="inputWarning2Status" class="sr-only">(warning)</span>
 </div>
 <!--错误状态-->
 <div class="form-group has-error has-feedback">
 <label class="control-label" for="inputError2">Input with error</label>
 <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
 <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
 <span id="inputError2Status" class="sr-only">(error)</span>
 </div>
 </form>
</div>

7.按钮

按钮是必不可少的一样东西

<!-- 白色背景 -->
<button type="button" class="btn btn-default">(默认样式)Default</button>
<!-- 蓝色背景 -->
<button type="button" class="btn btn-primary">(首选项)Primary</button>
<!-- 绿色背景 -->
<button type="button" class="btn btn-success">(成功)Success</button>
<!-- 浅蓝色背景 -->
<button type="button" class="btn btn-info">(一般信息)Info</button>
<!-- 橙黄色背景 -->
<button type="button" class="btn btn-warning">(警告)Warning</button>
<!-- 红色背景 -->
<button type="button" class="btn btn-danger">(危险)Danger</button>

类中还可以添加尺寸

<button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button>
 <button type="button" class="btn btn-primary">(默认尺寸)Default button</button>
 <button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button>
 <button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button>

以上就是Bootstrap的使用步骤和常用用法
用上这个框架后不仅开发的速度上去了,质量也提升了。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
AngularJS 避繁就简的路由
Jul 01 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
jQuery+ajax的资源回收处理机制分析
Jan 07 Javascript
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 Javascript
vue2使用keep-alive缓存多层列表页的方法
Sep 21 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 Javascript
js实现图片缓慢放大缩小效果
Aug 02 #Javascript
基于Vuejs实现购物车功能
Aug 02 #Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 #Javascript
js简单时间比较的方法
Aug 02 #Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 #Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 #Javascript
关于微信中a链接无法跳转问题
Aug 02 #Javascript
You might like
php中文本数据翻页(留言本翻页)
2006/10/09 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
JavaScript多种图形实现代码实例
2020/06/28 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
幼儿园校车司机的岗位职责
2014/01/30 职场文书
面试后感谢信怎么写
2014/02/01 职场文书
洗发水广告词
2014/03/13 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
2014年信访工作总结
2014/11/17 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
工作态度不好检讨书
2015/05/06 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书