生产环境下载
https://v3.bootcss.com/getting-started/#download
CDN简介(内容分发网络)
bootstrap文件划分
-
js
只需要留一个bootstrap.min.js即可
-
css
只需要一个bootstrap.min.css即可
-
fonts
都是必须的，不需要我们手动导入，js文件会自动查找导入对于的fonts文件
注意
bootstrap中的js文件依赖于jQuery，所以使用bootstrap需要先导入jQuery
实际网站示例
Normalize.css(不同浏览器样式一致性)
布局容器
-
container与container-fluid
栅格系统
-
row(行)
-
col(列)
<style> .red { background-color: red; border: 3px solid green; height: 100px; } </style> <div class="container"> <div class="row"> <div class="col-md-6 red"></div> <div class="col-md-6 red"></div> </div> </div> <!-- 6，6 2，10 1～12 再次理解class里面写的属性值到底是干啥的 --> <!--借助谷歌浏览器自动切换手机或电脑屏幕，只需要加一个col-xs-6生成对应的布局-->
媒体查询
<style> .c1 { background-color: red; } @media screen and (max- 600px){ .c1 { background-color: green; } } </style> <div class="col-md-6 red c1"></div>
响应式列重置
<style> .c2 { background-color: red; } .c3 { height: 60px; } </style> <div class="container"> <div class="row"> <div class="col-xs-6 col-sm-3 c3 c2">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3 c2">.col-xs-6 .col-sm-3</div> <!-- Add the extra clearfix for only the required viewport --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-3 c2">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3 c2">.col-xs-6 .col-sm-3</div> </div> </div>
列偏移
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
排版
<h1>h1. Bootstrap heading <small>Secondary text</small></h1> <p class="lead">...</p> <mark>highlight</mark> <!--两者效果一样，但是语义不一样--> <del>This line of text is meant to be treated as deleted text.</del> <s>This line of text is meant to be treated as no longer accurate.</s> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> <!--列表组--> <ul class="list-unstyled"> <li>...</li> </ul> <ul class="list-inline"> <li>...</li> </ul>
表格标签
<table class="table table-bordered table-hover table-striped"></table> <tr class="active">...</tr>
表单
-
登陆示例
-
input框提示信息显影
按钮
<button class='btn-success/btn-info/btn-primary/btn-danger/btn-warning'> // 按钮 </button>
快速浮动
<div class="pull-left">...</div> <div class="pull-right">...</div>
组件
<!--字体图标 意味着操作它跟操作普通文本一样 爱心图标举例--> <!--图标大小可以通过调span标签所在的父标签调节-->
Font-Awesome简介
-
css
-
fonts
标签页
-
实际应用场景 >>> 购物网站物品各类信息(JS插件标签页)
JS插件
模态框
-
data参数绑定
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
-
自定义代码
$('#myModal').modal('show/hide')
sweetalert插件
https://lipis.github.io/bootstrap-sweetalert/
下载只需要用dist文件夹
swal('标题')
swal('标题','文本')
swal('标题','文本'，'success')
swal('标题','文本','warning')
swal('标题','文本','info')
swal('标题','文本','error')
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="D:Bootstrapootstrap-3.3.7-distfonts" rel="stylesheet">
<link href="D:Pycharmday50sweetalertdistsweetalert.css" rel="stylesheet">
<link href="D:Pycharmday50sweetalertdistsweetalert.min.js" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">图书管理系统</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">链接 <span class="sr-only">(current)</span></a></li>
<li><a href="#">链接</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">其他操作 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">苟</a></li>
<li><a href="#">利</a></li>
<li><a href="#">国</a></li>
<li><a href="#">家</a></li>
<li><a href="#">生</a></li>
<li><a href="#">死</a></li>
<li><a href="#">已</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="搜索">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登录用户</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多操作 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">岂</a></li>
<li><a href="#">因</a></li>
<li><a href="#">祸</a></li>
<li><a href="#">福</a></li>
<li><a href="#">避</a></li>
<li><a href="#">趋</a></li>
<li><a href="#">之</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="col-md-3">
<div class="list-group">
<a href="#" class="list-group-item active">我是你爸</a>
<a href="#" class="list-group-item">我是你爸的爸</a>
<a href="#" class="list-group-item">我是你爸的爸的爸</a>
<a href="#" class="list-group-item">我是你爸的爸的爸的爸</a>
<a href="#" class="list-group-item">我是你爸的爸的爸的爸的爸</a>
</div>
</div>
<div class="col-md-9">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">图书搜索系统<span class="glyphicon glyphicon-book
pull-right"></span></h3>
</div>
<div class="panel-body">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">搜索</label>
<div class="input-group">
<input type="text" class="form-control" id="exampleInputAmount" placeholder="搜索">
</div>
</div>
<button type="submit" class="btn btn-primary" >搜索</button>
<button type="button" class="btn btn-success pull-right">新增</button>
</form>
<br>
<table class="text-center table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="text-center">id</th>
<th class="text-center">书名</th>
<th class="text-center">价格</th>
<th class="text-center">作者</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>某哦某</td>
<td>999</td>
<td>某某</td>
<td>
<a href="" class="btn btn-primary">编辑</a>
<a href="" class="btn btn-danger">删除</a>
</td>
</tr>
<tr>
<td>1</td>
<td>某哦某</td>
<td>999</td>
<td>某某</td>
<td>
<a href="" class="btn btn-primary">编辑</a>
<a href="" class="btn btn-danger">删除</a>
</td>
</tr>
<tr>
<td>1</td>
<td>某哦某</td>
<td>999</td>
<td>某某</td>
<td>
<a href="" class="btn btn-primary">编辑</a>
<a href="" class="btn btn-danger">删除</a>
</td>
</tr>
<tr>
<td>1</td>
<td>某哦某</td>
<td>999</td>
<td>某某</td>
<td>
<a href="" class="btn btn-primary">编辑</a>
<a href="" class="btn btn-danger">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>