功能强大的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面向对象编程
Mar 02 Javascript
地震发生中逃生十大法则
May 12 Javascript
js CSS操作方法集合
Oct 31 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
JS实现进度条动态加载特效
Mar 25 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 Javascript
OpenLayers3实现测量功能
Sep 25 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 5.0对象模型深度探索之绑定
2006/09/05 PHP
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
PHP6 先修班 JSON实例代码
2008/08/23 PHP
基于Zookeeper的使用详解
2013/05/02 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
Document对象内容集合(比较全)
2010/09/06 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
vue小白入门教程
2018/04/02 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
Python实现购物系统(示例讲解)
2017/09/13 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
python中p-value的实现方式
2019/12/16 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
幼儿园教师国培感言
2014/02/02 职场文书
离婚协议书格式
2014/11/21 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
投诉书范文
2015/07/02 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
Python max函数中key的用法及原理解析
2021/06/26 Python