前端学习（十二）Bootstrap响应式布局

最新推荐文章于 2024-04-20 16:13:23 发布

赏善罚饿

最新推荐文章于 2024-04-20 16:13:23 发布

阅读量8k

点赞数

分类专栏：前端文章标签：前端 bootstrap

本文链接：https://blog.csdn.net/whitefish520/article/details/108090850

版权

响应式布局原理

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

响应式布局需要一个父级作为布局容器，通过媒体查询，改变这个布局容器的大小，根据布局容器的宽度，决定里面的子元素排列方式和大小

常见的布局容器划分情况

设备	宽度	布局容器宽度
手机	width ≤ 768	100%
平板	768 ≤ width ＜992	750px
桌面显示器	992≤ width ＜1200	970px
宽屏桌面显示器	width ≥ 1200	1170px

Bootstrap

概念：bootstrap是最受欢迎的前端框架，基于HTML、CSS和JS，使得web开发更加简单快捷
html骨架

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Template</title>

最低0.47元/天解锁文章

赏善罚饿

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端学习（十二）Bootstrap响应式布局

响应式布局原理使用媒体查询针对不同宽度的设备，进行布局和样式的设置，从而适配不同的设备响应式布局需要一个父级作为布局容器，通过媒体查询，改变这个布局容器的大小，根据布局容器的宽度，决定里面的子元素排列方式和大小常见的布局容器划分情况设备宽度布局容器宽度手机width ≤ 768100%平板768 ≤ width ＜992750px桌面显示器992≤ width ＜1200970px宽屏桌面显示器width ≥ 12001170pxBoot
复制链接

扫一扫