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;
}
}

例二对块级元素div

<!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)根元素必须是div 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自适应帝国cms7.5会员中心模板
介绍: 一款采用Bootstrap v3框架开发的自适应帝国cms7.5会员中心模板,红色风格,UTF-8编码的. 网络收集没测试,自行研究,没有完全修改,有部分模板未修改,有能力的同学可以自己完善. ...
Bootstrap自适应居中问题
>一段Bootstrap的自适应的垂直居中登录框代码使用中发现一个问题,当这段代码加上H5的头的时候, <!DOCTYPE html> 垂直居中的效果就消失了. <html& ...
多个按钮触发同一个Bootstrap自适应模态窗口
在项目中可能会面对这样的一个场景: 界面上有多个按钮,我们希望点击这些按钮弹出同一个模态窗口,但希望模态窗口的内容是动态生成的,即,点击每个按钮弹出的模态窗口内容不同. 通常情况下,一个按钮对应一个模 ...
idea开发SSM框架的高校大学学生社团管理网站bootstrap自适应响应式前端(javaweb-php-asp.netC#-j2ee)包含公告管理-社团活动管理-社团申请管理-社团审核-活动报名
目录 0.效果展示 1.概述 2.社团管理网站搭建环境 3.数据表结构 4.后端代码示例 5.前端代码示例 0.效果展示 1.概述高校学生社团是高校学生依据兴趣爱好自愿组成,按照章程自主开展活动的 ...
BootStrap自适应Table表格固定左边第一列
有个页面引用了BootStrap前端框架,这个页面是一个table,要放在手机上浏览.这个table的左侧第一列是要固定的.所谓第一列固定,就是在横向滚动的时候第一列一直显示在最左侧.网上查了下方法, ...
教你从零开始用WebSocket打造一个IM聊天室
之前我们在 IM即时聊天室(一):WebSocket 和 IM即时聊天室(二): Socket.io + Node.js 两篇文章中介绍了搭建一个IM的所需的技术栈和通信原理.那在这篇文章里我们就来详 ...
bootstrapt学习指南_Bootstrap 教程
认识 Bootstrap: 在您学习完本教程后,您即可达到使用 Bootstrap 开发 Web 项目的中等水平.建议您进行Bootstrap实战练习来巩固您刚学到的新知识. 如果您觉得 Bootst ...
wordpress网站防止被别人iframe框架调用的九种方法
今天发现自己的网站被一个使用iframe框架作为搜索引擎的网站调用,自己的域名被加密get附在它的网址后面,网上很多都是js屏蔽,今天找到了最全最完美的解决方案,你如果也遇到了这种情况,不妨参考一下. ...
部分考试题和考试后的感想
感想基本功还是用很多有待于提高的部分,现在的状态就是学了后面的开始遗忘之前的知识了,主要还是平常没有写与之相关的代码了,针对这个问题,列出如下的复习计划 html部分基本没有问题了 css部分对于调 ...

Bootstrap自适应

Bootstrap自适应相关推荐

最新文章

热门文章