移动web开发_响应式bootstrap框架布局小记

最新推荐文章于 2024-02-03 15:53:06 发布

R-系度

最新推荐文章于 2024-02-03 15:53:06 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/weixin_52501494/article/details/121918876

版权

笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

移动web开发_bootstrap框架响应式布局

文章目录

移动web开发_bootstrap框架响应式布局
前言
一、响应式布局
二、bootstrap是什么？
二、bootstrap的使用
总结

前言

bootstrap是目前前端开发比较主流的开发框架之一.借助bootstrap框架,我们可以省去一些繁琐的样式书写,在它为我们提供的基础样式上增加我们自己需要的样式,快速的开发出一个简洁美观的网页.本文对基于bootstrap框架的响应式布局的进行简单介绍.

提示：以下是本篇文章正文内容，下面案例可供参考

一、响应式布局

移动端手机端的网页开发可以单独制作网页，设计适应手机屏幕的布局，也可以通过响应式布局来达到手机、平板、PC端等设备访问同一个网页，通过媒体查询来感知屏幕大小，从而改变页面布局和样式。
今天要介绍的bootstrap框架包含了布局容器与栅格系统，能帮助我们快捷的开发出一个响应式布局网页。

二、bootstrap是什么？

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成

中文网站: http://www.bootcss.com/

官网:http://getbootstrap.com/

二、bootstrap的使用

1、创建文件夹结构

在项目demo文件夹下创建以下文件夹，以便开发过程中结构简明有序。
bootstrap文件夹中存放下载后的bootstrap文件
css文件夹里放.less和.css文件
images与upload文件夹存放网页开发所需图片
.html文件
后面根据需求在不同类型文件夹下创建新文件即可
文件夹结构示意图

2.创建HTML骨架结构引入相关样式文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <!-- [if lt IE 9] -->
        <!-- 解决 ie9 以下浏览器对html5新增标签的不识别，并导致css不起作用的问题 -->
        <script src="https://oss.mavcdn.com/html5shiv/3.7.2/html15shiv.min.js"></script>
        <!-- 解决ie9 以下浏览器对css3 Media Query的不识别 -->
        <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">
        <!-- 引入css样式文件 -->
        <link rel="stylesheet" href="css/index.css">
        <title>bootstrap框架响应式开发</title>
        <!-- 网站说明 -->
        <meta name="description"
            content="Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成..." />
        <!-- 关键字 -->
        <meta name="keywords" content="bootstrap-3,响应式开发,栅格系统,布局容器,前端,移动布局">
    
    </head>
<body>
    
</body>
</html>

3、书写内容

布局容器

bootstrap架构的样式已经为我们提前书写好了，我们只需找到自己需要的样式，复制他的类名给需要此样式的容器即可。
Bootstrap 需要为页面内容和栅格系统包裹一个 .container （响应式布局容器）或者.container-fluid （流式布局容器），它提供了两个作此用处的类。

<div class="container-fluid">
        - 流式布局容器 百分百宽度
        - 占据全部视口（viewport）的容器。
    </div>

<div class="container">
        - 响应式布局的容器  固定宽度
        - 大屏 ( >=1200px)  宽度定为 1170px
        - 中屏 ( >=992px)   宽度定为  970px
        - 小屏 ( >=768px)   宽度定为  750px
        - 超小屏  (100%) 
</div>

栅格系统

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”

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

  .visible-xs 超小屏显示  .visible-sm 小屏显示 .visible-md中屏显示 .visible-lg大屏显示

	.hidden-xs超小屏隐藏 .hidden-sm小屏隐藏  .hidden-md中屏隐藏  .hidden-lg大屏隐藏

小案例实现

 <style>
            .box {
                background-color: pink;
            }
            .box_row {
                height: 500px;
                background-color: plum;
            }
            .box .box_row div {
                /* height: 200px; */
                font-size: 20px;
            }
            .box_1 {
                background-color: skyblue;
            }
            .box_2 {
                background-color: yellowgreen;
            }
            .box_3 {
                background-color: tomato;
            }
            .box_4 {
                background-color: #fff;
            }
 </style>
 
<body>
    <!-- 响应式布局容器 -->
    <div class=" box contariner">
        <!-- 一行 最多可分为12列-->
        <div class="box_row row">
            <div class="box_1 col-xs-2 col-sm-8 col-md-6 col-lg-4">
                我是一号蓝色盒子，在超小屏下占2份,在小屏下占8份，在中屏下占6份，在大屏下占4份
            </div>
            <div class="box_2 col-xs-10 col-sm-4 col-md-6 col-lg-8">
                我是二号绿色盒子，在超小屏下占10份,在小屏下占4份，在中屏下占6份，在大屏下占8份
            </div>
            <div class="box_3 hidden-xs hidden-lg ">
                我是三号盒子我在超小屏 大屏下隐藏
            </div>
            <div class="box_4 visible-md">
                我是四号盒子，我只在中屏下显示
            </div>          
            <!-- 所占分数只是在宽度上占的份数，高度可根据实际布局需要指定 -->
        </div>
    </div>
</body>

代码运行效果如下
在这里插入图片描述

总结

bootstrap框架为我们提供了很多基础样式，我们可以在此基础上增添需要的样式。基于bootstrap的响应式布局就是借助其中的栅格系统完成在不同屏幕宽度下的布局，内容的缩放显示可借助媒体查询+rem来实现。

R-系度

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动web开发_响应式bootstrap框架布局小记

移动web开发_bootstrap框架响应式布局文章目录移动web开发_bootstrap框架响应式布局前言一、响应式布局二、bootstrap是什么？二、bootstrap的使用1、创建文件夹结构2.创建HTML骨架结构引入相关样式文件3、书写内容布局容器栅格系统总结前言bootstrap是目前前端开发比较主流的开发框架之一.借助bootstrap框架,我们可以省去一些繁琐的样式书写,在它为我们提供的基础样式上增加我们自己需要的样式,快速的开发出一个简洁美观的网页.本文对bootstrap框
复制链接

扫一扫