Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。如果想要使用Bootstrap,则需要
(1)下载Bootstrap
(2)在页面引入Bootstrap,编写HTML时,按照Bootstrap的规定来编写+自定义。
4.1 初识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- HTML注释:开发版本 -->
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
</head>
<body>
<input type="button" value="提交" />
<input type="button" value="提交" class="btn btn-primary" />
<input type="button" value="提交" class="btn btn-success" />
<input type="button" value="提交" class="btn btn-danger" />
<input type="button" value="提交" class="btn btn-danger btn-xs" />
</body>
</html>
4.2 导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<style>
.navbar {
border-radius: 0; #使标签没有圆角
}
</style>
</head>
<body>
<div class="navbar navbar-default">
<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="#">广西</a></li>
<li><a href="#">上海</a></li>
<li><a href="#">神州</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="#">四川</a></li>
<li><a href="#">上海</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>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登录</a></li>
<li><a href="#">注册</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 -->
</div>
</body>
</html>
4.3 栅格系统
网址:https://v3.bootcss.com/css/#grid
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。分类:响应式,非响应式
响应式,根据屏幕宽度不同做出不同的响应
.col-sm- 750px
.col-md- 970px
.col-lg- 1170px
非响应式,不会根据屏幕宽度不同做出不同的响应
<div class="col-xs-6" style="background-color: red">1</div>
<div class="col-xs-6" style="background-color: green">2</div>
列偏移
使用 .col-md-offset-*
类可以将列向右侧偏移。这些类实际是通过使用 *
选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4
类将 .col-md-4
元素向右侧偏移了4个列(column)的宽度。
<div class="col-sm-offset-2 col-sm-6" style="background-color: green">广东</div>
4.4 container
.container 类用于固定宽度并支持响应式布局的容器
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
<div class="container-fluid">
<div class="col-sm-9">左边</div>
<div class="col-sm-3">右边</div>
</div>
<div class="container">
<div class="col-sm-9">左边</div>
<div class="col-sm-3">右边</div>
</div>
4.5 面板
默认的 .panel
组件所做的只是设置基本的边框(border)和内补(padding)来包含内容。
.panel-heading —> 标题容器,通过.panel-title设置标签
.panel-footer —> 放置按钮或次要文本
.panel-body —>为表格上方添加边框,有分割效果
情景效果
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
4.6 图标
Bootstrap网址:https://v3.bootcss.com/components/#glyphicons
fontawesome网址:https://fontawesome.dashgame.com/
Bootstrap提供图标但是不多,可以用fontawesome组件
4.7Bootstrap依赖
Bootstrap依赖Javascript的类库,JQuery。
下载Jquery,在页面上应用Jquery;在页面上应用Bootstrap的JS类库。