bootsrtap 讲解
1、概述
2、响应式页面案例
bootstrap官网：link.
3、bootstrap组成
- 全局css的样式
- 组件
- js插件
4、格栅系统
- 格栅系统简介
- 媒体查询功能
- 代码示例
4、排版
- 示例代码：
5、表格
- 示例代码：
6、表单（官网超级详细）
- 表单: bootstrap官网样例.
- 简介
- 内联表单
- 水平表单
- 表单校验
7、按钮
- 按钮示例：
<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组件导航样例.
- 示例：
<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、分页
- 示例：
<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">1a>
li>
<li>
<a href="#">2a>
li>
<li>
<a href="#">3a>
li>
<li>
<a href="#">4a>
li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">下页span>
a>
li>
ul>
nav>
body>
html>
11、缩略图
- 示例：
<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模态框.
<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 @getbootstrapbutton> ...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">Closebutton>
<button type="button" class="btn btn-primary">Send messagebutton>
div>
div>
div>
div>
body>
html>
13、轮播图
- 参考bootstrap插件: bootstrap轮播图.
- 示例：
<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">
<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>
<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>
<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">Previousspan>
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">Nextspan>
a>
div>
body>
html>
