Bootstrap中怎么设置自适应屏幕，步骤是什么
导读：在实际案例的操作过程中，我们可能会遇到“Bootstrap中怎么设置自适应屏幕，步骤是什么”这样的问题，那么我们该如何处理和解决这样的情况呢？这篇小编就给大家总结了一些方法，具有一定的借鉴价值，希望对大家有所帮助，接下来就让小编带领大家一起...
在实际案例的操作过程中，我们可能会遇到“Bootstrap中怎么设置自适应屏幕，步骤是什么”这样的问题，那么我们该如何处理和解决这样的情况呢？这篇小编就给大家总结了一些方法，具有一定的借鉴价值，希望对大家有所帮助，接下来就让小编带领大家一起了解看看吧。Bootstrap是基于HTML.css.javaScript开发的简洁,直观,强悍的前端开发框架,使web开发跟家快捷能制作响应式网页。
bootstrap自适应:
Bootstrap根据屏幕大小吧设备分为超小屏幕,小屏幕,中等屏幕,大屏幕四种并把屏幕分为12列对应屏幕宽度为:
超小屏幕(手机):0-768px 对应设置 class=col-xs-number
小屏幕(平板):768-992px 对应设置class=col-sm-number
中等屏幕(电脑):992-1200px 对应设置 class=col-md-number
大屏幕(电脑):1200px-? 对应设置 class=col-lg-number
在chrome浏览器，elements窗口中会发现当屏幕宽度小于768时，只有com-xs-12生效。
自适应:网页适应不同设备 ,用bootstrap框架
原理:是媒体(设备/浏览器)查询 @media only screen 查询设备的宽度
底层是以@media only screen and (min-width:最小值) and (max-width:最大值)进行呈现:
例一对背景:
@media only screen and (min-width:0px) and (max-width:480px){
body{
background-color:red;
}
}
@media only screen and (min-width:481px) and (max-width:720px){
body{
background-color:green;
}
}
@media only screen and (min-width:721px){
body{
background-color:blue;
}
}
例二对块级元素p
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>
Insert title here/title>
/head>
body>
style type="text/css">
div{
float:left;
}
/**小屏0px-768px*/
@media only screen and (min-width:0px) and (max-width:768px){
.sm-12{
width:100%;
}
}
/**大屏768*/
@media only screen and (min-width:768px){
.lg-6{
width:50%;
}
}
/style>
!-- 两个样式不会同时生效 在小屏上sm-12生效, width是100%在大屏上lg-6生效,width50%
css中标签分块级标记和行级标记,div是块级元素 -->
div class="sm-12 lg-6">
div1/div>
div class="sm-12 lg-6">
div2/div>
/body>
/html>
bootstarp对其进行整合自适应
步骤
1.link标签引入bootstrap.css文件
2.在bootstrap中定义
1)根元素必须是p class值必须等于container
2)根元素必须包含行元素且行元素class值必须等于row
3)行中包含列class的值必须为col-*-number
例如:
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>
Insert title here/title>
link href="bootstrap.css" rel="stylesheet" type="text/css">
/head>
body>
!-- 根元素必须是div class必须=container -->
div class="container">
!-- 根元素必须包含行 class=row -->
div class="row">
!-- 行中包含列 -- class=col-*-number-->
div class="col-xs-12 col-sm-6 col-md-4">
div1/div>
div class="col-xs-12 col-sm-6 col-md-4">
div2/div>
div class="col-xs-12 col-sm-6 col-md-4">
div3/div>
/div>
div class="row">
/div>
/div>
/body>
/html>
到此这篇关于“Bootstrap中怎么设置自适应屏幕，步骤是什么”的文章就介绍到这了，感谢各位的阅读，更多相关Bootstrap中怎么设置自适应屏幕，步骤是什么内容，欢迎关注网络资讯频道，小编将为大家输出更多高质量的实用文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Bootstrap中怎么设置自适应屏幕，步骤是什么
本文地址： https://pptw.com/jishu/654919.html