移动端（六）响应式布局与Bootstrap

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

我在人间贩卖青春

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

阅读量150

点赞数 2

分类专栏： CSS(3) 文章标签： bootstrap 响应式布局

本文链接：https://blog.csdn.net/weixin_44178305/article/details/120639520

版权

CSS(3) 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文深入探讨响应式网页设计原理，利用媒体查询适应不同设备屏幕。讲解了Bootstrap框架，包括其栅格系统、响应式工具和常用类，如何实现灵活的网页布局，并提供了实例代码展示。此外，还介绍了Bootstrap的列嵌套、列偏移等功能，帮助开发者快速构建响应式网站。

摘要由CSDN通过智能技术生成

响应式开发原理

简单来说，就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果
在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化

   * {
        margin: 0;
        padding: 0;
    }
    
    ul {
        list-style: none;
    }
    
    .container {
        width: 750px;
        margin: 0 auto;
    }
    
    .container ul li {
        float: left;
        width: 93.75px;
        height: 30px;
        background-color: green;
    }
    
    @media screen and (max-width: 767px) {
        .container {
            width: 100%;
        }
        .container ul li {
            width: 33.33%;
        }
    }

<div class="container">
    <ul>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
    </ul>
</div>

Bootstrap 框架

中文官网：http://www.bootcss.com/
Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷
- 标准化的html+css编码规范
- 提供了一套简洁、直观、强悍的组件
- 有自己的生态圈，不断的更新迭代
- 让开发更简单，提高了开发的效率

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，内容就可以放入这些创建好的布局中。
按照不同屏幕划分为1~12 等份
行（row）可以去除父容器作用15px的边距
xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
每一列默认有左右15像素的 padding
可以同时为一列指定多个设备的类名，以便划分不同份数例如 class=“col-md-4 col-sm-6”

列嵌套

<div class="col-sm-4">
 	<div class="row">
 		<div class="col-sm-6">小列</div>
 		<div class="col-sm-6">小列</div>
 	</div>
</div>

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移

 <div class="row">
	 <div class="col-lg-4">1</div>
 	<div class="col-lg-4 col-lg-offset-4">2</div>
 </div>

响应式工具

使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

<!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">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap 的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row div {
            height: 300px;
            background-color: purple;
        }
        .row div:nth-child(3) {
            background-color: pink;
        }
        span {
            font-size: 50px;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <span class="visible-lg">我会在一定的width下显示/span>
            </div>
            <div class="col-xs-3">2</div>
            <div class="col-xs-3 hidden-md hidden-xs">我也会在一定的width下显示</div>
            <div class="col-xs-3">4</div>
        </div>
    </div>
</body>
</html>

我在人间贩卖青春

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
移动端（六）响应式布局与Bootstrap

响应式开发原理简单来说，就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化 * { margin: 0; padding: 0; } ul { list-style: none; }
复制链接

扫一扫

专栏目录