Bootstrap框架
生产环境下载
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-width: 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')