功能强大的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 相关文章推荐
JS 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
javascript判断机器是否联网的2种方法
Aug 09 Javascript
Javascript动画的实现原理浅析
Mar 02 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 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
一个odbc连mssql分页的类
2006/10/09 PHP
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
js实现微信分享代码
2020/10/11 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
利用Python实现图书超期提醒
2016/08/02 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
Python numpy 常用函数总结
2017/12/07 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
python利用tkinter实现屏保
2019/07/30 Python
Python的条件锁与事件共享详解
2019/09/12 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
python实现udp传输图片功能
2020/03/20 Python
如何用python批量调整视频声音
2020/12/22 Python
小学运动会表扬稿
2014/01/19 职场文书
自考毕业自我鉴定
2014/03/18 职场文书
法制宣传教育方案
2014/05/09 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
培训后的感想
2015/08/07 职场文书
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android
JS实现简单的九宫格抽奖
2022/06/28 Javascript