bootstrap基础
1、bootstrap需要引入相应的css和js,建议使用cdn的方式进行引入
cdn查找地址:https://www.bootcdn.cn/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.15.0/esm/popper.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<title>Title</title>
</head>
二、基本布局和组件
1、基本布局
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 bg-success">
<h1>第一行第一列</h1>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 bg-info">
<h1>第一行第二列</h1>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 bg-secondary">
<h1>第二行第一列</h1>
</div>
<div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 bg-warning">
<h1>第二行第二列嵌套:第一行第一列</h1>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 bg-primary">
<h1>第二行第二列嵌套:第一行第二列</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 bg-danger">
<h1>第二行第二列嵌套:第二行</h1>
</div>
</div>
</div>
</div>
</div>
2、文字颜色和背景颜色
<!--文字颜色和背景颜色-->
<p class="text-muted">柔和的文字</p>
<p class="text-primary">重要的文本</p>
<p class="text-success">执行成功的文本</p>
<p class="text-info">代表一些提示信息的文本</p>
<p class="text-warning">警告文本</p>
<p class="text-danger">危险操作文本</p>
<p class="text-secondary">副标题</p>
<p class="text-dark">深灰色</p>
<p class="text-light">浅灰色文本</p>
<p class="text-white">白色文本</p>
<!--背景颜色和文本颜色相结合--->
<h2>背景颜色</h2>
<p class="bg-primary text-white">重要的背景颜色。</p>
<p class="bg-success text-white">执行成功背景颜色。</p>
<p class="bg-info text-white">信息提示背景颜色。</p>
<p class="bg-warning text-white">警告背景颜色</p>
<p class="bg-danger text-white">危险背景颜色。</p>
<p class="bg-secondary text-white">副标题背景颜色。</p>
<p class="bg-dark text-white">深灰背景颜色。</p>
<p class="bg-light text-dark">浅灰背景颜色。</p>
3、表格
<table class="table table-hover table-striped">
<!--表头-->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>籍贯</th>
</tr>
</thead>
<!--表体-->
<tbody>
<tr>
<td>张三</td>
<td class="bg-success">28</td>
<td>四川</td>
</tr>
<tr class="bg-primary">
<td>张三</td>
<td>28</td>
<td>四川</td>
</tr>
<tr>
<td>张三</td>
<td class="bg-success">28</td>
<td>四川</td>
</tr>
</tbody>
</table>
4、按钮
<!-- 标准的按钮 -->
<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>
<!---按钮设置边框-->
<!-- 标准的按钮 -->
<button type="button" class="btn btn-outline-default">默认按钮</button>
<!-- 提供额外的视觉效果,标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-outline-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-outline-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-outline-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-outline-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-outline-danger">危险按钮</button>
<!-- 并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为 -->
<button type="button" class="btn btn-outline-link">链接按钮</button>
5、表单
<!--表单-->
<form action="" method="post" role="form">
<table class="table table-hover">
<tbody>
<tr>
<td class="text-right" style="vertical-align: middle ">账 号:</td>
<td class="text-left">
<input type="text" name="uname" id="uname" value="" class="form-control" required="required" style="width: 140px">
</td>
</tr>
<tr>
<td class="text-right" style="vertical-align: middle ">邮 箱:</td>
<td class="text-left">
<input type="text" name="email" id="email" value="" class="form-control" required="required" style="width: 140px">
</td>
</tr>
<tr>
<td class="text-right" style="vertical-align: middle ">性 别:</td>
<td class="text-left">
<label class="radio-inline"><input type="radio" checked name="sextype" value="男">男</label>
<label class="radio-inline"><input type="radio" name="sextype" value="女">女</label>
</td>
</tr>
<tr>
<td class="text-right" style="vertical-align: middle ">爱 好:</td>
<td class="text-left form-check form-check-inline">
<label><input type="checkbox" name="mynobby" class="form-check-input" value="">旅游</label>
<label><input type="checkbox" name="mynobby" class="form-check-input" value="">游山</label>
<label><input type="checkbox" name="mynobby" class="form-check-input" value="">玩水</label>
</td>
</tr>
<tr>
<td class="text-right" style="vertical-align: middle ">职 业:</td>
<td class="text-left">
<select class="form-control" id="myjob">
<option>java程序员</option>
<option>java程序员</option>
<option>java程序员</option>
<option>java程序员</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
6、导航
<!--导航控件 flex-column加上这个控件就是垂直的-->
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">新闻</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">社会</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">科技</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">历史</a>
</li>
</ul>
<!--下拉菜单-->
<div style="margin: 20px;height: 300px">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">主题
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a role="menuitem" tabindex="-1" href="#">Java</a>
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
<a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</div>
</div>
7、徽章
<!--徽章--->
<div style="margin: 20px">
<h3>徽章</h3>
<span class="badge badge-primary">主要</span>
<span class="badge badge-pill badge-secondary">主要</span>
<span class="badge badge-pill badge-success">成功</span>
<span class="badge badge-danger">危险</span>
<span class="badge badge-warning">警告</span>
<span class="badge badge-info">信息</span>
<span class="badge badge-dark">深色</span>
<span class="badge badge-light">浅色</span>
<h3>徽章嵌入到按钮里</h3>
<button type="button" class="btn btn-primary">
message<span class="badge badge-light">4</span>
</button>
</div>
8、图标
<!---图标-->
<div style="maxgin:20px;">
<button type="button" class="btn btn-sm btn-info">
<i class="fa fa-plus-square"></i>添 加
</button>
<button type="button" class="btn btn-sm btn-warning">
<i class="fa fa-pencil-square"></i>修 改
</button>
<button type="button" class="btn btn-sm btn-danger">
<i class="fa fa-remove"></i>删 除
</button>
</div>