功能强大的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 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
vue组件命名和props命名代码详解
Sep 01 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
Memcached常用命令以及使用说明详解
2013/06/27 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
javascript 动态添加事件代码
2008/11/30 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
Vue 图片压缩并上传至服务器功能
2020/01/15 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
Python subprocess模块学习总结
2014/03/13 Python
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
详解Python中的测试工具
2019/06/09 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
社区母亲节活动记录
2014/03/06 职场文书
欢送会主持词
2015/07/01 职场文书
新课程改革心得体会
2016/01/22 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书