1. BootStrap特点
- 简洁、直观、强悍的前端开发框架，html. css.javascript工具集，让web开发更速、简单，
- 基于html5. css3的bootstrap, 具有大量的诱人特性:友好的学习曲线，卓越的兼容性,响应式设计，12列 格网，样式向 导交
- 自定义JQuery插件，完整的类库，bootstrap3 基于Less, bootstrap4 基于Sass的CSS预处理技术
- Bootstrap响应式布局设计,让一个网站可以兼容不同分辨率的设备，Bootstrap 响应式布局设计，给用户提供 更好的视觉使用体验。
- 丰富的组件
2.下载与使用
- 拷贝dist/css中的bootstrap.min.css到项目Css中
- 拷贝dist/js中的bootstrap.min.js到项目的js中
- 下载jqueryjs jQuery
- 在html中模板为:
<!DOCTYPE html>
<html lang='en">
<head>
<meta charset="utf-8">
<1--使用X-UA-Compatible来设置工E浏览器兼容模式最新的演染模式-->
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<!--
viewport表示用户是否可以缩放页面:
width指定视区的逻辑宽度:
device-width指示视区宽度应为设备的屏幕宽度:
initial-scale指令用于设置web页面的初始缩放比例
initial-scale=1则将显示未经缩放的web文档
cmeta name="viewport" content="width-device-width, initia1-scale=1>
<title>Bootstrap的HML标准模板</title>
<!--载入Bootstrap 的css-->
<link href="css/bootstrap.min.css" re1="stylesheet">
</head>
<body>
<hl>He11o，world! </hl>
</body>
<!--如果要使用Bootstrap的js插件，必须先调入jQuery-->
<script src="js/jquery-3.4.1.js"></script>
<! --包括所有bootstrap的j s插件或者可以根据需委使用的js插件调用-->
<script src="js/bootstrap.min.js"></script>
</htm1>3.布局容器和栅格网格系统
3.1 布局容器
- container类用于固定宽度并支持响应式布局的容器。
<div class="container">
</div>
- container-fluid类用于100%宽度，占据全部视口(viewport) 的容器。
<div class="container-fluid">
</div>
3.2栅格网格系统
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport) 尺寸的增加，系 统会自动分为最多12列。栅格系统用于通过一系列的行(row)与列(column) 的组合来创建页面布局.
- 列组合：列组合 列总和数不能超12，大于12,则自动换到下一行
<div class="row">
<div class="col-md-4 col-lg-4 col-xs-4" style="background: pink;">4</div>
<div class="col-md-8 col-lg-8 col-xs-8" style="background: red;">8</div>
</div>
- 列偏移：只需要在列元素上添加类名"col-md-offset-*"(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。 例如，你在列元素上添加"col-md-offset-8".表示该列向右移动8个列的宽度(要保证列与偏移列的总数不超过12，不然会致列到下一行）
<div class="row">
<!-- 列偏移 -->
<div class="col-md-4" style=" background-color: green;">4</div>
<div class="col-md-2 col-md-offset-2" style=" background-color: purple;">4</div>
<div class="col-md-4" style=" background-color:blueviolet;">4</div>
</div>
- 列排序：列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名col-md-push-* 和col-md-pul1-*
<div class="row">
<!-- 列嵌套 -->
<div class="col-md-2" style="background-color:orange;">1</div>
<div class="col-md-3 col-md-push-7" style="background-color:indianred;">1</div>
<div class="col-md-1" style="background-color:yellowgreen;">1</div>
<div class="col-md-2" style="background-color:coral;">1</div>
</div>
- 列嵌套：Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一一个或者多个行(row)容器，然后在这个行容器中插入列I
<div class="row">
<!-- 列嵌套 -->
<div class="col-md-6" style="background-color:skyblue;">
<div class="row">
<div class="col-md-1" style="background-color: #23527C;">1</div>
</div>
<div class="row">
<div class="col-md-2" style="background-color: crimson;">1</div>
</div>
</div>
<div class="col-md-6" style="background-color:indianred;">1</div></div>4常用样式
4.1排版
4.1.1标题
Bootstrap和普通的HTML页面一样，定义标题都是使用标签h1到h6,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样。为了让非标题元素和标题使用相同的样式，还特意定义了.h1-.h6 六个类名。同时后面可以紧跟着一行小的副标题<sma11></sma11>或使用.small
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<div class="h1">student</div>
<div class="h2">student</div>
<div class="h3">student</div>
<div class="h4">student</div>
4.1.2段落
通过.lead来突出强调内容(其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理<small:小号字 b、strong :加粗 i、em：斜体
4.1.3强调
定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强调，具本说明如下:
- .text-muted:提示，使用浅灰色(#999)
- .txt-primary:主要，使用蓝色(#428bca)
- .txt-success:成功，使用浅绿色(#3c763d)
- .text-info:通知信息，使用浅蓝色(#31708f)
- .text-warning:警告,使用黄色(#8a6d3b)
- .text-danger:危险，使用褐色(#a94442)
4.1.4对其效果
在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格:
- 左对齐，取值left;
- 居中对齐，取值center;
- 右对齐,取值right;
- 两端对齐，取值justify. 为了简化操作,方便使用, Bootstrap通过定义四个类名来控制文本的对齐风格:
- .text-left: 左对齐
- .text-center:居中对齐
- .text-right:右对齐
- .text-justify: 两端对齐。
4.1.5列表
在HTML文档中，列表结构主要有三种：
- 无序列表(<u1><...</1i></u1>)
- 有序列表(<01><1...</1i></01>)
- 定义列表:
<d1><dt>...</dt><dd>...</dd></d1>
-1.去点列表 class="list-unstyled"
<ul class="list-unstyled">
<li>diyi</li>
<li>dier</li>
</ul>
- 2.内联列表
//列表内容在同一行显示
<ul class="list-inline">
<li>11111111</li>
<li>22222222</li>
<li>33333333</li>
</ul>
- 3.自定义列表
<dl class="dl-horizontal">
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>操作标题不能超过160px宽度，不然就会显示为省略号</dt>
<dd>层叠样式表是一种样式表语言</dd>
</dl>
4.1.6代码
一般在个人博客上使用的较为频繁,用于显示代码的风格。在Bootstrap主要提供了三种代码风格:
- (1)使用《code></code》来显示单行内联代码
<code>this is a simple code</code>
- (2)使用《pre></pre》来显示多行块代码 样式: pre-scrollable(height,max-height高度固定，为340px,超过存在滚动条)
<!-- 代码会保留原本的格式，包括空格和换行 -->
<pre>
public class helloworld{
public static void main(String[] args){
System.out.printIn("helloWorld")
}
}
</pre>
----------------------------
<!-- 显示代码字符 -->
<pre>
<h2>你好</h2>
</pre>
---------------------
<!-- 当长度超过指定值，可以添加滚动条 -->
<pre class="pre-scrollable">
<ol>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ol>
</pre>
- (3)使用《kbd> /kbd》来显示用户输入代码,如快捷键
//快捷键
<p>使用<kbd>ctrl+s</kbd></p>
4.1.7表格
- 表格样式
Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格:
- 基础样式
- .table: 基础表格
- 附加样式
- .table-striped: 斑马线表格
- .table-bordered: 带边框的表格
- .table-hover:鼠标悬停高亮的表格
- .table-condensed:紧凑型表格，单元格没内距或者内距较其他表格的内距小
<table class="table table-bordered table-condensed table-hover">
- tr、th、td样式
- .success
- .info
- .active
- .warning
- .danger
4.2表单
表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更常见的元素主要包括:文本输入框、下拉选择框、 单选按钮、复选按钮、文本域和按钮等。
4.2.1.表单控件
- .form-control
- .input-lg (较大)
- .input-sm (较小)
- 输入框text：.form-control
<div class="col-sm-3">
<input type="" name="" id="" value="" class="form-control" />
<input type="" name="" id="" value="" class="form-control input-sm" />
<input type="" name="" id="" value="" class="form-control input-lg" />
</div>
- 下拉选项框select 多行设置：multiple="multiple"
<select name="" class="form-control" multiple="multiple">
- 文本域
<textarea rows="" cols="" class="form-control">我哦我我我我我哦我我</textarea>
- 复选框
- 垂直显示：.checkbox
- 水平显示：.checkboc-inline
<div class="checkbox">
<label><input type="checkbox" name="" id="" value="" />吃饭</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="" id="" value="" />睡觉</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="" id="" value="" />打豆豆</label>
</div>
- 单选框
<label><input type="radio" name="sex" id="" value="" />男</label>
<label><input type="radio" name="sex" id="" value="" />女</label>
- 按钮
- 使用button实现
- 基础样式：.btn
<button class="btn">按钮</button>
- 附加样式
<button class="btn btn-danger">危险按钮</button>
<button class="btn btn-info">消息按钮</button>
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-success">成功按钮</button>
<button class="btn btn-default">默认按钮</button>
<button class="btn btn-warning">警告按钮</button>
<button class="btn bth-link">链接按钮</button>
- 多标签支持：使用a div等制作按钮
<a herf=##"" class="btn btn-danger">危险按钮</a>
<span class="btn btn-info">消息按钮</span>
<div class="btn btn-primary">主要按钮</div>
- 按钮大小:使用.btn-lg .btn-sm .btn-xs
<button class="btn btn-success btn-lg">成功按钮</button>
<button class="btn btn-default btn-sm">默认按钮</button>
<button class="btn btn-warning btn-xs">警告按钮</button>
- 按钮禁用
<button class="btn btn-danger" disabled="disabled">危险按钮</button>
4.2.2表单布局
基本的表单结构是Bootstrap自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:
- 向父<form>元素添加role="form"
- 把标签和控件放在一个带有class名为 .form-group的《div>中。这是获取最佳间距所必需的。
- 向所有的文本元素<input>、<textarea> 和<select>添加class ="form-control"。
- 水平表单：form-horizontal
- 垂直表单：
4.3缩略图
缩略图在电商类的网站很常见，最常用的地方就是产品列表页面。缩略图的实现是配合网格系统一起使用。同时还可以让缩略图配合标题、描述内容、按钮等。
<div class="col-md-3">
<div class="thumbnail">
<img src="img/gaoyuanyuan.jpg" style="height: 300px;width: 200px;">
<h2 class="h2">高圆圆</h2>
<p>出生于北京，中国内地影视女演员、模特。</p>
<button type="btn btn-default">
<span class="glyphicon glyphicon-heart">喜欢
</span>
</button>
<button type="btn btn-default">
<span class="glyphicon glyphicon-pencil">评论
</span>
</button>
</div>
</div>
4.5面板
默认的.panel组件所做的只是设置基本的边框(border)和内补(padding) 来包含内容。
- .panel-default:默认样式 工
- .panel-heading:面板头
- .panel-body:面板主体内容
5.bootstrap插件
5.1导航
使用下拉和按钮组合可以制作导航
要点
- 基本样式: .nav 与“nav-tabs"、 “nav-pills ”组合制作导航
- 分类:
- 1)、标签型(nav-tabs)导航
<ul class="nav nav-tabs">
<li class="active"><a href="#">home</a></li>
<li><a href="#">svn</a></li>
<li><a href="#">git</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
</ul>
- 2)、胶囊形(nav-pills)导航
<ul class="nav nav-pills">
<li class="active"><a href="#">home</a></li>
<li><a href="#">svn</a></li>
<li><a href="#">git</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
</ul>
- 3)、堆栈(nav-stacked)导航
<ul class="nav nav-stacked">
<li class="active"><a href="#">home</a></li>
<li><a href="#">svn</a></li>
<li><a href="#">git</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
</ul>
- 4)、自适应(nav-justified)导航
<ul class="nav nav-justified">
<li class="active"><a href="#">home</a></li>
<li><a href="#">svn</a></li>
<li><a href="#">git</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
</ul>
- 5)、面包屑式(breadcrumb)导航 ，单独使用样式，不与nav一起使用,直接加入到ol、ul中即可，一般用于导航，主要是起的作用是告诉用户现在所处页面的位置(当前位置)
<ul class="nav nav-breadcream">
<li class="active"><a href="#">home</a></li>
<li><a href="#">svn</a></li>
<li><a href="#">git</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
</ul>
- 状态:
- 1)、选中状态active样式
- 2)、禁用状态: disable
- 二级菜单
5.2分页式导航
分页随处可见，分为页码导航和翻页导航
- 页码导航: ul标签上加pagination [pagination-lg | pagination-sm]
<!--分页导航-->
<ul class="pagination">
<li class="active"><a href="#">«</a></li>
<li><a href="#">svn</a></li>
<li><a href="#">git</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
<li class="active"><a href="#">»</a></li>
</ul>
- 翻页导航: ul标签上加pager
<ul class="pager">
<li class="active"><a href="#">previous</a></li>
<li class="active"><a href="#">next</a></li>
</ul>
5.3下拉菜单
在使用Bootstrap框架的下拉菜单时，必须使用两个js
<!-- 如果要使用Bootstrap的j s插件，必须先调入jQuery -->
<script src="js/jquery-3.4.1.js"></script>
<!--包括所有bootstrap的j s插件或者可以根据需要使用的j s插件调用-->
<script src="js/bootstrap.min.js"></script>
要点
1、使用一个类名为dropdown或btn-group的div 包裹整个下拉框:
<div class="dropdown"></div>
2、默认向下dropdown,向上弹起加入. dropup 即可
3、使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-togg1 e属性
<button type=" button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
</button>
4、在button中使用font制作下拉箭头
<span class="caret"></span>
5、下拉菜单项使用一一个u1列表，并且定义一个类名为“dropdown-menu
6、分组分割线: <1i>添加类名“divi der"来实现添加下拉分隔线的功能
7、分组标题: 1i添加类名“dropdown-header" 来实现分组的功能
8、对齐方式:
1)、dropdown-menu-left 左对齐 默认样式
2)、dropdown-menu- right
右对齐
9、激活状态(. active)和禁用状态(. disabled)
5.4.模态框
5145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
