Bootstrap(Web框架)的简单使用教程
前言
我们在写前端网页的时候，如果全部都是自己一点一点的编写，工作量巨大，效率不高，而且界面可能也不一定符合大众审美；因此就有了框架来让开发变得更加的简单，且更有效率，而这Web开发中，Bootstrap就是一个很常用的框架。
通过简单的学习了解，知道了Bootstrap框架的概念以及简单的使用方法，接下来就简单的讲一下该框架。
目录
- 前言
- 一、什么是Bootstrap？
- 二、使用步骤
- 1.下载Bootstrap
- 2.部署文件
- 3.创建html页面，引入必要的资源文件
- 三、Bootstrap详解
- 1.栅格系统
- 2.CSS全局样式
- （1）按钮
- （2）图片边框
- （3）表格
- （4）简易登录界面
- 3.常用组件
- （1）导航栏
- （2）分页条
- （3）轮播图
一、什么是Bootstrap？
Bootstrap的概念：
Bootstrap （Web框架）：
一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
Bootstrap是目前很受欢迎的一个前端框架，那么什么是框架呢？
框架：
一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。
Bootstrap 框架的优点：
1. 其中定义了很多的css样式和js插件。开发人员直接可以使用这些样式和插件得到丰富的页面效果。
2. 使用了响应式布局（同一套页面可以兼容不同分辨率的设备）。
什么是响应式布局呢？简单来说就是在不同大小的屏幕上能够有不同的显示效果，比较好的一个例子就是苹果的官网，当屏幕较大时，导航栏显示的很多，而屏幕较小时，导航栏的内容也相应减少。
例：苹果官网
随着屏幕缩小，页面变化为：
而淘宝的官网就不是响应式布局，而是用了两个网站来区分大小屏幕的，当我们屏幕缩小，大屏幕版的显示方式也不会发生变化。
例：淘宝网电脑版
例：淘宝网触屏版
（注：这里只是区分响应式布局和非响应式布局，没有打广告和鼓励大家买东西，希望大家理性消费哈）
二、使用步骤
刚刚大致讲了一下BootStrap框架和它的优点，接下来就开始简单讲一下BootStrap的使用步骤。
1.下载Bootstrap
BootStrap官网下载地址为：https://v3.bootcss.com/
在官网里，不仅仅有下载地址，还有很多对应的组件的使用方法，但我们使用的时候可以去官网查阅。
2.部署文件
下载后解压后复制三个文件夹css、fonts、js到项目中去
3.创建html页面，引入必要的资源文件
导入上图所勾选的三个文件，代码为：
<link href="css/bootstrap.min.css" rel="stylesheet"><script src="js/jquery-3.2.1.min.js"></script><script src="js/bootstrap.min.js"></script>
在html文件中使用方式如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap HelloWorld</title><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="js/jquery-3.2.1.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1></body>
</html>
运行结果如下：
接下来我们就来使用Bootstrap框架，看看其具体的组件怎么实现吧！
三、Bootstrap详解
1.栅格系统
在前面已经简单的介绍了Bootstrap的使用，我们知道Bootstrap中使用的是响应式布局，即同一套页面可以兼容不同分辨率的设备，而在Bootstrap中，响应式布局的实现依赖于栅格系统。
实现：将一行平均分成12个格子，可以指定元素占几个格子。
实现步骤如下：
- 定义容器。相当于之前的table,
容器又可分为两类：
（1）container：两边留白
（2）container-fluid：每一种设备都是100%宽度- 定义行。相当于之前的tr 样式：row
- 定义元素。指定该元素在不同的设备上，所占的格子数目。
样式：col-设备代号-格子数目
设备代号：
（1）xs：超小屏幕 手机 (<768px)：col-xs-12
（2）sm：小屏幕 平板 (≥768px)
（3）md：中等屏幕 桌面显示器 (≥992px)
（4）lg：大屏幕 大桌面显示器 (≥1200px)
注意：
- 一行中如果格子数目超过12，则超出部分自动换行。
- 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
- 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap 栅格系统</title><link href="css/bootstrap.min.css" rel="stylesheet"><script src="js/jquery-3.2.1.min.js"></script><script src="js/bootstrap.min.js"></script><style>.inner {border: 1px solid red;}</style>
</head>
<body>
<div class="container"><div class="row"><div class="col-md-4 inner">栅格</div><div class="col-md-4 inner">栅格</div><div class="col-md-4 inner">栅格</div></div>
</div>
</body>
</html>
代码表示在中等大小的屏幕每个栅格占4格，前面已经知道了一共有12个格子，那么在屏幕较大时，三个栅格各占1/3。
屏幕较大时：
屏幕较小时，不足12格，每个栅格占满一行：
2.CSS全局样式
（1）按钮
不使用Bootstrap，原样式：
<a href="#">Link</a><button type="submit">Button</button><input type="button" value="Input"><input type="submit" value="Submit">
使用Bootstrap，在每一个标签中加上class=“btn btn-default”：
<a class="btn btn-default" href="#">Link</a><button class="btn btn-default" type="submit">Button</button><input class="btn btn-default" type="button" value="Input"><input class="btn btn-default" type="submit" value="Submit">
按钮对比，上面为原样式，下面为使用Bootstrap后的样式：
另外还有几个其他的按钮样式，大家可以根据自己的需要使用：
<div><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-link">（链接）Link</button>
</div>
（2）图片边框
使用方法如下：
<img src="img/xxx" class="img-responsive"/>
<img src="img/xxx" class="img-responsive img-rounded"/>
<img src="img/xxx" class="img-responsive img-circle"/>
<img src="img/xxx" class="img-responsive img-thumbnail"/>
"img-responsive"表示图片始终占满屏幕，随屏幕大小变化而变化；
"img-rounded"表示图片四个边上变为圆角；
"img-circle"表示取图片为圆形状，如果图片过长，会拉伸图片为椭圆；
" img-thumbnail"表示给图片加一个相框。
具体在这里不做图片展示了，大家自己动手试试吧！
（3）表格
<table class="table table-bordered table-hover"><tr><th>编号</th><th>姓名</th><th>年龄</th></tr><tr><td>001</td><td>张三</td><td>23</td></tr><tr><td>002</td><td>李四</td><td>21</td></tr><tr><td>003</td><td>王五</td><td>20</td></tr>
</table>
如果不加上class=“table table-bordered table-hover”，效果为：
使用Bootstrap，加上class=“table table-bordered table-hover”，效果为：
可以看到效果明显美观很多，不仅多了边框，并且放置在上面也挺美观。
（4）简易登录界面
<form class="form-horizontal"><div class="form-group"><label for="exampleInputEmail1" class="col-sm-2 control-label">Email address</label><div class="col-sm-10"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div></div><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">Password</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="Password"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><div class="checkbox"><label><input type="checkbox"> Remember me</label></div></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-default">Sign in</button></div></div>
</form>
效果如图：
3.常用组件
常用组件，包括上面的样式都可以在Bootstrap官网查阅对应的使用方法，将代码修改以达到自己想要的效果，在这里简单讲两个常用的组件的使用方法。
（1）导航栏
<nav class="navbar navbar-inverse"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><!-- 定义汉堡按钮 --><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">首页</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav>
效果如图：
（2）分页条
<nav aria-label="Page navigation"><ul class="pagination"><li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li></ul>
</nav>
效果如图：
（3）轮播图
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators --><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><!-- Wrapper for slides --><div class="carousel-inner" role="listbox"><div class="item active"><img src="img/banner_1.jpg" alt="..."></div><div class="item"><img src="img/banner_2.jpg" alt="..."></div><div class="item"><img src="img/banner_3.jpg" alt="..."></div></div><!-- Controls --><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
</div>
效果如图：
具体的使用只需要复制代码然后改变图片即可。
大家有什么不懂的地方或者想使用的控件就多去Bootstrap官网上查看，很多都有对应的使用方法，如果有不知道代码是什么功能的可以删除又加上对比效果，通过在基础代码上做修改来达到自己想要的效果。文章如果有错误的话欢迎指出，一起加油学习吧！
Bootstrap(Web框架)的简单使用教程相关推荐
- 阿里物联网云平台bone web框架开发简单项目介绍
这个阿里的bone web框架是阿里自己将react+redux封装的 Web 开发框架,使用上进行了简化,对部分功能进行了增强. 集成了路由(基于 history.js + react-router ...
- Java中的tiles_Spring mvc整合tiles框架的简单入门教程（maven）
前言 本教程基于Springmvc,Spring MVC是当前最优秀的MVC框架,自从Spring 2.5版本发布后,由于支持注解配置,易用性有了大幅度的提高.Spring 3.0更加完善,实现了对S ...
- Bootstrap(Web框架)
上次运用了layui的框架 感觉非常实用,这次来了解与使用一下bootstrap框架.这次我们先来主要的了解一下bootstrap框架. 基本结构:Bootstrap 提供了一个带有网格系统.链接样式 ...
- python定时任务apschedule_APScheduler(python 定时任务框架)最简单使用教程
有时候需要部署一些很简单的python定时任务,使用APScheduler是很好的选择.只需要简单的设置几个参数,就可以实现定时.定分甚至秒来跑. 第一步:用pip安装APScheduler pip ...
- python程序框架的描述_简单介绍Python下自己编写web框架的一些要点
在正式开始Web开发前,我们需要编写一个Web框架. 为什么不选择一个现成的Web框架而是自己从头开发呢?我们来考察一下现有的流行的Web框架: Django:一站式开发框架,但不利于定制化: web ...
- 手写简易版web框架
Web框架 Web应用框架(Web application framework)是一种开发框架,用来支持动态网站.网络应用程序及网络服务的开发.Web应用框架有助于减轻网页开发时共通性活动的工作负荷, ...
- Spring 5 新特性：函数式Web框架
2019独角兽企业重金招聘Python工程师标准>>> 正如Juergen博客中所提到的,Spring 5.0的第二个里程碑是引入了一个新的函数式web框架.在这篇文章中,我们将给出 ...
- Go gin web框架介绍
gin框架介绍 一.gin框架介绍 gin是用go语言开发的一个web框架,简单易用,是一个轻量级框架. 二.为什么选择gin 1.运行响应非常快 2.快速开发 3.文档齐全 4.社区活跃 三.特性 ...
- python flask框架是什么_Python三大web框架分别是什么 哪个更好
展开全部 [导读]目前,Python比较2113火的三大5261web框架有Django.Flask和Tornado,要论这三个Web框架哪个更好4102的话,建议一点1653,Django帮我们事先 ...
最新文章
- shell脚本_查找无效网址
- hdu4901 枚举状态（找集合对S（xor） ==T（and））
- 密码算法中iv值是什么_?标检测中的?极?值抑制算法(nms)：python代码解析
- 【多线程】多线程锁住的是什么、std::lock_guard＜std::mutex＞ locker(mutex_)
- js javascript 实现多线程
- python 聚类算法包_Python聚类算法之DBSACN实例分析 python怎么用sklearn包进行聚类
- @ 在 C# string 中的用法
- 易语言PHP非对称加密,openssl调用大集合[易语言源码] | 贝贝吧
- 服务器双硬盘系统安装系统安装,固态机械混合安装教程！双硬盘安装系统的方法...
- MyBatis下载和使用
- ICP许可证的办理条件
- Java随机生成名字大全 手机号
- 【产品】电池容量简介
- oracle ogg checkpoint,OGG目的端的checkpoint table被drop的修复方法
- 如何实现网页视频聊天？
- Lab2 Defusing a Binary Bomb
- 千年db服务器注册,千年服务器架设说明.doc
- justinmind夜话：数据母板系列视频教程之原型设计二十一条军规
- 智能农场 阳光温湿度 检测 远程控制开关 机智云
- 解决Request processing failed； nested exception is com.sun.jersey.api.client.UniformInterfaceException