功能强大的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 相关文章推荐
jquery select下拉框操作的一些说明
Apr 02 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
Jul 01 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 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的explode和implode的使用说明
2011/07/17 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
vue登录注册实例详解
2019/09/14 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
python选择排序算法实例总结
2015/07/01 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
Python Lambda函数使用总结详解
2019/12/11 Python
python判断元素是否存在的实例方法
2020/09/24 Python
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
服务员岗位责任制
2014/02/11 职场文书
《识字五》教学反思
2014/03/01 职场文书
个人合作协议书范本
2014/04/18 职场文书
股份转让协议书范本
2015/01/27 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
Python turtle实现贪吃蛇游戏
2021/06/18 Python
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript