BootStrap简介
概述:
已有的前端框架, 里边定义了大量的CSS样式 和 JS脚本, 将需要用到的直接复制过来, 然后简单修改即可.
框架:
可简单理解为针对于某类功能的 半成品.
作用:
- Bootstrap 使得 Web 开发更加快捷,高效
- BootStrap支持响应式开发,解决了移动互联网前端开发问题
响应式页面:
概述:
指的是页面会根据屏幕的分辨率, 进行自适应调节.
特点:
页面会根据屏幕的分辨率, 进行自适应调节, 方便用户浏览和查看.
https://www.taobao.com/ //非响应式页面
https://main.m.taobao.com/index.html //响应式页面
使用步骤
1. 从官网下载 bootstrap 框架相关的资料
官网 www.bootcss.com //目前最新版本 3.3.7
2. 通过IDEA新建一个 静态 Web 网站(模块)
3. 把 bootstrap/dist/文件夹下的三个目录, 全部复制到新建号的 静态web网站中
4. 把 jquery-1.11.3.min.js 复制到静态web网站的js文件夹中
因为bootstrap里面的一些插件的功能用到了JQuery里面的功能
5. 在 静态web网站 下创建一个文件夹
6. 在新建的文件夹中新建html页面, 可在页面中尝试使用BootStrap的内容
1. 引入BootStrap的 css样式
<link href="../css/bootstrap.min.css" rel="stylesheet"/>
<link href="../css/bootstrap-theme.min.css" rel="stylesheet"/>
//后面一个可以不引, 里面是一些补充样式
2. 引入JQuery插件
js依赖jQuery, 因此jQuery必须先引入
<script src="../js/jquery-1.11.3.min.js></script>
3. 引入BootStrap的 JS相关的脚本文件
<script src="../js/bootstrap.min.js></script>
BootStrap常用组件
栅格系统
概述:
BootStrap为了便于开发响应式页面, 把一行分为12列, 我们无需设置宽度, 只要设置 在什么分辨率下 占 几列.
分辨率的划分:
sm: //小屏幕, 理解为: ipad
md: //中屏幕, 理解为: 笔记本电脑显示器
lg: //大屏幕, 理解为: 台式机的大显示器
案例:
//格式: 布局方式 -> 行 -> 列 -> 元素.
<!--设置页面布局方式为: 流式布局-->
<div class="container-fluid">
<!--设置以下元素为一行-->
<div class="row">
<!--需求: 设置一行有4个div-->
<div class="col-md-4">div111</div>
<div class="col-md-4">div222</div>
<div class="col-md-4">div333</div>
</div>
</div>
开发响应式页面:
<!--设置页面布局方式为: 流式布局-->
<div class="container-fluid">
<!--设置以下元素为一行-->
<div class="row">
<!--需求: 大屏幕一行4个div, 中屏幕一行2个div, 小屏幕一行1个div-->
<div class="col-lg-3 col-md-6 col-sm-12">div111</div>
<div class="col-lg-3 col-md-6 col-sm-12">div222</div>
<div class="col-lg-3 col-md-6 col-sm-12">div333</div>
<div class="col-lg-3 col-md-6 col-sm-12">div333</div>
</div>
</div>
列偏移 和 隐藏/显示列
<div class="container-fluid">
<!--行-->
<div class="row">
<!--需求1: 演示偏移列.-->
<!--col-md-offset-4的意思是: 向右偏移4列, 因为一行12列, 所以相当于你写了个了 col-md-8-->
<div class="col-md-offset-4">div111</div>
<div class="col-md-4">div222</div>
<div class="col-md-4">div333</div>
</div>
<br/>
<br/>
<br/>
<!--需求2: 演示 响应式工具(大白话: 就是在指定的分辨率下, 隐藏, 或者显示指定的div)-->
<div class="row">
<!--hidden-lg 在大屏状态下隐藏-->
<!--visible-lg 在大屏状态下显示-->
<div class="col-lg-3 col-md-6 col-sm-12 visible-lg">div111</div>
<div class="col-lg-3 col-md-6 col-sm-12">div222</div>
<div class="col-lg-3 col-md-6 col-sm-12">div333</div>
<div class="col-lg-3 col-md-6 col-sm-12 hidden-lg">div444</div>
</div>
</div>
列表
<!--布局方式-->
<div class="container-fluid">
<!--行-->
<div class="row">
<!--无序列表-->
<!--
list-unstyled: 取消列表的样式.
list-inline: 在一行, 设置水平布局.
-->
<ul class="list-inline">
<!--列表项-->
<li>飞机</li>
<li>高铁</li>
<li>汽车</li>
</ul>
</div>
</div>
按钮
<!--布局方式-->
<div class="container-fluid">
<!--行-->
<div class="row">
<!--btn-default: 默认按钮的样式-->
<button type="button" class="btn btn-default">(默认样式)Default</button>
<!--btn-primary: 首选项按钮的样式-->
<button type="button" class="btn btn-primary">(首选项)Primary</button>
<!--btn-success: 成功按钮的样式, btn-lg: 大按钮 btn-sm: 小按钮 btn-xs:超小按钮-->
<button type="button" class="btn btn-success btn-lg">(成功)Success</button>
<!--btn-info: 一般信息按钮的样式-->
<button type="button" class="btn btn-info">(一般信息)Info</button>
<!--btn-warning: 警告按钮的样式-->
<button type="button" class="btn btn-warning">(警告)Warning</button>
<!--btn-danger: 危险按钮的样式-->
<button type="button" class="btn btn-danger">(危险)Danger</button>
<!--btn-link: 链接按钮的样式-->
<button type="button" class="btn btn-link">(链接)Link</button>
</div>
</div>
导航条
<!--布局方式-->
<div class="container-fluid">
<!--导航条, html5的新特性, navbar等价于div-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!--设置导航条中的内容-->
<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="#">手机数码 <span class="sr-only">(current)</span></a></li>
<li><a href="#">电脑办公</a></li>
<li><a href="#">水果生鲜</a></li>
<li><a href="#">户外运动</a></li>
</ul>
<!--navbar-right: 设置居右对齐.-->
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
轮播图
<!--布局方式-->
<div class="container-fluid">
<!--定义行: -->
<div class="row">
<!--轮播图代码-->
<!--轮播图代码从这里开始, 这个div, 表示轮播图最外层的div-->
<!--设置轮播图, 图片切换的 周期, 单位是毫秒.-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">
<!--设置一个一个的轮播项, 就是轮播图中间 下方的小圆点-->
<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>
<!--设置具体的图片, 即: 该div中存储的是所有的轮播图 图片-->
<div class="carousel-inner" role="listbox">
<!--第一张图片-->
<div class="item active">
<!--图片路径-->
<img src="../img/1.jpg" alt="图片1">
<!--图片的描述信息,会展示在 录播图中间, 下方位置.-->
<div class="carousel-caption">
这是图片1
</div>
</div>
<!--第二张图片-->
<div class="item">
<!--图片路径-->
<img src="../img/2.jpg" alt="图片2">
<!--图片的描述信息,会展示在 录播图中间, 下方位置.-->
<div class="carousel-caption">
这是图片2
</div>
</div>
<!--第三张图片-->
<div class="item">
<!--图片路径-->
<img src="../img/3.jpg" alt="图片3">
<!--图片的描述信息,会展示在 录播图中间, 下方位置.-->
<div class="carousel-caption">
这是图片3
</div>
</div>
</div>
<!--这个是录播图左边 和 右边 那个箭头-->
<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>
</div>
</div>
对齐方式
<!--布局方式-->
<div class="container-fluid">
<!--定义行-->
<div class="row">
<!--
对齐方式:
text-left: 居左对齐, 默认
text-center: 居中对齐
text-right: 居右对齐
-->
<p class="text-center">我是111</p>
<p class="text-right">我是222</p>
<p class="text-left">我是333</p>
<p>我是444</p>
</div>
</div>
表单
<!--第二行: form-horizontal : 每组元素占一行, 即: 设置改组元素水平对齐.-->
<div class="row">
<!--定义一个表单-->
<form class="form-horizontal">
<!--第一组-->
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" 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>
</div>
分页
<!--布局方式-->
<div class="container-fluid">
<!--nav h5的新特性, 相当于 div, 这里的nav表示 分页的最外层.-->
<!--
disable: 禁用
active: 选中.
-->
<nav aria-label="Page navigation">
<!--无序列表-->
<ul class="pagination">
<!--列表项-->
<li>
<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 class="disabled" ><a href="#">4</a></li>
<li class="active"><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li>
<a href="#" aria-label="Next">
<!--» 表示朝右的两个大于号 >> -->
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>