目录
Bootstrap
BootStrap下载
官网下载：Bootstrap中文网 (bootcss.com)
推荐用BootStrap3，比较稳定
BootStrap介绍
BootStrap是一套现成的CSS样式集合（是两个推特的员工做出来的）
BootStrap特别适合没有团队的去做易用的、灵活的页面
BootStrap特点
- 好用、好看、直观
- 响应式设计、12列格网、样式向导文档
- 自定义JQuery插件（BootStrap插件是基于JQuery、Less的）
- 丰富的组件
下载BootStrap
下载路径：起步 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)
- 建议下载BootStrap源码
- 下载后解压打开文件：在D:\bootstrap-3.4.1\bootstrap-3.4.1目录下直接复制dist文件夹将它放进你的项目文件中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 载入刚刚导入进来的dist包中的css -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!--如果要使用bootstrap的js插件，必须先导入jQuery包，这是我之前下好的包-->
<script src="js/jquery-3.5.1.js"></script>
<!--载入刚刚导入进来的dist包中的css-->
<script src="dist/js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
JQuery安装与下载教程:(1条消息) JQuery安装与下载教程_Muchen灬的博客-CSDN博客_jquery
BootStrap在线使用
JQuery和BootStrap都有在线的使用
好处：更快更方便
坏处：要求要有网络，需要用网络加载，一般做开发都用本地文件更好
直接在官网上复制粘贴引入就好
布局容器和栅格网格系统
布局容器
- container 类用于固定宽度的容器（就是宽度两边有留白）
<div class="container">
...
</div>
- container-fluid 类用于100%宽度的容器（就是屏幕占满，不留白）
<div class="container-fluid">
...
</div>
栅格网格系统
以下部分摘自：Bootstrap 网格系统 | 菜鸟教程 (runoob.com)
什么是网格（Grid）？
摘自维基百科：
在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。
简单地说，网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。
什么是 Bootstrap 网格系统（Grid System）？
Bootstrap 官方文档中有关网格系统的描述：
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
让我们来理解一下上面的语句。Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。
- 注意：网络系统必须使用到css
-
container、row、xs（xsmall phones），sm（small tablets），md（middle desktops），lg（lager desktops） 即：超小屏（自动）、小屏（750px）、中屏（970px）和大屏（1170px）
-
数据行（row）必须包含在容器（container）中，以便为其赋予适合的对齐方式和内距（padding）
-
在行（row）中可添加列（column），只有列（column）才可以作为行容器（row）的直接元素，但列数不能超过总列数：如12，超过自动换行
-
具体内容应当放在列（column）中
<div class="container" style="background-color: rgb(73, 112, 29);height:100px ;">
<div class="row">
<div class="col-md-4" style="background-color: rgb(244, 224, 7);">占4列</div>
<div class="col-md-8" style="background-color: rgb(245, 34, 6);">占8列</div>
</div>
</div>
Bootstrap 会自动根据你的屏幕大小来找寻适合的大小,如：
<div class="container" >
<div class="row">
<div class="col-md-4 col-lg-4" >占4列</div>
<div class="col-md-8 col-lg-8" >占8列</div>
</div>
</div>
列组合
列组合简单理解为更改数字来合并列（原则：列总和不能超过12，大于12，自动换行）
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">6</div>
<div class="col-sm-6" style="background-color:orange;">6</div>
</div>
<br>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">4</div>
<div class="col-sm-4" style="background-color:orange;">4</div>
<div class="col-sm-4" style="background-color:yellow;">4</div>
</div>
<br>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col-sm-3" style="background-color:yellow;">3</div>
<div class="col-sm-3" style="background-color:orange;">3</div>
<div class="col-sm-3" style="background-color:yellow;">3</div>
<div class="col-sm-3" style="background-color:orange;">3</div>
</div>
<br>
<div class="row">
<div class="col-3" style="background-color:yellow;">3</div>
<div class="col-3" style="background-color:orange;">3</div>
<div class="col-3" style="background-color:yellow;">3</div>
<div class="col-5" style="background-color:orange;">5</div>
</div>
</div>
测试结果：
列偏移
偏移用于增加列的左边距。
例如，如果你有一个列出现在三个Bootstrap列之间，则可以使用偏移功能。
可用于偏移的类有：
- col-xs-offset-*
- col-sm-offset-*
- col-md-offset-*
- col-lg-offset-*
假设我们要在超小显示器中向右移动一列三个Bootstrap列，我们可以使用类“col-xs-offset-2”，例如：
<div class="container-fluid">
<div class="row">
<div class="col-sm-5" style="background-color:yellow;">5</div>
<div class="col-sm-4 col-sm-offset-2" style="background-color:orange;">4</div>
</div>
</div>
测试结果：
列排序
简单理解为列的重排序，就是将列浮动起来（push向右浮动，pull向左浮动）
<div class="container-fluid">
<!--正常-->
<h5>正常</h5><hr>
<div class="row">
<div class="col-sm-1" style="background-color:yellow;">1</div>
<div class="col-sm-1" style="background-color:orange;">1</div>
<div class="col-sm-1" style="background-color:rgb(0, 110, 255);">1</div>
<div class="col-sm-1" style="background-color:rgb(30, 255, 0);">1</div>
</div>
<br>
<!--浮动-->
<h5>浮动</h5><hr>
<div class="row">
<div class="col-sm-1" style="background-color:yellow;">1</div>
<div class="col-sm-1 col-sm-push-4" style="background-color:orange;">1</div>
<div class="col-sm-1" style="background-color:rgb(0, 110, 255);">1</div>
<div class="col-sm-1 col-sm-pull-2" style="background-color:rgb(30, 255, 0);">1</div>
</div>
</div>
测试结果：
嵌套列
我们可以在布局中的任何列中创建一组新的12个Bootstrap列，以便创建嵌套列。
<div class="container">
<div class="row">
<div class="col-md-6 col1">
<h3>Column 1</h3>
<!-- Nesting Starts -->
<div class="row">
<div class="col-md-6 col3">
<h3>Column 4</h3>
</div>
<div class="col-md-6 col4">
<h3>Column 5</h3>
</div>
</div>
</div>
<div class="col-md-6 col2">
<h3>Column 2</h3>
</div>
</div>
</div>
常用样式
排版
标题
- Bootstrap对h1-h6的标题效果进行了覆盖
- 提供了对应的class，为非标题的元素设置样式（h1-h6）
- 副标题 small标签或small类名
<div class="container">
<h1>标题 <small>副标题</small> </h1>
<div class="h2">标题</div>
<h3>标题 <span class="small">副标题</span> </h3>
</div>
测试结果：
段落
通过lead来突出强调内容（其作用就是增大文字字号，加粗文本，而且对行高和margin也做了相应的处理）
<small:小字号
<b:加粗
<i<em:斜体
<p>通过lead来突出强调内容</p>
<p class="lead">通过lead来突出强调内容</p>
测试结果：
强调
-
text-muted：提示 ，使用浅灰色
-
text-primary：主要，使用蓝色
-
text-success：成功，使用浅绿色
-
text-info：通知信息，使用黄色
-
text-warning：警告，使用黄色
-
text-danger：危险，使用褐色
<div class="text-muted">.text-muted 效果</div>
<div class="text-primary">.text-primary效果</div>
<div class="text-success">.text-success效果</div>
<div class="text-info">.text-info效果</div>
<div class="text-warning">.text-warning效果</div>
<div class="text-danger">.text-danger效果</div>
测试结果：
对齐效果
在CSS中常常使用text-align来实现文本的对齐风格设置风格：
-
左对齐，left
-
居中对齐，center
-
右对齐，right
-
两端对齐，justify
在Bootstrap通过定义四个类名来控制文本的对齐风格：
- text-left：左对齐
- text-center：居中对齐
- text-right：右对齐
- text-justify：两端对齐
<p class="text-start">在Bootstrap通过定义四个类名来控制文本的对齐风格</p>
<p class="text-center">在Bootstrap通过定义四个类名来控制文本的对齐风格</p>
<p class="text-end">在Bootstrap通过定义四个类名来控制文本的对齐风格</p>
<p class="text-left">在Bootstrap通过定义四个类名来控制文本的对齐风格</p>
<p class="text-right">在Bootstrap通过定义四个类名来控制文本的对齐风格</p>
<p class="text-justify">在Bootstrap通过定义四个类名来控制文本的对齐风格在Bootstrap通过定义四个类名来控制文本的对齐风格在Bootstrap通过定义四个类名来控制文本的对齐风格在Bootstrap通过定义四个类名来控制文本的对齐风格在Bootstrap通过定义四个类名来控制文本的对齐风格</p>
测试结果：
列表
HTML中列表分3中：
<ul>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
</ol>
<dl>
<dt>自定义列表</dt>
</dl>
去点列表
<ul class="list-unstyled">
<li>无序列表</li>
<li>无序列表</li>
</ul>
测试结果:
内联列表
就是把垂直列表变成水平列表
<ul class="list-inline">
<li>首页</li>
<li>hello你猜</li>
<li>在线课堂</li>
</ul>
测试结果:
定义列表
把垂直列表变成水平定义列表，当标题宽度超过160px时，就会显示三个省略号
<dl class="dl-horizontal">
<dt>自定义列表</dt>
<dd>自定义列表</dd>
<dt>在Bootstrap通过定义四个类名来控制文本的对齐风格</dt>
<dd>在dt中标题不能超过160px，不然就会"..."</dd>
</dl>
测试结果:
代码
Bootstrap 允许您以两种方式显示代码：
- 第一种是 <code 标签。如果您想要内联显示代码，那么您应该使用 <code 标签。
- 第二种是 <pre 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre标签。如果要显示HTML代码就要用 <；和 >；来表示< 和 >。
- 第二种是 <kbd 标签。使用<kbd标签来显示用户输入代码，如快捷键
这是一行代码 <br>
<code>这是一行代码</code>
<pre>
public class Father{
public void text(){}
}
public class Son extends Father{
@Override //这个是重写的注释
public void text(){}
}
Son s = new Son();
s.text();
Father f = new Son(); //子类重写了父类的方法
f.text(); //都显示子类写的方法
</pre>
<pre>
<h1>hello <h1>
</pre>
<!-- 当长度超过指定值，可以添加滚动条 -->
<pre class="pre-scrollable"></pre>
<p>使用 <kbd>Ctrl</kbd> + <kbd>S</kbd>进行保存 </p>
测试结果：
表格
基本样式: class=“table”
<table>
<thead>
<tr>
<th>啦啦啦</th>
<th>九九九</th>
</tr>
</thead>
<tbody>
<tr>
<td>JavaSE</td>
<dd>面对对象</dd>
</tr>
<tr>
<td>数据库</td>
<td>MySQL</td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th>啦啦啦</th>
<th>九九九</th>
</tr>
</thead>
<tbody>
<tr>
<td>JavaSE</td>
<dd>面对对象</dd>
</tr>
<tr>
<td>数据库</td>
<td>MySQL</td>
</tr>
</tbody>
</table>
测试结果：
表格类型
| 表格类型 | 作用 |
|---|---|
| table-striped | 在 <tbody 内添加斑马线形式的条纹 ( IE8 不支持) |
| table-bordered | 为所有表格的单元格添加边框 |
| table-hover | 在 <tbody 内的任一行启用鼠标悬停状态 |
| table-condensed | 让表格更加紧凑 |
<tr 、 <th 和 <td 类
| 类 | 描述 |
|---|---|
| active | 将悬停的颜色应用在行或者单元格上 |
| success | 表示成功的操作 |
| info | 表示信息变化的操作 |
| warning | 表示一个警告的操作 |
| danger | 表示一个危险的操作 |
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr class="danger">
<th>啦啦啦</th>
<th>九九九</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>JavaSE</td>
<td>面对对象</td>
</tr>
<tr class="success">
<td>数据库</td>
<td>MySQL</td>
</tr>
<tr class="info">
<td>JavaSE</td>
<td>面对对象</td>
</tr>
<tr class="warning">
<td>JavaSE</td>
<td>面对对象</td>
</tr>
</tbody>
</table>
测试结果：
表单
表单布局
- 在form标签元素中添加role=“from”
- 把标签和控制件放在带有class=“from-group”的div中
水平表单
设置样式：class=“form-horizontal”
<form action="" role="form" class="form-horizontal">
<div class="form-group">
<label for="name" class="control-label col-md-3">姓名</label>
<div class="col-md-5">
<input type="text" class="form-control" placeholder="姓名信息">
</div>
</div>
<div class="form-group">
<label for="password" class="control-label col-md-3">密码</label>
<div class="col-md-5">
<input type="password" class="form-control" placeholder="密码信息">
</div>
</div>
<div class="form-group">
<label for="password" class="control-label col-md-3">文本</label>
<div class="col-md-5">
<textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
</div>
</div>
<div class="form-group">
<label for="password" class="control-label col-md-3">选项</label>
<div class="col-md-5">
<select name="" id="" class="form-control">
<option value="">hhh</option>
<option value="">bbb</option>
</select>
</div>
</div>
</form>
测试结果：
内敛表单
设置样式：class=“form-inline”
就是把所有控件和标签都放在一行里
垂直/基本表单
不加class样式，基本表单就是垂直表单
表单控件
form-control 、 input-lg （较小） input-sm （较大）
输入框（text）/下拉选择框（select）
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<input type="text" class="form-control"><br>
<input type="text" class="form-control input-lg"><br>
<input type="text" class="form-control input-sm">
</div>
</div>
<div class="row">
<div class="col-md-3">
<select name="" id="" class="form-control">
<option value="">ll</option>
<option value="">jj</option>
<option value="">pp</option>
</select>
<select name="" id="" class="form-control" multiple>
<option value="">ll</option>
<option value="">jj</option>
<option value="">pp</option>
</select>
</div>
<br>
<div class="row">
<div class="col-md-3">
<textarea name="" id="" cols="30" rows="10" class="form-control">
</textarea>
</div>
</div>
</div>
</div>
测试结果：
复选框（Checkbox）/单选框（Radio）
- 当创建表单时，如果您想让用户从列表中选择若干个选项时，使用 checkbox。如果您限制用户只能选择一个选项，使用 radio
- 对一系列复选框和单选框使用 checkbox-inline 或 radio-inline类，控制它们显示在同一行上
<div class="row">
<div class="col-md-3">
<!-- 水平方向 -->
<label class="checkbox-inline">
<input type="checkbox" id="" value=""> 选项 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" value=""> 选项 2
</label>
<label class="radio-inline">
<input type="radio" name="" id="" value="" checked> 选项 1
</label>
<label class="radio-inline">
<input type="radio" name="" id="" value=""> 选项 2
</label>
</div>
</div>
<div class="row">
<div class="col-md-3">
<!-- 垂直方向 -->
<div class="checkbox">
<label>
<input type="checkbox" id="" value=""> 选项 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="" value=""> 选项 2
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="" id="" value="" > 选项 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="" id="" value=""> 选项 2
</label>
</div>
</div>
</div>
测试结果：
按钮
图表取自：Bootstrap 按钮 | 菜鸟教程 (runoob.com)
| 类 | 描述 |
|---|---|
| .btn | 为按钮添加基本样式 |
| .btn-default | 默认/标准按钮 |
| .btn-primary | 原始按钮样式（未被操作） |
| .btn-success | 表示成功的动作 |
| .btn-info | 该样式可用于要弹出信息的按钮 |
| .btn-warning | 表示需要谨慎操作的按钮 |
| .btn-danger | 表示一个危险动作的按钮操作 |
| .btn-link | 让按钮看起来像个链接 (仍然保留按钮行为) |
| .btn-lg | 制作一个大按钮 |
| .btn-sm | 制作一个小按钮 |
| .btn-xs | 制作一个超小按钮 |
| .btn-block | 块级按钮(拉伸至父元素100%的宽度) |
| .active | 按钮被点击 |
| .disabled | 禁用按钮 |
<button type="button" class="btn btn-default">默认按钮</button>
<button type="button" class="btn btn-primary">原始按钮</button>
<button type="button" class="btn btn-success">成功按钮</button>
<button type="button" class="btn btn-info">信息按钮</button>
<button type="button" class="btn btn-warning">警告按钮</button>
<button type="button" class="btn btn-danger">危险按钮</button>
<button type="button" class="btn btn-link">链接按钮</button><br>
<a href="" class="btn btn-primary">a标签</a>
<div class="btn btn-success">div标签</div><br>
<button type="button" class="btn btn-primary" onclick="alert('hello')">原始按钮</button>
<button type="button" class="btn-sm btn-primary" >原始按钮</button>
<button type="button" class="btn-xs btn-primary">原始按钮</button>
<button type="button" class="btn-lg btn-primary">原始按钮</button>
<button type="button" class="btn btn-primary" disabled>原始按钮</button>
测试结果：
Bootstrap组件
推荐：Bootstrap 导航栏 | 菜鸟教程 (runoob.com)
简介 · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网 (bootcss.com)
106
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
