Bootstrap

2024-02-05 14:33:16

目录

Bootstrap 模板

布局容器

栅格网格系统

1.列组合

2.列偏移

3.列排序

4.列嵌套

常用样式

1.标题

2.段落

3.强调

4.对齐效果

5.列表

6.代码

7.表格

表单

1.文本框

2.下拉框

3.文本域

4.复选框

5.单选框

6.按钮

表单布局

略缩图

面板

导航

下拉菜单

模态框

  • 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>
	&it;h2&gt;你好&it;/h2&gt;
</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="#">&laquo;</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="#">&raquo;</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">&times;</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>

上一篇：PHP学习笔记——上传文件到服务端的文件夹下


下一篇：【Android 】零基础到飞升 | PopupWindow(悬浮框)的基本使用