响应式布局-bootstrap

最新推荐文章于 2022-04-11 11:03:36 发布

前端Jason

最新推荐文章于 2022-04-11 11:03:36 发布

阅读量417

点赞数

文章标签：响应式布局-bootstrap

本文链接：https://blog.csdn.net/qq_44704740/article/details/102852261

版权

前端同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

css

12 篇文章 0 订阅

订阅专栏

响应式

什么是响应式布局

响应式布局（respond layout）是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端（手机、平板、pc电脑） ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

为什么要有响应式布局？

在移动互联日益成熟的时候，在PC端开发的网页已经无法满足移动设备的要求。
通常的做法是针对移动端单独做一套特定的版本。
如果终端越来越多，那么需要开发的版本就会越来越多（大屏设备的普及）
响应式布局 ：一个网站能够兼容多个终端（节约开发成本）

优点：

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点：

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

响应式开发现状：

如果已经存在PC的网站了，那么一般不会使用响应式开发，而是针对移动端再开发一套系统（比如京东、淘宝）
在新建站点 上采用响应式开发的越来越多。
在国内，响应式开发还不是特别的流行。但响应式开发是大势所趋，会越来越流行。

响应式开发与移动web开发的比较

开发方式	移动web开发+pc开发	响应式开发
引用场景	一般已经有了PC端网站，只需要端独开发移动端网站即可	针对一些新建网站，并且要求适配移动端
开发	针对性强，开发效率高	兼容各种终端，效率低
适配	只能适配移动端或者PC端，pad上体验比较差	可以适配各种终端
效率	代码简介，加载快	代码相对复杂，加载慢

//思考：响应式开发的原理是什么？

媒体查询

媒体查询（Media Query）是CSS3提出来的一个新的属性，通过媒体查询可以查询到screen的宽度，从而指定某个宽度区间的网页布局。

设备分类

分类	宽度范围
大屏设备	>1200px
中屏设备	992px~1200px
小屏设备	768px~992px
超小屏设备	< 768px

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iaLpC5fJ-1572574097764)(D:\ITClass\myself\就业班\day08\1.png)]

媒体查询的使用

需求：

<!--
需求：
    大屏设备(>1200px)   版心：1170px   背景色：红色
    中屏设备(992-1200)  版心：970px    背景色：蓝色
    小屏设备(768-992)   版心：750px    背景色：黄色
    超小屏设备(<768px)  版心：100%     背景色：绿色
-->

响应式开发的原理：使用媒体查询实现不同终端的布局和样式的切换。

媒体查询语法：

/*查询屏幕*/
@media screen and 条件 {
}

/*条件的写法*/
/*min-width:只要屏幕宽度超过这个值的设备样式就能生效*/
/*max-width:只要屏幕宽度小于这个值的设备样式就能生效*/
@media screen and (min-width: 1200px) {
  .container {
    width: 1170px;
    background-color: red;
  }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
  .container {
    width: 970px;
    background-color: blue;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .container {
    width: 750px;
    background-color: yellow;
  }
}

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    background-color: green;
  }
}

注意: 媒体查询仅仅是一个css使用的限制条件,并不会增加css的权重

弊端：现在只有一个div，要做一套响应式布局，就需要如此多的代码，非常的麻烦，因此我们会更多的借助一些响应式的框架，比如bootstrap。

bootstrap框架

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

bootstrap中文网

特点：

组件简洁大方、代码规范精简、界面自定义性强。
Bootstrap是基于HTML5和CSS3开发的, js功能效果依赖于 jQuery( 第三方库, 后面讲解 )。
Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。

优点：

有自己的生态圈，不断的更新迭代
提供了一套简洁、直观、强悍的组件
标准化的HTML+CSS编码规范
让开发更简单，提高了开发效率。
扩展性强，虽然界面组件样式已经定义好了，我们还可以自定义，修改默认样式。

版本：

2.x.x 停止维护
- 优点：兼容性好
- 缺点：代码不够简洁、功能不够完善
3.x.x 目前使用最多
- 优点：稳定，偏向于开发响应式布局，移动设备优先的WEB项目
- 缺点：放弃了IE67，对IE8支持但是界面效果不友好
4.x.x 阶段

基本模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>bootstrap基本模板</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <!--引入bootstrap的核心样式文件-->
  <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    
  <h1>你好，世界！</h1>
    
    
   <!-- 引用JS文件,对于现阶段直接复制即可 -->
  <script src="lib/jquery/jquery-1.12.4.js"></script>
  <script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

全局样式

container容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。默认带了15px的padding值。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

这两种容器类不能互相嵌套。

栅格系统

栅格系统，也叫网格系统

栅格系统： 是BS实现响应式的核心所在 其底层也是媒体查询 

栅格系统： 不管在什么大小的容器里面，都将这个容器分为12份，在不同大小屏幕里面，占的份数不同

最终目的: 在任何大小的屏幕上 都有较好的浏览体验

// 假设我现在有12个盒子

如果是大屏幕设备, 每行放 6 个 div,   
如果是中屏设备,   每行放 4 个 div,   
如果是小屏设备,   每行放 3 个 div,   
如果是超小屏设备, 每行放 2 个 div,  

大屏    6个div  两    12份  一个div占2份 放6个     大屏上:  16.666% 浮动    
中屏    4个div  三    12份  一个div占3份 放4个     中屏上:  25%   浮动
小屏    3个div  四    12份  一个div占4份 放3个     小屏上:  33.33% 浮动
超小屏  2个div  六    12份  一个div占6份 放2个     超小屏:  50%  浮动

.row用于抵消.container容器的15px的padding值
可以在.row中嵌套column

栅格系统常用类（总共12列）

类名	例子	解释
.col-xs-xx	.col-xs-6	在超小屏幕（及以上）生效
.col-sm-xx	.col-sm-6	在小屏幕（及以上）生效
.col-md-xx	.col-md-6	在中屏幕（及以上）生效
.col-lg-xx	.col-lg-3	在大屏幕及生效，占1/4
.col-lg-xx	.col-lg-4	在大屏幕及生效，占1/3
.col-lg-xx	.col-lg-5	在大屏幕及生效，占1/2

【案例：响应式栅格系统】

<!--
  需求: 6个盒子
    1. 大屏幕一行3个
    2. 中屏幕一行3个
    3. 小屏幕一行2个
    4. 超小屏幕一行1个
-->

【案例：列嵌套.html】

<div class="col-lg-4">
      <!--栅格系统无处不在，只要父盒子有宽度，就可以使用栅格系统-->
      <div class="row">
        <div class="col-lg-6"></div>
        <div class="col-lg-6"></div>
      </div>
    </div>

【案例：列偏移.html】

<!-- 使用 .col-md-offset-* 类可以将列向右侧偏移。-->
<div class="row">
  <div class="col-lg-3"></div>
  <!--col-lg-offset-3:在大屏下，这个div将向右侧偏移3个单位-->
  <div class="col-lg-6 col-lg-offset-3"></div>
</div>

响应式工具

//1. 大屏显示
//2. 中屏不显示
//3. 小屏显示
//4. 超小屏不显示

推荐使用hidden相关的属性

前端Jason

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
响应式布局-bootstrap

响应式什么是响应式布局响应式布局（respond layout）是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端（手机、平板、pc电脑） ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。为什么要有响应式布局？在移动互联日益成熟的时候，在PC端开发的网页已经无法满足移动设备的要求。通常的做法是针对移动...
复制链接

扫一扫