CSS学习(十五):响应式开发和Bootstrap

1. 响应式开发

1.1 响应式开发原理

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

设备划分 尺寸区间
超小屏幕(手机) < 768px
小屏设备(平板) >= 768px ~ < 992px
中等屏幕(桌面显示器) >= 992px ~ <1200px
宽屏设备(大桌面显示器) >= 1200px

1.2 响应式布局容器

响应式需要一个父级作为容器,来配合子级元素来实现变化效果。

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

平时我们的响应式尺寸划分

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

2. Bootstrap

2.1 Bootstrap 简介

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

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

优点:

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

2.2 Bootstrap 使用

Bootstrap使用四步曲:

  1. 创建文件夹结构
  2. 创建html骨架结构
  3. 引入相关样式文件
  4. 书写内容

html骨架结构:

<!--      要求当前页面使用IE浏览器最高版本的内核来渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--      视口的设置:视口的宽度和设备一致,默认的缩放比例和PC端一致,用户不能自行缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <!-- 解决ie9以下浏览器对html5新增标签的不识别,并导致css不起作用的问题-->
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <!-- 解决ie9以下浏览器对css3 Media Query的不识别-->
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

2.3 布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个.container容器,Bootstrap预先定义好了这个类。

container类

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

container-fluid类

  • 流式布局容器 百分百宽度
  • 占据全部视口(viewport)的容器
  • 适合于单独做移动端开发

2.4 Bootstrap 栅格系统

2.4.1 栅格系统简介

栅格系统是指将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局。

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

Bootstrap 里面container宽度是固定的,但是不同屏幕下,container的宽度不同,我们再把container划分为12等份。

2.4.2 栅格选项参数

栅格系统用于通过一系列的行(row)和列(column)的组合来创建页面布局。

超小屏幕(手机)< 768px 小屏设备(平板)>= 768px 中等屏幕(桌面显示器)>= 992px 宽屏设备(大桌面显示器)>= 1200px
.container最大宽度 自动(100%) 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列数 12 12 12 12
  • 行(row)必须放到container布局容器里面
  • 我们实现列的平均划分,需要给列添加类前缀
  • 列(column)大于12,多余的列所在的元素将被作为一个整体另起一行排列
  • 每一列默认有左右15px的padding
  • 可以同时为一列指定多个设备的类名,以便划分不同份数,例如class="col-md-4 col-sm-6"

2.4.3 列嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。

2.4.4 列偏移

使用.col-md-offset-* 类可以将列向右偏移。这些类实际是通过*选择器为当前元素增加了左侧的边距(margin)。

2.4.5 列排序

通过使用.col-md-push-*.col-md-pull-* 类就可以很容易的改变列(column)的顺序。

push是往右,pull是往左。

2.5 响应式工具

为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示或隐藏内容。

类名 超小屏 小屏 中屏 大屏
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇