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.tabletable 基本类 对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-*让主轴变为xli.nav-itema.nav-linknavbar-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>

BootStrap #响应式布局 #组件相关推荐

bootstrap响应式布局之阿里百秀
响应式布局移动端布局技术选型 -流式布局(百分比布局) -flex弹性布局 -rem适配布局 -响应式布局响应式就是页面布局会随着屏幕大小变化响应,做出不同的布局模式. 相应不同设备(手机,PAD ...
Bootstrap响应式布局以及栅格框架
一.Bootstrap简单配置简单使用Bootstrap,只需引入: <script type="text/javascript" src="js/jquery. ...
[JavaWeb-Bootstrap]Bootstrap响应式布局
响应式布局 * 同一套页面可以兼容不同分辨率的设备. * 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子 * 步骤:1. 定义容器.相当于之前的table.* 容器分类:1. ...
Bootstrap 响应式布局辅助类
为了针对移动设备进行快速开发,在 responsive.less 文件中,Bootstrap 为响应式开发提供了一些辅助 class,它们用于针对不同设备显示和隐藏内容.可用的 class 列表及它们 ...
Bootstrap响应式框架,组件化开发
Bootstrap 概述: 是最受欢迎的HTML,CSS和JS框架,用于开发响应式布局,移动设备优先的WEB项目. Bootstrap是基于jquery开发的,在使用时需要引入jquery的js文件. ...
bootstrap响应式布局
目录编辑布局container 容器: 简单的响应式导航栏: bootstrap快速开发: bootstrap 栅格系统: 响应式开发里面首先需要一个布局容器:class = "con ...
Bootstrap 响应式布局模板
每次制作响应式页面都要写一大坨东西,很是麻烦,于是我私人订制了一个bootrap模板,放在的这备个份,喜欢的就拿走吧. <!DOCTYPE html> <html lang=&quo ...
bootstrap table border粗细_Web前端开发(18)——Bootstrap响应式布局
使用步骤 ①下载Bootstrap 进入Bootstrap中文网(https://www.bootcss.com/)可以直接下载Bootstrap代码以及使用文档. ②将代码复制项目中下载下来之后会 ...
Bootstrap响应式布局案例- -阿里百秀
文章目录 1.搭建结构 2.show.html 3.index.css 4.所需图片 1.搭建结构 2.show.html <!DOCTYPE html> <html lang=&q ...

BootStrap #响应式布局 #组件

BootStrap #响应式布局 #组件相关推荐

最新文章

热门文章