jQuery---bootstrap的下载使用,栅格(12个格子),轮播图,矢量图字体图标,进度条,选项卡,标签,表达校验
jQuery---bootstrap的下载使用,栅格(12个格子),轮播图,矢量图字体图标,进度条,选项卡,标签,表达校验
一丶bootstrap的使用
下载资源文件:
导入
// 1.导入样式
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
// 2.导入bootstrap的js,依赖jquery,先导入jquer
<script src="bootstrap-3.3.7-dist/js/jquery3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
// 3.导入网络资源
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!--jQuery的导入-->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
二丶栅格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>栅格系统</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
.col-md-1, .col-md-3, .col-md-5, .col-md-7, .col-md-9, .col-md-11 {
height: 50px;
line-height: 50px;
border: 1px solid mediumaquamarine;
}
.col-md-2, .col-md-4, .col-md-6, .col-md-8, .col-md-10, .col-md-12 {
height: 50px;
line-height: 50px;
border: 1px solid red;
}
.col-xs-6 {
height: 50px;
line-height: 50px;
border: 1px solid chartreuse;
}
</style>
</head>
<body>
<!--
栅格参数:
一共占12个格子,
居中显示
-->
<div class="container">
<div class="row">
<div class="col-md-1 text-center">1</div>
<div class="col-md-1 text-center">2</div>
<div class="col-md-1 text-center">3</div>
<div class="col-md-1 text-center">4</div>
<div class="col-md-1 text-center">5</div>
<div class="col-md-1 text-center">6</div>
<div class="col-md-1 text-center">7</div>
<div class="col-md-1 text-center">8</div>
<div class="col-md-1 text-center">9</div>
<div class="col-md-1 text-center">10</div>
<div class="col-md-1 text-center">11</div>
<div class="col-md-1 text-center">12</div>
</div>
<div class="row">
<div class="col-md-2 text-center">1</div>
<div class="col-md-2 text-center">2</div>
<div class="col-md-2 text-center">3</div>
<div class="col-md-2 text-center">4</div>
<div class="col-md-2 text-center">5</div>
<div class="col-md-2 text-center">6</div>
</div>
<div class="row">
<div class="col-md-3 text-center">1</div>
<div class="col-md-3 text-center">2</div>
<div class="col-md-3 text-center">3</div>
<div class="col-md-3 text-center">4</div>
</div>
<!--从堆叠到水平排列-->
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<!-- 流式布局容器 -->
<div class="container-fluid">
<div class="row">
<div class="col-md-6">流式布局容器</div>
<div class="col-md-6">流式布局容器</div>
</div>
</div>
</div>
<!--移动设备和桌面屏幕: 响应式-->
<div class="row">
<div class="col-xs-12 col-md-8">响应式</div>
<div class="col-xs-6 col-md-4">响应式</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">响应式</div>
<div class="col-xs-6 col-md-4">响应式</div>
<div class="col-xs-6 col-md-4">响应式</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">响应式</div>
<div class="col-xs-6">响应式</div>
</div>
<!--手机、平板、桌面-->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
<!-- 多余的 列 -->
<div class="row">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as
one contiguous unit.
</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>
<!-- 列偏移 -->
<div class="row">
<div class="col-md-12">列偏移</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
</body>
<script src="bootstrap-3.3.7-dist/js/jquery3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>
三丶轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<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="http://www.xiaohuar.com/images/banner/2.jpg" alt="...">
<div class="carousel-caption">
笑话网
</div>
</div>
<div class="item">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566317544663&di=556c109264dff8e21a6a6a7154cfa16b&imgtype=0&src=http%3A%2F%2Fpic65.nipic.com%2Ffile%2F20150429%2F20318013_105209450000_2.jpg"
alt="时光旅行">
<div class="carousel-caption">
时光旅行
</div>
</div>
<div class="item">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566317544670&di=1e2e67d8453e9ec67893e8f13ee5f710&imgtype=0&src=http%3A%2F%2Fpic2.16pic.com%2F00%2F54%2F93%2F16pic_5493004_b.jpg"
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>
</div>
</div>
</div>
</body>
<script src="../bootstrap-3.3.7-dist/js/jquery3.4.1.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>
四丶矢量字体图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="font_dxgohix8u0r/iconfont.css">
<style>
.glyphicon,.iconfont , .fa{
font-size: 50px;
color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- bootStrap 矢量字体图 -->
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<!-- 阿里矢量库 矢量字体图 -->
<span class="iconfont icon-fangshai"></span>
<!-- awesome 矢量字体图 -->
<span class="fa fa-id-card"></span>
</div>
</div>
</div>
</body>
<script src="bootstrap-3.3.7-dist/js/jquery3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>
五丶进度条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<!--默认样式的进度条-->
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
</div>
<div class="col-md-12">
<!-- 带有提示标签的进度条-->
<!--将设置了 .sr-only 类的 <span> 标签从进度条组件中移除 类，从而让当前进度显示出来。-->
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 60%;">
60%
</div>
</div>
</div>
<div class="col-md-12">
<!-- 在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性。-->
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100"
style="min-width: 2em; width: 2%;">
2%
</div>
</div>
</div>
<div class="col-md-12">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100"
style="min-width: 2em; width: 2%;">
2%
</div>
</div>
<!-- 根据情境变化效果-->
<!-- 进度条组件使用与按钮和警告框相同的类，根据不同情境展现相应的效果。-->
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0"
aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0"
aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0"
aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
<div class="col-md-12">
<!-- 条纹效果:-->
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20"
aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80"
aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
<div class="col-md-12">
<!-- 动画效果 :.progress-bar-striped 添加 .active 类-->
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45"
aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
</div>
<div class="col-md-12">
<!--堆叠效果: .progress 中-->
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../bootstrap-3.3.7-dist/js/jquery3.4.1.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>
六丶选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
.col-md-12 {
margin-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover"
data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on 左侧
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover"
data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on 顶部
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover"
data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on 底部
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover"
data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on 右侧
</button>
</div>
<div class="col-md-12">
<div style="padding:100px">
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="hover"
title="Dismissible popover"
data-content="And here's some amazing content. It's very engaging. Right?">可消失的弹出框</a>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left"
title="Tooltip on left" data-trigger="click">Tooltip on left
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top"
title="Tooltip on top">Tooltip on top
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
title="Tooltip on bottom">Tooltip on bottom
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right"
title="Tooltip on right">Tooltip on right
</button>
</div>
</div>
</div>
</div>
</body>
<script src="../bootstrap-3.3.7-dist/js/jquery3.4.1.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
$('[data-toggle="tooltip"]').popover()
})
</script>
</html>
七丶标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
</li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>
</li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">111</div>
<div role="tabpanel" class="tab-pane " id="profile">222</div>
<div role="tabpanel" class="tab-pane" id="messages">333</div>
<div role="tabpanel" class="tab-pane" id="settings">444</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../bootstrap-3.3.7-dist/js/jquery3.4.1.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>
$('#myTabs a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
</script>
</html>
八丶表单校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<form>
<div class="form-group has-feedback">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
<div class="form-group has-feedback">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</body>
<script src="../bootstrap-3.3.7-dist/js/jquery3.4.1.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>
$(function () {
var flag = false
$('#exampleInputEmail1').blur(function () {
var val = $(this).val()
var res = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(val)
if (res) {
//校验成功
$(this).parent().removeClass('has-error')
$(this).next().removeClass('glyphicon-remove')
$(this).parent().addClass('has-success')
$(this).next().addClass('glyphicon-ok')
flag = true
} else {
//校验失败
$(this).parent().removeClass('has-success')
$(this).next().removeClass('glyphicon-ok')
$(this).parent().addClass('has-error')
$(this).next().addClass('glyphicon-remove')
}
}).focus(function () {
$(this).triggerHandler('blur')
}).keyup(function () {
$(this).triggerHandler('blur')
});
$(':submit').click(function () {
if (flag) {
alert('登录成功')
return true
} else {
alert('登录失败')
}
return false
})
})
</script>
</html>
