响应式开发

bootstrap前端开发框架

bootstrap栅格化系统

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

响应式开发
bootstrap前端开发框架
bootstrap栅格化系统
前言
一、响应式开发
- 响应式开发原理
二、Bootstrap前端开发框架

前言

提示：这里可以添加本文要记录的大概内容：

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

一、响应式开发

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

响应式开发原理

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

常见的响应式尺寸划分
超小屏幕（手机，小于780px）设置宽度为100%
小屏幕（平板 大于等于780px）设置宽度为750px
中等屏幕（桌面显示器 大于等于992px）宽度设置970px
大屏幕（大桌面显示 大于等于1200px） 宽度设置为1170px
  布局容器 宽度的大小 通过媒体布局改变

响应式标题栏做法

 - 当屏幕大于等于768px,我们给每个容器container宽度为750px
 - container里面包含8个li盒子，每个盒子的宽度大小定为93.75px(750/8),高度为30px，浮动一行显示
 - 当我们屏幕缩放时，宽度小于768px的时候，container盒子宽度修改为100%宽度
 - 此时里面的8个li,修改为宽度33.33%,这样一行就只能显示3个li ，剩下行显示

二、Bootstrap前端开发框架

1

优点标准化的html和css编码规范
简洁直观强大的组件
有自己的生态图，不断的迭代
开发简单有效率

代码如下（示例）：

使用步骤

创建文件夹
创建html骨架结构
引入先关样式文件
书写内容

2.布局容器

代码如下（示例）：

bootstrap需要为页面内容和栅格系统包裹一个.container容器，bootstarp预先定义好这个类，叫做.container，它提供了两个作此作用的类

> 1、container类
 - 响应式布局的容器，固定宽度
 - 大屏（>=1200px）宽度定位1170px
 - 中屏（>=992px）宽度定义为970px
 - 小屏 （>=768px）宽度定义为750px
 - 超小屏（100%）
> 2、container-fuild类
     
 - 流式布局容器百分百宽度
 - 占据全部视口（viewport）的容器
 - 适用于单独做移动开发





<font color=#999AAA >该处使用的url网络请求的数据。

<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">

# 3、bootstrap栅格系统

```c
1、栅格系统就是页面划分为等宽的列，然后通过列数来模块化页面布局
2、提供了一些响应式，移动设备优先的流式栅格系统，随着屏幕或者是视口尺寸增加，系统自动划分为12列
3、bootstrap里面的container宽度是固定的，但是不同屏幕下，container的宽度不同，我们再把container划分为12等份
4、栅格系统是通过行和列的组合来创建页面的，内容就可以放入到这些创建好的布局中
5、栅格选项参数
 

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

2.列嵌套

栅格系统内置的栅格系统将内容再次嵌套。就是一个列内再分为若干小列。可以添加一个新的.rowa元素和一系列的.cal-sm-*元素到已经存在的.cal-sm-*元素


 <style>
        .row>div {
            height: 50px;
            background-color: darkcyan;
            /* margin: 0 auto */
            /* 之间有缝隙，不是通过margin值而是盒子嵌套来的 */
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="row">
                    <!-- 列嵌套最好加一个行 row  这样可以取消父级的padding值 
                        而且高度自动和父级一样高-->
                    <div class="col-md-4">a</div>
                    <div class="col-md-8">b</div>
                </div>
            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
    </div>
</body>

在这里插入图片描述

列偏移

1、使用.col-md-offset-*类可以将列表右侧偏移，这些类实际是通过使用*选择器为当前元素增加了左侧的功边距（margin）见下面效果图
2、右侧的盒子向右偏移即可
<div class="container">
        <div class="row">
            <!--  总共12份 左边4份 右边4份 偏移4份  将在一起的分成左右两边
            偏移的份数 是总共12-左右盒子的份数-->
            <div class="col-md-4">左侧</div>
            <div class="col-md-4 col-md-offset-4">右侧</div>
        </div>
        <div class="row">
            <!-- 如果是一个盒子 那么偏移就是(12-8)/2 即在中间垂直对齐 -->
            <div class="col-md-8 col-md-offset-2">中间盒子</div>
        </div>
    </div>

在这里插入图片描述

列排序

通过使用.col-md-push-* 和.col-md-pull-*类就可以实现改变列（column）的顺序
  <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8">左侧</div>
            <div class="col-md-8 col-md-pull-4">右侧</div>
        </div>
    </div>

在这里插入图片描述

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
##响应式工具

为了加快对移动设备友好的页面开发。利用媒体查询功能，并使用这样工具可以方便的针对不同设备展示或者隐藏页面内容
与下图相反的是visible-xs-sm visible-lg 是显示页面内容
 <div class="row">
            <div class="col-xs-3">
                <!--  class visible-lg表示只有在大屏幕下显示 -->
                <span class="visible-lg">你好呀</span>
            </div>
            <div class="col-xs-3">2</div>
            <div class="col-xs-3 hidden-xs">hahhha</div>
            <div class="col-xs-3">4</div>
        </div>

在这里插入图片描述

原文链接：https://blog.csdn.net/weixin_46513544/article/details/119853196