1、概述
2、响应式页面案例
bootstrap官网：link.
3、bootstrap组成
- 全局css的样式
- 组件
- js插件
4、格栅系统
4、排版
- 示例代码：
5、表格
- 示例代码：
6、表单（官网超级详细）
- 表单: bootstrap官网样例.
- 简介
- 内联表单
- 水平表单
- 表单校验
7、按钮
- 按钮示例：
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css" />
</head>
<body>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<div class="btn btn-success">测试按钮</div>
<button>这是个按钮</button>
<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>
</body>
</html>
8、按钮
- 示例：
9、导航栏
- 参照bootstrap组件导航: bootstarp组件导航样例.
- 示例：
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css" />
</head>
<body>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul li").each(function(){
$(this).click(function(){
$(this).attr("class","active");
$("ul li:not(this)").removeAttr("class");
});
})
})
</script>
<img src="logo.jpg" class="img-responsive img-circle">
<li role="presentation" class="active">
<a href="#" data-toggle="tab">系别</a>
</li>
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<a href="#" data-toggle="tab">分类</a>
</li>
<li role="presentation">
<a href="#" data-toggle="tab">图片</a>
</li>
<li role="presentation">
<a href="#" data-toggle="tab">视频</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="h5">
<p>中文系<br>考古系<br>数学系</p>
</div>
<div class="tab-pane fade" id="java">
<p>java是高级语言，是最好的语言</p>
</div>
<div class="tab-pane fade" id="android">
<p>android是最受大众欢迎的智能机品牌</p>
</div>
</div>
</body>
</html>
10、分页
- 示例：
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css" />
</head>
<body>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="PrevIoUs">
<span aria-hidden="true">上页</span>
</a>
</li>
<li>
<a href="test.html">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">下页</span>
</a>
</li>
</ul>
</nav>
</body>
</html>
11、缩略图
- 示例：
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css" />
</head>
<body>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<div class="container" style="margin-top: 30px;">
<div class="row">
<div class="col-md-4">
<a href="#" class="thumbnail"> <img src="logo.jpg"></a>
<div class="caption">
<h4 class="text-center">HTML入门</h4>
<h6 class="text-center">html是最好的静态网页语言</h6>
</div>
</div>
<div class="col-md-4">
<a href="#" class="thumbnail"> <img src="logo.jpg"></a>
<div class="caption">
<h4 class="text-center">CSS入门</h4>
<h6 class="text-center">CSS是最好的样式语言</h6>
</div>
</div>
<div class="col-md-4">
<a href="#" class="thumbnail"> <img src="logo.jpg"></a>
<div class="caption">
<h4 class="text-center">JS入门</h4>
<h6 class="text-center">CSS是最好的样式语言</h6>
</div>
</div>
</div>
</div>
</body>
</html>
12、模态框
- 参考bootstrap插件: bootstrap模态框.
<!DOCTYPE html>
<html>
<head>
<Meta charset="{CHARSET}">
<title></title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css" />
</head>
<body>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('#exampleModal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you Could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you Could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
</script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button> ...more buttons...
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<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="exampleModalLabel">登陆界面</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="usrname" class="control-label">用户名：</label>
<input type="text" class="form-control" id="usrname" name="usrname">
</div>
<div class="form-group">
<label for="message-text" class="control-label">密码：</label>
<input type="password" class="form-control" id="usrpass" name="usrpass">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
</body>
</html>
13、轮播图
- 参考bootstrap插件: bootstrap轮播图.
- 示例：
<!DOCTYPE html>
<html>
<head>
<Meta charset="{CHARSET}">
<title></title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css" />
<style type="text/css">
.carousel {
width: 525px;
height: 525px;
}
.item img {
width: 525px;
height: 525px;
}
</style>
</head>
<body>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.carousel').carousel({
interval: 500;
})
</script>
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listBox">
<div class="item active">
<img src="pic/1.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="pic/2.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="pic/3.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="pic/4.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>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
