Bootstrap
作者：互联网
目录
-
Bootstrap 模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="js/jquery-3.6.0.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
-
布局容器
1、.container类用于固定宽度并支持响应式布局的容器
<div class="container"></div>
2、.container-fluid类用于100%宽度，占据全部视图(viewport)的容器
<div class="container-fluid"></div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>布局容器</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>
<!--<div class="container" style="background-color: pink;height: 500px;">
.container类用于固定宽度并支持响应式布局的容器
</div>-->
<div class="container-fluid" style="background-color: pink;height: 500px;">
.container-fluid类用于100%宽度，占据全部视图(viewport)的容器
</div>
</body>
</html>
-
栅格网格系统
1.列组合
列元素
col-xs-数值
col-sm-数值
col-md-数值
col-lg-数值
列的总数不能超过12
2.列偏移
offset
3.列排序
pull 向左(会覆盖左边元素)
push 向右
4.列嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>栅格网格系统</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<!--布局容器-->
<div class="container">
<!--行元素-->
<div class="row">
<!--列元素
col-xs-数值
col-sm-数值
col-md-数值
col-lg-数值
列的总数不能超过12
-->
<div class="col-md-4" style="background-color: pink;">
4
</div>
<div class="col-md-8" style="background-color: bisque;">
8
</div>
</div>
<!--列组合-->
<div class="row">
<div class="col-md-1" style="background-color: mediumslateblue">
1
</div>
<div class="col-md-1" style="background-color: lawngreen">
1
</div>
</div>
<hr />
<!--列偏移-->
<div class="row">
<div class="col-md-1" style="background-color: mediumslateblue">
1
</div>
<div class="col-md-1 col-md-offset-3" style="background-color: lawngreen">
1
</div>
<div class="col-md-1" style="background-color: lightcyan">
1
</div>
</div>
<hr />
<!--列排序-->
<div class="row">
<div class="col-md-1" style="background-color:lawngreen ">
1
</div>
<div class="col-md-1" style="background-color: chocolate">
1
</div>
<div class="col-md-1 col-md-pull-1" style="background-color:mediumslateblue">
1
</div>
<div class="col-md-1" style="background-color:mediumturquoise">
1
</div>
</div>
<!--列嵌套-->
<div class="row">
<div class="col-md-6" style="background-color: chocolate">
<div class="row">
<div class="col-md-1" style="background-color: palegoldenrod">
1
</div>
<div class="col-md-5" style="background-color: pink">
5
</div>
</div>
</div>
<div class="col-md-6" style="background-color: goldenrod">
6
</div>
</div>
</div>
</body>
</html>
-
常用样式
1.标题
bootstrap对h1~h6的标题效果进行了覆盖
提供了对应的类名，为非标题元素设置样式 .h1~.h6
副标题 small标签 或 .small类名
2.段落
通过.lead来突出强调内容(其作用是增大文本字号，加粗文本，而且对行高和margin也做相应的处理)
<small>:小号字
<b><strong>:加粗
<i><em>:斜体
3.强调
.text-muted 提示 浅灰色(#999)
.text-primary 主要 蓝色(#428bca)
.text-success 成功 浅绿色(#3c763d)
.text-info 通知 浅蓝色(#31708f)
.text-warning 警告 黄色(#8a6d3b)
.text-danger 危险 褐色(#a94442)
4.对齐效果
.text-left
.text-right
.text-center
.text-justify
5.列表
无序列表(<ul><li>...</li></ul>)
有序列表(<ol><li>....</li></ol>)
定义列表(<dl><dt>...</dt><dd>...</dd></dl>)
去点列表：list-unstyled
内联列表：list-inline
定义列表内联：dl-horizontal
6.代码
1.使用<code></code>来显示单行内联代码
2.使用<kbd></kbd>来显示用户输入代码，如快捷键
3.使用<pre></pre>来显示多行块代码
样式：pre-scrollable(height,max-height高度固定，为340px，超过存在滚动条)
7.表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用样式</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<!--标题-->
<h1>标题1<small>副标题</small></h1>
<h2>标题2<span class="small">副标题2</span></h2>
<h3>标题3</h3>
<div class="h1">
你好
</div>
<hr />
<!--段落-->
<p>
通过.lead来突出强调内容(其作用是增大文本字号，加粗文本，而且对行高和margin也做相应的处理)
</p>
<p class="lead">
通过.lead来突出<small>强调</small>(其作用是<b>增大</b>文本字号，<strong>加粗</strong>文本，而且对<i>行高</i>和<em>margin</em>也做相应的处理)
</p>
<!--强调-->
<div class="text-muted">.text-muted 提示 浅灰色(#999)</div>
<div class="text-primary">.text-primary 主要 蓝色(#428bca)</div>
<div class="text-success">.text-success 成功 浅绿色(#3c763d)</div>
<div class="text-info">.text-info 通知 浅蓝色(#31708f)</div>
<div class="text-warning">.text-warning 警告 黄色(#8a6d3b)</div>
<div class="text-danger">.text-danger 危险 褐色(#a94442)</div>
<!--对齐效果-->
<p class="text-center">对齐效果</p>
<!--无序列表-->
<ul>
<li>无序项目列表一</li>
<li>无序项目列表二</li>
</ul>
<!--有序列表-->
<ol>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<!--定义列表-->
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
</dl>
<hr />
<!--去点列表-->
<ul class="list-unstyled">
<li>无序项目列表一</li>
<li>无序项目列表二</li>
</ul>
<!--内联列表-->
<ul class="list-inline">
<li>无序项目列表一</li>
<li>无序项目列表二</li>
</ul>
<!--定义列表 内联列表-->
<dl class="dl-horizontal">
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>测试标题不能超过160px，否则</dt>
<dd>这是一个水平定义列表的效果</dd>
</dl>
<hr /><br />
<!--1.使用<code></code>来显示单行内联代码-->
<code>this is a simple code</code><br />
<code>
this is a simple code<br />
this is a simple code
</code>
<!--2.使用<kbd></kbd>来显示用户输入代码，如快捷键-->
<p>使用<kbd>ctrl</kbd>+<kbd>s</kbd>保存</p>
<!--3.使用<pre></pre>来显示多行块代码-->
<!--代码会保留原本的格式，包括空格和回车-->
<pre>
public class HelloWorld{
public static void main(String[] args){
System.out.println("hello world...");
}
}
</pre>
<!--显示html代码需要使用字符实体-->
<pre>
⁢h2>你好⁢/h2>
</pre>
<!--当代码长度超过指定值，可以添加滚动条-->
<pre class="pre-scrollable">
<ol>
<li>..........</li>
<li>..........</li>
<li>..........</li>
<li>..........</li>
<li>..........</li>
<li>..........</li>
<li>..........</li>
<li>..........</li>
<li>..........</li>
<li>..........</li>
<li>..........</li>
<li>..........</li>
<li>..........</li>
<li>..........</li>
</ol>
</pre>
<!--表格-->
<table class="table table-bordered table-striped table-hover table-condensed">
<tr class="info">
<th>JavaSE</th>
<th>数据库</th>
<th>JavaScript</th>
</tr>
<tr class="success">
<td>面对对象</td>
<td>oracle</td>
<td>json</td>
</tr>
<tr class="warning">
<td>数组</td>
<td>mysql</td>
<td>ajax</td>
</tr>
<tr class="danger">
<td>面对对象</td>
<td>oracle</td>
<td>json</td>
</tr>
<tr class="active">
<td>数组</td>
<td>mysql</td>
<td>ajax</td>
</tr>
</table>
</body>
</html>
-
表单
1.文本框
.form-control 表单元素的样式
表单控件大小 .input-lg .input-sm
2.下拉框
.form-control 表单元素的样式
multiple="multiple" 设置下拉框多选
3.文本域
.form-control 表单元素的样式
4.复选框
垂直显示 .checkbox
水平显示 .checkbox-inline
5.单选框
垂直显示 .radio
水平显示 .radio-inline
6.按钮
1.使用按钮
基础样式 btn
附加样式 btn-primary,btn-info,btn-success,btn-waring,btn-danger,btn-link,btn-default
2.多标签使用
其他标签可以添加按钮的样式设置成按钮的效果(a标签、span标签等)
3.按钮大小
大按钮 .btn-lg
正常按钮 .btn-sm
小按钮 .btn-xs
4.按钮禁用
1.通过disabled属性(真正的禁用元素)
2.通过disabled样式(样式上的禁用)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<input type="text" /><br />
<select>
<option>请选择城市</option>
<option>上海</option>
<option>北京</option>
</select><br />
<textarea></textarea><br />
<input type="checkbox" name="hobby" />唱歌
<input type="checkbox" name="hobby" />跳舞<br />
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女<br />
<button>按钮</button>
<input type="button" value="按钮"/>
<hr /><br />
<!--文本框-->
<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"/><br />
</div>
</div>
<!--下拉框-->
<div class="row">
<div class="col-md-3">
<select class="form-control">
<option>请选择城市</option>
<option>上海</option>
<option>北京</option>
</select><br />
<select class="form-control" multiple="multiple">
<option>请选择城市</option>
<option>上海</option>
<option>北京</option>
</select><br />
</div>
</div>
<!--文本域-->
<div class="row">
<div class="col-md-3">
<textarea class="form-control"></textarea>
</div>
</div>
<!--复选框-->
<!--垂直方向显示-->
<div class="row">
<div class="col-md-3">
<div class="checkbox">
<label><input type="checkbox" name="hobby" />唱歌</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="hobby" />跳舞</label>
</div>
</div>
</div>
<!--水平方向显示-->
<div class="row">
<div class="col-md-3">
<label class="checkbox-inline">
<input type="checkbox" name="hobby" />唱歌
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hobby" />跳舞
</label>
</div>
</div>
<!--单选框-->
<!--垂直方向显示-->
<div class="row">
<div class="col-md-3">
<div class="radio">
<label><input type="radio" name="sex" />男</label>
</div>
<div class="radio">
<label><input type="radio" name="sex" />女</label>
</div>
</div>
</div>
<!--水平方向显示-->
<div class="row">
<div class="col-md-3">
<label class="radio-inline">
<input type="radio" name="sex" />男
</label>
<label class="radio-inline">
<input type="radio" name="sex" />女
</label>
</div>
</div>
<!--按钮-->
<button class="btn">按钮</button>
<button class="btn btn-danger">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-primary">按钮</button>
<button class="btn btn-default">按钮</button>
<button class="btn btn-link">按钮</button><br />
<!--通过按钮样式设置其他元素为按钮效果-->
<a href="#" class="btn btn-success">a标签</a>
<span class="btn btn-danger">span标签</span>
<div class="btn btn-info">
div标签
</div>
<br />
<!--设置按钮大小-->
<button class="btn btn-danger">按钮</button>
<button class="btn btn-success btn-lg">按钮</button>
<button class="btn btn-info btn-sm">按钮</button>
<button class="btn btn-primary btn-xs">按钮</button>
<br />
<!--按钮禁用-->
<!--在标签中添加disabled属性-->
<button class="btn btn-info" onclick="alert('hello')" disabled="disabled">按钮</button>
<!--在元素标签中添加类名disabled-->
<button class="btn btn-info disabled" onclick="alert('hello')" >按钮</button>
</body>
</html>
-
表单布局
- 水平表单
设置样式：form-horizontal
- 内联表单
设置样式：form-inline
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单布局</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<form class="form-horizontal" role="form">
<h2 class="text-center">用户信息</h2>
<!--表单中的表单元素组-->
<div class="form-group">
<label for="uname" class="control-label col-sm-2">姓名</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="uname" placeholder="请输入姓名">
</div>
</div>
<div class="form-group">
<label for="upwd" class="control-label col-sm-2">密码</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="upwd" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">爱好</label>
<div class="col-md-8 col-md-offset-1">
<div class="col-md-3">
<label class="checkbox-inline">
<input type="checkbox" name="hobby" />唱歌
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hobby" />跳舞
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">城市</label>
<div class="col-sm-8">
<select class="form-control">
<option>请选择城市</option>
<option>上海</option>
<option>北京</option>
</select>
</div>
</div>
<div class="form-group">
<label for="remark" class="control-label col-sm-2">简介</label>
<div class="col-md-8">
<textarea id="remark" class="form-control"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-5">
<button class="btn btn-primary">提交</button>
</div>
</div>
</form>
<hr />
<form class="form-inline">
<div class="form-group">
<label for="userName">姓名</label>
<input type="text" id="userName" class="form-control" placeholder="请输入姓名" />
</div>
<div class="form-group">
<label for="userPwd">密码</label>
<input type="text" id="userPwd" class="form-control" placeholder="请输入密码" />
</div>
<div class="form-group">
<button class="btn btn-default">提交</button>
</div>
</form>
</body>
</html>
-
略缩图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>缩略图</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<div class="row">
<!--略缩图-->
<div class="col-md-3">
<div class="thumbnail">
<img src="img/1.jpg" style="width: 200px; height=200px"/>
<h3>刘亦菲</h3>
<p>1987年8月25日出生于湖北省武汉市，华语影视女演员、歌手，毕业于北京电影学院2002级表演系本科。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/2.jpg" style="width: 200px; height=200px"/>
<h3>刘亦菲</h3>
<p>1987年8月25日出生于湖北省武汉市，华语影视女演员、歌手，毕业于北京电影学院2002级表演系本科。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/3.jpg" style="width: 200px; height=200px"/>
<h3>刘亦菲</h3>
<p>1987年8月25日出生于湖北省武汉市，华语影视女演员、歌手，毕业于北京电影学院2002级表演系本科。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/4.jpg" style="width: 200px; height=200px"/>
<h3>刘亦菲</h3>
<p>1987年8月25日出生于湖北省武汉市，华语影视女演员、歌手，毕业于北京电影学院2002级表演系本科。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
</div>
</div>
</body>
</html>
-
面板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<div class="panel panel-warning">
<div class="panel panel-heading">
<h2>刘亦菲</h2>
</div>
<div class="panel panel-body">
<div class="col-md-3">
<div class="thumbnail">
<img src="img/1.jpg" style="width: 200px; height=200px"/>
<h3>刘亦菲</h3>
<p>1987年8月25日出生于湖北省武汉市，华语影视女演员、歌手，毕业于北京电影学院2002级表演系本科。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/2.jpg" style="width: 200px; height=200px"/>
<h3>刘亦菲</h3>
<p>1987年8月25日出生于湖北省武汉市，华语影视女演员、歌手，毕业于北京电影学院2002级表演系本科。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/3.jpg" style="width: 200px; height=200px"/>
<h3>刘亦菲</h3>
<p>1987年8月25日出生于湖北省武汉市，华语影视女演员、歌手，毕业于北京电影学院2002级表演系本科。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/4.jpg" style="width: 200px; height=200px"/>
<h3>刘亦菲</h3>
<p>1987年8月25日出生于湖北省武汉市，华语影视女演员、歌手，毕业于北京电影学院2002级表演系本科。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
-
导航
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
<p>面包屑式导航菜单</p>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">2013</a></li>
<li class="active">十一月</li>
</ul>
<p>分页导航</p>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
<p>翻页导航</p>
<ul class="pager">
<li><a href="#">上一页</a></li>
<li><a href="#">下一页</a></li>
</ul>
</body>
</html>
-
下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p>带有下拉菜单的标签页</p>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Java <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Swing</a></li>
<li><a href="#">jMeter</a></li>
<li><a href="#">EJB</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>
</li>
<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
-
模态框
操作模态框
1.通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
2.通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：
$('#identifier').modal(options)
打开模态框:$('#identifier').modal('show')
关闭模态框:$('#identifier').modal('hide')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模态框</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<button class="btn btn-primary btn-lg" id="btn">js开启模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">添加用户</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" action="#" method="post">
<div class="form-group">
<label for="uname" class="col-md-2 control-label">姓名</label>
<div class="col-md-8">
<input type="text" name="uname" id="uname" class="form-control" placeholder="请输入姓名"/>
</div>
</div>
<div class="form-group">
<label for="uname" class="col-md-2 control-label">密码</label>
<div class="col-md-8">
<input type="text" name="upwd" id="upwd" class="form-control" placeholder="请输入密码"/>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="submit_btn">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<script type="text/javascript">
//绑定按钮的点击事件
$("#btn").click(function(){
//手动开启模态框
$("#myModal").modal("show");
})
$("#submit_btn").click(function(){
//手动关闭模态框
$("#myModal").modal("hide");
})
</script>
</body>
</html>
标签：模态,text,Bootstrap,表单,按钮,btn,.......... 来源： https://blog.csdn.net/weixin_45859844/article/details/119055866