响应式开发

1. 响应式开发原理

1.1 响应式开发原理

使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

  • 小于768 px：超小屏幕（手机）
  • 768~992 px：小屏设备（平板）
  • 992~1200 px：中等屏幕（桌面显示器）
  • 大于1200 px：宽屏设备（大桌面显示器）

1.2 响应式布局容器

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果

原理：在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下看到不同的页面布局和样式变化

父容器版心的尺寸划分：

  • 超小屏幕（手机，小于 768px）：设置宽度为 100%
  • 小屏幕（平板，大于等于 768px）：设置宽度为 750px
  • 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
  • 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

注意：也可以根据实际情况自定义划分

2. bootstrap的介绍

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

中文网 官网

框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发

2.1 优点

  • 标准化的html+css编码规范
  • 提供了一套简洁、直观、强悍的组件
  • 有自己的生态圈，不断的更新迭代
  • 让开发更简单，提高了开发的效率

2.2 版本简介

2.x.x：停止维护,兼容性好,代码不够简洁，功能不够完善

3.x.x：目前使用最多,稳定,但是放弃了IE6-IE7，对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的WEB 项目

4.x.x：最新版，目前还不是很流行

2.3 基本使用

在现阶段我们还没有接触 JS 相关课程，所以先只考虑使用它的样式库

Bootstrap 使用四步曲：

  1. 创建文件夹结构

    需单独写一个 bootstrap 文件夹放它相关的文件

  2. 创建 html 骨架结构

    <!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    	<!-- 让IE浏览器以最高版本内核运行 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 视口控制标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap使用</title>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

  3. 引入相关样式文件

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">

  4. 书写内容

    直接拿Bootstrap 预先定义好的样式来使用

    修改Bootstrap 原来的样式，注意权重问题

    学好Bootstrap 定义了哪些样式，以及这些样式能实现什么样的效果

2.4 布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 或者.container-fluid 容器

  • .container

    • 响应式布局的容器 固定宽度
    • 大屏 ( >=1200px) 宽度定为 1170px
    • 中屏 ( >=992px) 宽度定为 970px
    • 小屏 ( >=768px) 宽度定为 750px
    • 超小屏 (100%)

  • .container-fluid

    • 流式布局容器 百分百宽度
    • 占据全部视口（viewport）的容器

注意：它们都有 15px 的左右 padding

2.5 栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，将内容放入这些创建好的布局中

超小屏幕 小屏设备 中等屏幕 宽屏设备
.container 最大宽度 自动100% 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
  • 按照不同屏幕划分为 1~12 等份
  • 行（row） 默认去除父容器作用 15px 的左右 padding
  • 列（column）大于 12，多余的列所在的元素将另起一行排列
  • 列（column）小于 12，缺少的列保留份数的位置为空白
  • 每一列默认有左右15像素的 padding
  • 可以使用多类名，以便划分不同份数，例：class="col-md-4 col-sm-6"

2.6 栅格嵌套

将栅格系统里面的一个列再次嵌套若干列，需添加一个新的行元素（.row）再进行栅格系统分列（划分12份）

<!-- 第一层 -->
<div class="row">
	<div class="col-md-6"></div>
    <div class="col-md-6"></div>
		<!-- 第二层列嵌套 -->
		<div class="row">
			<div class="col-md-8">a</div>
			<div class="col-md-4">b</div>
		</div>	
	</div>
</div>

2.7 栅格列偏移

使列盒子居右、居中，给右边的盒子添加空白份数，实际上是栅格系统自动算出为盒子增加了左侧的 magin

语法：.col-md-offset-

<div class="container">
    <!-- 居左居右 -->
    <div class="row">
        <div class="col-md-3">青龙</div>
        <div class="col-md-3 col-md-offset-6">白虎</div>
    </div>
    <!-- 居中 -->
    <div class="row">
        <div class="col-md-8 col-md-offset-2">250</div>
    </div>
</div>

2.8 栅格列排序位移

移动几份的距离就写几

  • 向右位移：.col-md-push-
  • 向左位移：.col-md-pull-
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-push-8">左</div>
        <div class="col-md-8 col-md-pull-4">右</div>
	</div>
</div>

2.9 栅格隐藏与显示

隐藏元素：

  • 大屏：hidden-lg
  • 中屏：hidden-md
  • 小屏：hidden-sm
  • 超小屏 ：hidden-xs

显示元素：visible-不同屏幕

例： <div class="col-xs-3 hidden-xs">我会隐藏</div>（超小屏隐藏这列）

posted @ 2020-06-21 16:53  今夜星河漫漫  阅读(210)  评论(0)    收藏  举报