Bootstrap响应式布局需要知道些什么

最新推荐文章于 2024-03-10 09:15:00 发布

X可乐

最新推荐文章于 2024-03-10 09:15:00 发布

阅读量198

点赞数

文章标签： bootstrap

本文链接：https://blog.csdn.net/CS_DGD/article/details/109584048

版权

响应式开发原理

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

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

响应式布局容器

响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，在改变里面的子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

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

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

Bootstrap简介

Bootstrap来自推特，是目前最受欢迎的前端框架，Bootstrap是基于HTML、CSS和JS的，简洁灵活，是的web开发更加便捷

中文官网：http://www.bootcss.com/
官网：http://getbootstrap.com/

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

Bootstrap优点

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

Bootstrap版本

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

Bootstrap使用

在现阶段我们还没有接触JS相关课程，所以我们只考虑使用它的样式库
控制权在框架本身，使用者要按照框架所规定的某种规范进行开发
Bootstrap使用四部曲：

创建文件夹结构
创建HTML骨架结构

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

引入相关样式文件
书写内容

Bootstrap布局容器

Bootrap需要为页面内容和栅格系统包裹一个.container容器，他提供了两个做此用处的类

container类
- 响应式布局的容器固定宽度
- 大屏（>=1200px）宽度固定为1170px
- 中屏（>=992px）宽度固定为970px
- 小屏（>=768px）宽度固定为750px
- 超小屏（100%）
container-fluid类
- 流式布局容器百分百宽度
- 占据全部视口（viewport）的容器
- 适合于制作移动端页面开发

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
  <![endif]-->
  <style>
    
  </style>
</head>
<body>
  <div class="container">123</div>
  <div class="container-fluid">123</div>
</body>
</html>