BootStrap #响应式布局 #组件

响应式布局

1.啥叫响应式：根据浏览器页面的设备不同 自动的改变布局 图片 文本 不会影响体验

2.编写响应式的网页：

(1)视口
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
width=device-width  视口宽度为设备宽度
initial-scale=1.0   初始化不允许缩放
maximum-scale=1.0   允许缩放的最大倍率
user-scalable=0     不允许用户缩放
(2)媒体查询
设备条件 media(屏幕尺寸 解析率 横竖屏 ) 硬件条件 screen(pc.pad.phone）
            超大屏xl      screen>=1200px         min-width:1200px
            大屏 lg       992px<=screen<1200px
            中屏 md       768px<=screen<992px
            小屏 sm      576px<=screen<768px
            超小屏 xs      screen<576px
@media screen and (max-width:575.99px) {}
@media screen and (min-width:576px) and (max-width:767.99px){}
@media screen and (min-width:768px) and (max-width:991.99px){}
@media screen and (min-width:992px) and (max-width:1199.99px){}
@media screen and (min-width:1200px) {}


没有screen也不会对编辑有任何影响 

一.使用bootstrap

1.所有的boot代码都卸载<div class="container"></div>
container 定宽容器 四种屏幕 都定义了最大宽度 fluid 变宽容器  两种左右都有15px内边距  auto的外边距

2.按钮

btn 基本类,行内块,内边距,文本系列样式,伪类的一系列样式
按钮颜色
btn-danger/warning/success/info/parmary/secondark/dark/light
镂空按钮
btn-ouline-danger/warning...
按钮大小
btn-lo/sm 通过内边距,字号,行高来调整
块级按钮
btn-block

3.图片

rounded 0.25rem圆角
rounded-circle 50%圆角
img-thumbnail 缩略图 带白色内边距和边框的图片
img-fluid  响应式图片 可以缩放 

4.文本

text-info/danger/warining..
text-uppercase/lowercase/capitalize 字母大写/小写/首字母大写
字体粗细font-weight-light/normal/bold
字号大小  .h1-h6
文本水平对齐  text-center/left/right/justify
响应式的文本水平对齐  text-*-left/center/right  *:sm/md/lg/xl  justify没有封装

5.列表

list-unstyled   去除标识项，左内边距清空
ul.list-group   弹性，主轴为y
li.list-group-item 边框，第一个li有左上右上圆角，最后一个li有左下右下圆角
list-group-item-danger/warning 给每个列表项定义颜色
active 激活项 
disabled 禁用项  

6.table

table 基本类 对table本身和table的后代做样式修饰
table-bordered 设置table本身以及后代th,td的边框
table-striped 隔行变色，添加rgba(0,0,0,0.05)一层 黑纱
table-hover  鼠标悬停时添加一层黑纱 0.075
table-info  颜色

7.辅助类

边框：
border  border-top/right/bottom/left  边框的基本类
border-0  border-left/right/bottom/left-0 清除边框
border-danger/warning....边框颜色

圆角：
rounded  0.25rem的圆角
rounded-circle  50%的圆角
rounded-0
rounded-top/right/bottom/left  封装了4个方向的两个圆角


浮动:
响应式浮动 float-*-left/right/none;   *:sm/md/lg/xl
clearfix 解决高度坍塌

背景：
bg-danger/warning/info.....  bg-transparent

内外边距：
m/mt/mr/mb/ml/mx/my-*-0/1/2/3/4/5/auto   196
*：sm/md/lg/xl
p/pt/pr/pb/pl/px/py-*-0/1/2/3/4/5  没auto    168
0:0rem
1:0.25rem
2:0.5rem
3:1rem
4:1.5rem
5:3rem


尺寸:
w-25/50/75/100
h-25/50/75/100

8.栅格布局

栅格布局的操作，类似于表格
把每一个布局看做一行，有12列
通过每一个元素占多少列，来控制布局效果
row代表一行 col代表占多少格
row   弹性，x轴，可换行，有左右-15px外边距
col-n  左右15px内边距  使用flex-basis 设置每一个项目的宽度
no-gutters  清除row的左右-15外边距，和所有内部col的左右15内边距

示例代码：
    <div class="container">
        <div class="row">
            <div class="col-1">col-1</div>
        </div>
        <div class="row">
            <div class="col-2">col-2</div>
        </div>
        <div class="row">
            <div class="col-3">col-3</div>
        </div>
    </div>


响应式栅格
div.col-*-n  n:1~12   *:sm/md/lg/xl

9.弹性布局的封装

d-*-inline/inline-block/block/table/flex/inline-flex
*:sm/md/lg/xl

关于弹性的设置
1.主轴方向
 flex-*-/row/row-reverse/column/column-reverse
2.是否换行
  flex-*-wrap/nowrap;
3.项目在主轴上的排列方式
  justify-content-*-between/around/start/center/end
4.交叉轴对齐方式
  align-items-*-center/start/end/baseline

10.表单

form-control 文本和密码基本类

二.组件

1.按钮组
    <div class="container">
        <div class="btn-group-vertical">
            <button class="btn btn-success">按钮</button>
            <button class="btn btn-success">按钮</button>
            <button class="btn btn-success">按钮</button>
        </div>
    </div>
    btn-group 水平按钮组
    btn-group-vertical 垂直按钮组

2.下拉菜单
<div class="container">
    <div class="dropdown">
        <button class="btn btn-warning  dropdown-toggle" data-toggle="dropdown">下拉菜单</button>
        <ul class="dropdown-menu">
            <li><a href="">火影忍者</a></li>
            <li><a href="">灌篮高手</a></li>
            <li><a href="">七龙珠z</a></li>
            <li><a href="">海贼王</a></li>
        </ul>
    </div>
</div>
事件：
1.在按钮上写自定属性来激活事件 data-toggle="dropdown"
2.事件目标，由于btn和ul有一个共同结构父级，不需要手动绑定目标

3.信息提示框
    <div class="alert alert-success alert-dismissible" data-dismiss="alert">信息提示框
            <span class="close">x</span>
    </div>
事件
1.在×上写自定属性data-dismiss="alert"
2.不需要指定目标

4.导航

(1)水平导航：弹性，x轴，可换行，去点，去左内边距
<ul class="nav">
  <li class="nav-item"><a href="" class="nav-link">水平导航</a></li>
  <li class="nav-item"><a href="" class="nav-link">水平导航</a></li>
  <li class="nav-item"><a href="" class="nav-link">水平导航</a></li>
  <li class="nav-item"><a href="" class="nav-link">水平导航</a></li>
</ul>



(2)选项卡导航：
<div class="container">
  <ul class="nav nav-tabs">
    <li class="nav-item"><a data-toggle="tab" href="#d1" class="nav-link active">选项卡</a></li>
    <li class="nav-item"><a data-toggle="tab" href="#d2" class="nav-link">选项卡</a></li>
    <li class="nav-item"><a data-toggle="tab" href="#d3" class="nav-link">选项卡</a></li>
    <li class="nav-item"><a data-toggle="tab" href="#d4" class="nav-link">选项卡</a></li>
  </ul>
  <div class="tab-content">
    <div id="d1"class="tab-pane active">这是选项卡一</div>
    <div id="d2"class="tab-pane">这是选项卡二</div>
    <div id="d3"class="tab-pane">这是选项卡三</div>
    <div id="d4"class="tab-pane">这是选项卡四</div>
   </div>
 </div>
  .nav-tabs  让所有nav-link有边框
  .active  设置当前a为选中状态
  .tab-pane  内容都隐藏
  .active     内容显示
 事件
1.给a写自定属性 data-toggle="tab"
2.事件目标需要绑定id   div#d1   a[href="#d1"]


(3)胶囊导航
<div class="container">
     <ul class="nav nav-pills">
         <li class="nav-item"><a data-toggle="pill" href="#nba1" class="nav-link active">湖人</a></li>
         <li class="nav-item"><a data-toggle="pill" href="#nba2" class="nav-link">篮网</a></li>
         <li class="nav-item"><a data-toggle="pill" href="#nba3" class="nav-link">火箭</a></li>
         <li class="nav-item"><a data-toggle="pill" href="nba4" class="nav-link">快船</a></li>
     </ul>
     <div class="tab-content">
         <div id='nba1'class="tab-pane active">詹姆斯</div>
         <div id='nba2'class="tab-pane">杜兰特</div>
         <div id='nba3'class="tab-pane">哈登</div>
         <div id='nba4'class="tab-pane">伦纳德</div>
     </div>
 </div>

5.导航栏
(1)导航栏
    <div class="navbar navbar-expand">
        <ul class="navbar-nav">
            <li class="nav-item"><a href="" class="nav-link">湖人</a></li>
            <li class="nav-item"><a href="" class="nav-link">快船</a></li>
            <li class="nav-item"><a href="" class="nav-link">篮网</a></li>
            <li class="nav-item"><a href="" class="nav-link">雄鹿</a></li>
        </ul>
    </div>
    navbar  弹性，x轴，主轴两端对齐，交叉轴居中
    navbar-expand-* 主轴x，不换行，主轴起点对齐
    ul.navbar-nav 弹性，y轴。配合祖先元素的navbar-expand-*让主轴变为x
    li.nav-item
    a.nav-link
	navbar-expand-*响应式导航栏，在某个屏幕以上li横向显示，在这个屏幕以下li纵向显示

(3)折叠
	<div class="navbar navbar-dark bg-dark navbar-expand-lg">
				<!-- 1.永远显示的a标签 -->
				<a class="navbar-brand" href="#">Bootstrap中文网</a>
				<!-- 2.小屏显示，大屏隐藏的按钮 -->
				<button data-toggle="collapse" data-target="#demo" class="navbar-toggler">
					<span class="navbar-toggler-icon"></span>
				</button>
				<!-- 3.折叠的内容div.collapse>ul>li>a -->
				<div id="demo" class="collapse navbar-collapse">
					<ul class="navbar-nav">
						<li class="nav-item"><a class="nav-link" href="">Boot3</a></li>
						<li class="nav-item"><a class="nav-link" href="">Boot4</a></li>
						<li class="nav-item"><a class="nav-link" href="">less教程</a></li>
						<li class="nav-item"><a class="nav-link" href="">Jquery</a></li>
						<li class="nav-item"><a class="nav-link" href="">网站实例</a></li>
					</ul>
				</div>
	</div>
(4)徽章
	<ul class="list-group">
                <li class="list-group-item">赞<a href="" class="badge badge-success">666</a></li>
    </ul>