1. 技术文章
  2. BootStrap

BootStrap

由 拟墨画扇 提交于 2019-12-19 01:53:25

索引

响应式布局

Responsive web page 响应式/自适应网页(css3 2010提出)
可以根据浏览设备(不要说浏览器大小)不同(pc,pad,phone)
而自动改变布局,图片,文本效果,不影响用户体验

响应式布局必须保证几件事

1.布局的时候,不能使用固定值宽度,(缩小会溢出)
必须是流式布局(默认文档流+浮动)+弹性
2.文字和图片大小随着容器大小改变(相对单位% rem)
3.使用css3提供的媒体查询技术
注意:代码复杂的页面,不适合使用响应式布局(eg: jd)

编写响应式网页

移动端适配(移动端运行,一定要写)<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, 设置视口初始缩放为1倍,不放大不缩小
maximum-scale=1.0, 允许视口最大放大到1倍
user-scalable=0 是否允许用户缩放视口 0,不允许
简洁的写法<meta name="viewport" content="width=device-width, initial-scale=1">
所有的内容/文字/图片尽量使用相对尺寸(rem %) ,不使用绝对值
流式布局+弹性布局+媒体查询,完成响应式布局 , 能不用定位就不用了

@media 媒体查询

CSS3 Media Query,做响应式布局的必备技术
Media 媒体,特指浏览网页的设备 设备就是条件,符合这个条件,就执行这部分样式,忽略其他样式
条件包括两部分 : ①浏览器网页的硬件 screen(pc/pad/phone) , TV , Print
②尺寸: 超大屏幕(xl)width>=1200px , 大屏幕(lg)992px<width<=1199px, 小屏(sm)576<=width<=767
Media Query:根据当前浏览页面的设备不同(尺寸,硬件,方向,解析度),有选择则性的,执行一部分css,忽略掉
css样式
语法 @media sreen and 尺寸{ 样式 }
尺寸 width>=1200 , xl 超大
992<=width<=1199 , lg 大屏 -------@media screen and (min-width:992px) and (max-width:1199px){css样式}
768<=width<=991 , md 中屏幕 -----@media screen and (min-width:768px) and (max-width:991px){css样式}
576<=width<=767 , sm 小屏---------@media screen and (min-width:576px) and (max-width:767px){css样式}
width<=575 , xs 超小
简写方式 : @media 尺寸{ 样式 }

<style>
	@media screen and (min-width:992px) and (max-width:1199px){
		#d1{
			 /*这个样式的执行依赖于上面条件的成立*/
			background:#000;
			font:50px chiller;
			color:#f00;
		}
	}
	@media screen and (min-width:768px) and (max-width:991px){
		#d1{
			background:#0ff;
			font:36px jokerman;
			color:#f0f;
		}
	}
	@media screen and (min-width:576px) and (max-width:767px){
		#d1{
			background:#ff0;
			font:12px 'mv boli';
			color:#069;
		}
	}
</style>
<body>
  <div id="d1">Lorem*2000</div>
</body>

使用chrome自带的模拟软件测试响应式网页

在这里插入图片描述

<head>
	<meta charset="utf-8">
	<style>
		*{margin:0;padding:0;
		  box-sizing:border-box;
		}
		div{border:1px solid #000}
		#left,#center,#right{float:left;}
		#parent:after{
			content:"";display:block;clear:both;
		}
		li{border:3px solid purple;}
		@media (min-width:992px){
			#left,#right{width:20%;}
			#center{width:60%;}
			#center>.imgs>img{
				width:25%;
				padding:2px;
			}
		}
		@media (min-width:768px) and (max-width:991px){
			#left{width:30%;}
			#center{width:70%;}
			#right{display:none;}
			#center>.imgs>img{
				width:25%;
				padding:2px;
			}
		}
		@media (max-width:767px){
			#left,#center,#right{width:100%;}
			#center>.imgs>img{
				width:50%;
				padding:2px;
			}
		}
	</style>
</head>
<body>
	<div id="content">
		<div id="left">
			<ul>
				<li><a href="">豆蔻年华</a></li>
				<li><a href="">花样年华</a></li>
				<li><a href="">而立之年</a></li>
				<li><a href="">激情岁月</a></li>
			</ul>
		</div>
		<div id="center">
			<div class="imgs">
				<img src="1.jpg" alt="">
				<img src="2.jpg" alt="">
				<img src="3.jpg" alt="">
				<img src="4.jpg" alt="">
			</div>
			<p>
				Lorem 
			</p>
		</div>
		<div id="right">
			<p>
				Lorem 
			</p>
		</div>
	</div>
</body>
BootStrap 使用

boot使用类选择器,为我们封装好了很多样式 , 我们只需要使用class调用就可以了, 但是,有很多封装的样式,不符合现实的需求 , 需要我们重写样式
Boot内容 1.如何使用boot 2.全局css样式 3.组件和插件 4.定制scss/sass 5.项目

①视口 <meta name="viewport" content="width=device-width, initial-scale=1">
②按照顺序导入4个boot文件

<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>

全局css样式
容器
.container 定宽容器,在不同屏幕尺寸下,最大宽度固定.水平居中,内边距
.container-fluid 变宽容器,永远是body的宽度100%

③body中添加容器div.container
注意: 所有boot代码在容器中编写 , boot支持4个屏幕 xl-lg-md-sm 不支持超小xs ,boot默认1rem=16px;

按钮相关样式

btn 基本类 行内块,字体,对齐,字号,圆角,过渡,阴影
按钮颜色

btn-颜色 样式
btn-success 成功 绿色
btn-danger 危险 红色
btn-warning 警告 黄色
btn-info 信息 藏青色
btn-primary 主要的 蓝色
btn-secondary 次要的 灰色
btn-dark 深色
btn-light 浅色
class=“btn btn-danger” 颜色样式前要加btn使用

只带边框的按钮btn-outline-danger/warning....
不同按钮大小btn-lg/sm 改变内边距和字号大小
链接按钮btn-link
块级按钮btn-block

图片文字相关样式

rounded 圆角0.25rem 4px
rounded-circle 圆角50%
img-thumbnail 缩略图,有内边框边框的图片
img-fluid 响应式图片,图片可以缩放,但是最大不超过本身默认尺寸

text-danger/warning/info/....字体颜色
text-muted 灰色字体
text-capitalize/uppercase/lowercase 首字母大写/全大写/全小写
.h1/.h2/.h3/.h4/.h5/.h6 设置字号大小font-weight-bold/light/normal

响应式的文本对齐

text-xl/lg/md/sm-left/center/right响应式的文本对齐,封装媒体查询
但是text-justify没有封装响应式

Boot向上兼容
@media (min-width: 1200px) { .text-xl-justify{text-align: justify !important;}}
@media (min-width: 992pxpx) { .text-lg-justify{text-align: justify !important;}}
@media (min-width: 768px) { .text-md-justify{text-align: justify !important;}}
@media (min-width: 76px) { .text-sm-justify{text-align: justify !important;}}

---------------------------------------------------------------------BootStrap中的源码----------------------------------------------------------------------------------
class="text-lg-center text-md-left text-sm-right" ×注意: boot封装的媒体查询,有向上兼容的问题 , 是由于源码中上面部分决定的
sm 在sm/md/lg/xl下生效
md 在md/lg/xl下生效
lg 在lg/xl下生效
xl 在xl下生效
在这里插入图片描述

列表相关样式

列表
list-unstyled 去点,清除左内边距
ul.list-group
>li.list-group-item 创建列表组和列表项
li.list-group-item-danger/warning......列表项颜色
active/disabled激活/禁用项
表格
table 基本类,对表格和后代进行布局
table-bordered 为表格和后代添加边框
table-info/danger… 为表格添加颜色
table-striped 隔行变色
table-hover 鼠标悬停变色
边框
border 基本类,设置4个方向边框
border-top/right/bottom/left 基本类,设置一个方向的边框
border-0 清除边框
border-top/right/bottom/left-0 清除一个方向的边框
border-danger… 边框颜色
浮动 float-xl/lg/md/sm-left/right/none
背景 bg-danger/info......
显示 visible 显示 invisible 隐藏
内外边距
m/mt/mr/mb/ml/mx/my-xl/lg/md/sm-0/1/2/3/4/5/auto
p/pt/pr/pb/pl/px/py-xl/lg/md/sm-0/1/2/3/4/5
padding没有auto
0:0rem
1:0.25rem
2:0.5rem
3:1rem
4:1.5rem
5:3rem
尺寸
w-25/50/75/100
mw-100 max-width:100%
h-25/50/75/100
mh-100 max-height:100%
圆角
rounded/rounded-0 圆角0.25rem/去除圆角
rounded-top/right/bottom/left

栅格布局

①使用栅格,容易控制
.row>col-1/2/3/4/5/6/7/8/9/10/11/12
②响应式栅格
.row>col-*-1/2/3/4/5/6/7/8/9/10/11/12
:xl/lg/md/sm
③使用栅格的注意事项
row:弹性,主轴横向,可换行 ,左右自带-15px外边距(清0)
col:左右自带15px内边距(清0)
no-gutters 写在 row的div,把row的mx-0,把col的px-0
④boot的响应式向上兼容的问题
⑤col
.col 让内部元素平局分配空间,甚至可以大于12个
⑥列偏移
offset-1/2/3/4/5/6/7/8/9/10/11 底层是margin-left
⑦栅格嵌套
.row直接子元素只能是col
需要在col中,再写.row>.col
5.弹性布局
d--flex/none/block/inline/inline-block/table
:xl/lg/md/sm
所有弹性,主轴为x轴(换行),都可以替代栅格的.row
1.主轴方向
flex--row/row-reverse/column/column-reverse :xl/lg/md/sm
2.主轴对齐方向
justify-content--around/between/start/center/end *:xl/lg/md/sm

6.表单
①表单元素的排列方向
form-group 堆叠表单,垂直方向排列
form-inline 内联表单,水平方向排列(弹性布局,主轴x轴)
②表单元素的样式
对文本框的设置
form-control 文本框的基本类 块级 w100 边框 圆角 过渡 focus
col-form-label/-lg/-sm 设置文本到边框的距离
对checkbox的布局
父级.form-check 相对定位
.form-check-input 绝对定位

.form-text 块级,上外边距4px
三.组件
页面中一些特殊的效果,被boot封装了
让我们更方便,快捷的写出页面效果
boot组件的事件,是通过自定义属性和值来调用的
1.在调用事件的元素上,写自定属性
2.事件发生之后,事件目标
①下拉菜单
基本结构
div.dropdown 相对定位

button.dropdown-toggle 画三角
+ul.dropdown-menu 绝对定位,d-none
事件 button添加自定义属性 data-toggle=“dropdown”
不需要写事件目标

标签
视口
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!