bootstrap代码总结
校验插件的使用
<!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>校验插件的使用</title>
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/validate.min.js"></script>
<script src="./js/messages_zh.js"></script>
<style>
.error{
color: red;
}
</style>
</head>
<body>
<form action="" id="frm">
名字：<input type="text" name="uname"><br/>
邮箱：<input type="email" name="email"><br/>
年龄：<input type="number" name="age"><br/>
密码：<input id="pwd" type="password" name="pwd"><br/>
重复：<input type="password" name="repwd"><br/>
手机：<input type="text" name="phone"><br/>
<!-- submit form表单提交按钮的类型必须是submit -->
<input type="submit" value="登录">
</form>
<script>
$(function(){
// 校验用户的输入
$("#frm").validate({
rules:{
uname: {
required:true,
minlength: 2,
maxlength: 6
},
email: "required",
age: {
required:true,
range: [0,120]
},
pwd: "required",
repwd: {
// equalTo: "#pwd"
equalTo: "[name='pwd']"
},
phone: "mobile"
},
messages:{
uname: {
required:"用户名必须输入",
minlength: "用户名长度必须大于{0}",
maxlength: "用户名长度必须小于{0}"
},
age: {
required:"必须输入年龄",
range: "年龄必须在{0}-{1}之间"
}
}
});
});
// 使用自定义验证规则,手机号码验证
jQuery.validator.addMethod("mobile", function(value, element) {
var length = value.length;
return this.optional(element) || (length == 11 && /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value));
}, "手机号码格式错误!");
</script>
</body>
</html>
按钮
<!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>
<!-- 注意引入的顺序 -->
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/validate.min.js"></script>
<link rel="stylesheet" href=".//css/bootstrap.css">
</head>
<body>
<div class="container">
<button class="">默认的按钮</button>
<button class="btn btn-success">默认的按钮</button>
<button class="btn btn-danger">默认的按钮</button>
</div>
</body>
</html>
Document排版
<!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>
<!-- 注意引入的顺序 -->
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/validate.min.js"></script>
<link rel="stylesheet" href=".//css/bootstrap.css">
</head>
<body>
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
<hr />
<p class="h1">CSS标题样式</p>
<p class="h2">CSS标题样式</p>
<p class="h3">CSS标题样式</p>
<p class="h4">CSS标题样式</p>
<p class="h5">CSS标题样式</p>
<p class="h6">CSS标题样式</p>
<hr />
<div class="h1">CSS标题样式</div>
<div class="h2">CSS标题样式</div>
<div class="h3">CSS标题样式</div>
<div class="h4">CSS标题样式</div>
<div class="h5">CSS标题样式</div>
<div class="h6">CSS标题样式</div>
<hr />
<p class="text-left">CSS标题样式 hello world CSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello world</p>
<p class="text-center">CSS标题样式 hello world CSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello world</p>
<p class="text-right">CSS标题样式 hello world CSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello world</p>
<p class="text-justify">CSS标题样式 hello world CSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello world</p>
<p class="text-nowrap">CSS标题样式 hello world CSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello world</p>
<p class="">CSS标题样式 hello world CSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello worldCSS标题样式 hello world</p>
<hr />
<p>Hello World</p>
<p class="text-uppercase">Hello World</p>
<p class="text-lowercase">Hello World</p>
</body>
</html>
表单
<!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>
<!-- 注意引入的顺序 -->
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/validate.min.js"></script>
<link rel="stylesheet" href=".//css/bootstrap.css">
</head>
<body>
<!-- 表单元素 form input 搜集用户信息的 -->
<form action="" class="form-inline">
<!-- form-group 表单组 -->
<div class="form-group">
<label for="username">输入用户名</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group">
<label for="password">输入密码</label>
<input type="password" class="form-control" id="password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Check me out</label>
</div>
<input type="submit" class="btn btn-success" value="登录">
</form>
<hr/>
<form action="" class="form-horizontal">
<!-- form-group 表单组 -->
<div class="form-group">
<!-- label 占屏幕的 2/12 -->
<label for="username" class="col-sm-2 text-right">输入用户名</label>
<!-- input 站屏幕的 10/12 超过10就会换行-->
<div class="col-sm-6">
<input type="text" class="form-control" id="username">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 text-right">输入密码</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="password">
</div>
</div>
<div class="checkbox">
<label><input type="checkbox"> Check me out</label>
</div>
<input type="submit" class="btn btn-success" value="登录">
</form>
<hr/>
<form action="" class="form-horizontal">
<!-- form-group 表单组 -->
<div class="form-group">
<!-- label 占屏幕的 2/12 -->
<label for="username" class="col-sm-2 text-right">输入用户名</label>
<!-- input 站屏幕的 10/12 超过10就会换行-->
<div class="col-sm-6">
<input type="text" class="form-control" id="username">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 text-right">输入密码</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="password">
</div>
</div>
<div class="checkbox">
<label><input type="checkbox"> Check me out</label>
</div>
<!-- col-sm-offset-4 向右偏移4份 总共一行12份-->
<!-- col-sm-offset-6 向右偏移4份-->
<div class="col-sm-offset-4">
<input type="submit" class="btn btn-success" value="登录">
</div>
</form>
</body>
</html>
栅格系统
<!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>
<!-- 注意引入的顺序 -->
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/validate.min.js"></script>
<link rel="stylesheet" href=".//css/bootstrap.css">
<style>
.mydiv {
border: blue solid 1px;
}
</style>
</head>
<body>
<div class="containser">
<div class="row">
<div class="col-sm-1 mydiv">单元格1</div>
<div class="col-sm-1 mydiv">单元格2</div>
<div class="col-sm-1 mydiv">单元格3</div>
<div class="col-sm-1 mydiv">单元格4</div>
<div class="col-sm-1 mydiv">单元格5</div>
<div class="col-sm-1 mydiv">单元格6</div>
<div class="col-sm-1 mydiv">单元格7</div>
<div class="col-sm-1 mydiv">单元格8</div>
<div class="col-sm-1 mydiv">单元格9</div>
<div class="col-sm-1 mydiv">单元格10</div>
<div class="col-sm-1 mydiv">单元格11</div>
<div class="col-sm-1 mydiv">单元格12</div>
</div>
<div cla ss="row">
<div class="col-sm-3 mydiv">单元格1</div>
<div class="col-sm-3 mydiv">单元格2</div>
<div class="col-sm-3 mydiv">单元格3</div>
<div class="col-sm-3 mydiv">单元格4</div>
</div>
<div class="row">
<div class="col-sm-6 mydiv">单元格1</div>
<div class="col-sm-6 mydiv">单元格2</div>
</div>
<div class="row" style="background-color: aqua;">
<div class="col-sm-offset-1 col-sm-1 mydiv">单元格1</div>
<div class="col-sm-1 mydiv">单元格2</div>
<div class="col-sm-1 mydiv">单元格3</div>
</div>
</div>
</body>
</html>
小挂件
<!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>小挂件</title>
<!-- 注意引入的顺序 -->
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/validate.min.js"></script>
<link rel="stylesheet" href=".//css/bootstrap.css">
</head>
<body>
<hr/>
<form action="" class="form-horizontal">
<!-- form-group 表单组 -->
<div class="form-group">
<!-- label 占屏幕的 2/12 -->
<label for="username" class="col-sm-2 text-right">输入用户名</label>
<!-- input 站屏幕的 10/12 超过10就会换行-->
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-addon" style="background-color: rgb(206, 17, 17);">$</div>
<input type="text" class="form-control" id="username">
<div class="input-group-addon">.00</div>
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 text-right">输入密码</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="password">
</div>
</div>
<div class="checkbox">
<label><input type="checkbox"> Check me out</label>
</div>
<input type="submit" class="btn btn-success" value="登录">
</form>
<hr/>
<form action="" class="form-horizontal">
<!-- form-group 表单组 -->
<div class="form-group">
<!-- label 占屏幕的 2/12 -->
<label for="username" class="col-sm-2 text-right">输入用户名</label>
<!-- input 站屏幕的 10/12 超过10就会换行-->
<div class="col-sm-6">
<input type="text" class="form-control" id="username">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 text-right">输入密码</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="password">
</div>
</div>
<div class="checkbox">
<label><input type="checkbox"> Check me out</label>
</div>
<!-- col-sm-offset-4 向右偏移4份 总共一行12份-->
<!-- col-sm-offset-6 向右偏移4份-->
<div class="col-sm-offset-4">
<input type="submit" class="btn btn-success" value="登录">
</div>
</form>
</body>
</html>
内联单选复选框
<!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>内联单选复选框</title>
<!-- 注意引入的顺序 -->
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/validate.min.js"></script>
<link rel="stylesheet" href=".//css/bootstrap.css">
</head>
<body>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="sex" id="inlineRadio1" value="option1"> 男
</label>
<label class="radio-inline">
<input type="radio" name="sex" id="inlineRadio2" value="option2"> 女
</label>
<label class="radio-inline">
<input type="radio" name="sex" id="inlineRadio3" value="option3"> 未知
</label>
</body>
</html>
下拉列表
<!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>下拉列表</title>
<!-- 注意引入的顺序 -->
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/validate.min.js"></script>
<link rel="stylesheet" href=".//css/bootstrap.css">
</head>
<body>
<!-- 单选 -->
<select name="" id="">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
</select>
<hr/>
<!-- 多选 -->
<select name="" id="" multiple>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
</select>
<hr/>
<!-- 单选 -->
<div class="container">
<div class="row">
<div class="col-sm-4">
<select name="" id="" class="form-control">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
</select>
</div>
</div>
</div>
<hr/>
<!-- 多选 -->
<select name="" id="" multiple class="form-control" style="width: 20%;">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
</select>
</body>
</html>
下拉菜单
<!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>下拉菜单</title>
<!-- 注意引入的顺序 -->
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/validate.min.js"></script>
<link rel="stylesheet" href=".//css/bootstrap.css">
</head>
<body>
<!-- 1 btn-group 先写按钮组 -->
<!-- <div class="btn-group">
<button id="show" type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
下拉
</button>
</div> -->
<!-- 2 填充下拉菜单 -->
<div class="btn-group">
<button id="show" type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-hand-down"></span></button>
<ul class="dropdown-menu">
<li><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
<li><a href="#">选项3</a></li>
<li><a href="#">选项4</a></li>
</ul>
</div>
</body>
</html>
表单的验证状态
<!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>表单的验证状态</title>
<!-- 注意引入的顺序 -->
<!-- 注意引入的顺序 -->
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/validate.min.js"></script>
<link rel="stylesheet" href=".//css/bootstrap.css">
</head>
<body>
<form action="">
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">用户名必须输入</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<!-- <span id="helpBlock2" class="help-block">用户名必须输入</span> -->
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
<!-- 复选框 -->
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
</form>
</body>
</html>
按钮和图片形状
<!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>按钮和图片形状</title>
<!-- 注意引入的顺序 -->
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/validate.min.js"></script>
<link rel="stylesheet" href=".//css/bootstrap.css">
</head>
<body>
按钮 <br />
<button type="button" class="btm btn-default">按钮1</button>
<button type="button" class="btm btn-primary">按钮2</button>
<button type="button" class="btm btn-success">按钮3</button>
<button type="button" class="btm btn-warning">按钮4</button>
<button type="button" class="btm btn-danger">按钮5</button>
<button type="button" class="btm btn-info">按钮6</button>
<button type="button" class="btm btn-link">按钮7</button>
<hr>
2.成组button btn 样式表现为按钮样式
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> 选项 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> 选项 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> 选项 3
</label>
</div>
<hr/>
3 按钮大小
<button type="button" class="btn btn-success btn-lg">按钮大</button>
<button type="button" class="btn btn-success">按钮</button>
<button type="button" class="btn btn-success btn-sm">按钮小</button>
<button type="button" class="btn btn-success btn-xs">按钮超小</button>
<hr>
4 按钮组
<button type="button" class="btn btn-success">按钮1</button>
<button type="button" class="btn btn-success">按钮2</button>
<button type="button" class="btn btn-success">按钮3</button>
<hr>
<div class="btn-group">
<button type="button" class="btn btn-success">按钮1</button>
<button type="button" class="btn btn-success">按钮2</button>
<button type="button" class="btn btn-success">按钮3</button>
</div>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-success">按钮1</button>
<button type="button" class="btn btn-success">按钮2</button>
<button type="button" class="btn btn-success">按钮3</button>
</div>
<hr>
5 多个按钮组 合并 按钮工具条
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-success">按钮1</button>
<button type="button" class="btn btn-success">按钮2</button>
<button type="button" class="btn btn-success">按钮3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success">按钮11</button>
<button type="button" class="btn btn-success">按钮22</button>
<button type="button" class="btn btn-success">按钮33</button>
</div>
</div>
</body>
</html>
图片形状
<!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>图片形状</title>
<!-- 注意引入的顺序 -->
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/validate.min.js"></script>
<link rel="stylesheet" href=".//css/bootstrap.css">
</head>
<body>
图片形状 <br/>
<img src="./imags/2.jpg" alt=""><br/>
img-circle
<img src="./imags/2.jpg" class="img-circle" alt=""><br/>
img-responsive
<img src="./imags/2.jpg" class="img-responsive" alt=""><br/>
img-rounded
<img src="./imags/2.jpg" class="img-rounded" alt=""><br/>
img-thumbnail
<img src="./imags/2.jpg" class="img-thumbnail" alt=""><br/>
自适应的缩略图效果
<img src="./imags/2.jpg" class="img-responsive img-thumbnail" alt=""><br/>
</body>
</html>
导航条
<!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>导航条</title>
<!-- 注意引入的顺序 -->
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/validate.min.js"></script>
<link rel="stylesheet" href=".//css/bootstrap.css">
</head>
<body>
<!-- 选项卡导航 -->
<ul class="nav nav-tabs" >
<li><a href="#" data-toggle="tab">h5</a></li>
<li class="active"><a href="#" data-toggle="tab">java</a></li>
<li><a href="#" data-toggle="tab">android</a></li>
<li><a href="#" data-toggle="tab">ios</a></li>
</ul>
<div class="tab-content" id="myContent">
<div class="tab-pane fade" id="h5">
<p>Html5最近比较火</p>
</div>
<div class="tab-pane fade in active" id="java">
<p>java是高级语言，是最好的语言</p>
</div>
<div class="tab-pane fade" id="android">
<p>android是最受大众欢迎的智能机品牌</p>
</div>
<div class="tab-pane fade" id="ios">
<p>ios是最受大众欢迎的智能机品牌</p>
</div>
</div>
<hr />
<!-- 胶囊导航 -->
<!-- <ul class="nav nav-pills">
<li><a href="#" data-toggle="tab">h5</a></li>
<li class="active"><a href="#" data-toggle="tab">java</a></li>
<li><a href="#" data-toggle="tab">android</a></li>
<li><a href="#" data-toggle="tab">ios</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade" id="h5">
<p>Html5最近比较火</p>
</div>
<div class="tab-pane fade in active" id="java">
<p>java是高级语言，是最好的语言</p>
</div>
<div class="tab-pane fade" id="android">
<p>android是最受大众欢迎的智能机品牌</p>
</div>
<div class="tab-pane fade" id="ios">
<p>ios是最受大众欢迎的智能机品牌</p>
</div>
</div> -->
<hr />
<!-- 路径导航 面包屑导航 -->
<ol class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">关于我们</a></li>
</ol>
<script>
$(function(){
// js
$(function(){
$("ul.nav li").click(function(){
// 当前点击的元素的所有兄弟元素 其他li 去掉激活样式
$(this).siblings().removeClass("active");
// 当前点击的元素 增加激活样式
$(this).addClass("active");
// 获取当前的第几个
var idx = $(this).index();
// 获取下表对应的面板div
var show = $("#myContent .tab-pane").eq(idx);
// 其他面板隐藏掉
show.siblings().removeClass("in active");
// 当前面板显示
show.addClass("in active");
});
});
})
</script>
</body>
</html>
<!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>导航条</title>
<!-- 注意引入的顺序 -->
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/validate.min.js"></script>
<link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
<!-- 胶囊导航 -->
<ul class="nav nav-pills" >
<li><a href="#h5" data-toggle="tab">h5</a></li>
<li class="active"><a href="#java" data-toggle="tab">java</a></li>
<li><a href="#android" data-toggle="tab">android</a></li>
<li><a href="#ios" data-toggle="tab">ios</a></li>
</ul>
<div class="tab-content" id="myContent">
<div class="tab-pane fade" id="h5">
<p>Html5最近比较火</p>
</div>
<div class="tab-pane fade in active" id="java">
<p>java是高级语言，是最好的语言</p>
</div>
<div class="tab-pane fade" id="android">
<p>android是最受大众欢迎的智能机品牌</p>
</div>
<div class="tab-pane fade" id="ios">
<p>ios是最受大众欢迎的智能机品牌</p>
</div>
</div>
</body>
</html>
分页
<!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>分页</title>
<!-- 注意引入的顺序 -->
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/validate.min.js"></script>
<link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
<ul class="pager">
<li><a href="">1</a></li>
<li><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="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
</ul>
<hr/>
<ul class="pagination">
<li><a href="">1</a></li>
<li><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="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
</ul>
</body>
</html>
缩略图
<!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>缩略图</title>
<!-- 注意引入的顺序 -->
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/validate.min.js"></script>
<link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<!-- 1 可以点击的图片 thumbnail 缩略图-->
<a href="#" class="thumbnail">
<img src="./imags/2.jpg" alt="">
</a>
<!-- 2 图片下边是两行文本 -->
<div class="caption">
<h4>html 入门</h4>
<h5>说明情况啦啦啦啦</h5>
</div>
</div>
<div class="col-md-4">
<!-- 1 可以点击的图片 thumbnail 缩略图-->
<a href="#" class="thumbnail">
<img src="./imags/2.jpg" alt="">
</a>
<!-- 2 图片下边是两行文本 -->
<div class="caption">
<h4>html 入门</h4>
<h5>说明情况啦啦啦啦</h5>
</div>
</div>
<div class="col-md-4">
<!-- 1 可以点击的图片 thumbnail 缩略图-->
<a href="#" class="thumbnail">
<img src="./imags/2.jpg" alt="">
</a>
<!-- 2 图片下边是两行文本 -->
<div class="caption">
<h4>html 入门</h4>
<h5>说明情况啦啦啦啦</h5>
</div>
</div>
<div class="col-md-4">
<!-- 1 可以点击的图片 thumbnail 缩略图-->
<a href="#" class="thumbnail">
<img src="./imags/2.jpg" alt="">
</a>
<!-- 2 图片下边是两行文本 -->
<div class="caption">
<h4>html 入门</h4>
<h5>说明情况啦啦啦啦</h5>
</div>
</div>
<div class="col-md-4">
<!-- 1 可以点击的图片 thumbnail 缩略图-->
<a href="#" class="thumbnail">
<img src="./imags/2.jpg" alt="">
</a>
<!-- 2 图片下边是两行文本 -->
<div class="caption">
<h4>html 入门</h4>
<h5>说明情况啦啦啦啦</h5>
</div>
</div>
<div class="col-md-4">
<!-- 1 可以点击的图片 thumbnail 缩略图-->
<a href="#" class="thumbnail">
<img src="./imags/2.jpg" alt="">
</a>
<!-- 2 图片下边是两行文本 -->
<div class="caption">
<h4>html 入门</h4>
<h5>说明情况啦啦啦啦</h5>
</div>
</div>
</div>
</div>
</body>
</html>
模态框
<!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>模态框</title>
<!-- 注意引入的顺序 -->
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/validate.min.js"></script>
<link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal --><!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
轮播图
<!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>轮播图</title>
<!-- 注意引入的顺序 -->
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/validate.min.js"></script>
<link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
1021
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
