您的位置：首页 > Web前端 > BootStrap

前端学习记录21-移动端布局-(响应式布局、Bootstrap框架)

2021-04-12 22:35 696 查看

前端学习记录21-移动端布局-响应式布局、Bootstrap框架

  • bootstrap开发框架(说实话也不叫框架)

  • 响应式布局

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

    在bootstrap中的设备划分
    超小屏幕 <768px
    小平设备 >=768 ~ <992px
    中等屏幕 >=992px ~ <1200px
    宽屏设备 >=1200px

    原理

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

    bootstrap响应式的尺寸划分
    超小屏幕 宽度设为100%
    小屏幕 宽度设为750px
    中等屏幕 宽度设为970px
    大屏幕 宽度设为1170px

    bootstrap开发框架(说实话也不叫框架)

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

    缺点：实际不算框架，算ui库

    bootstrap使用方法

    1.创建文件夹结构
    2.创建html结构
    3.引入相关样式文件
    4.书写内容

    <head>
<meta charset="UTF-8">
要求当前网页使用IE浏览器最高版本的内核来渲染
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel
1ecad
1;"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>
解决ie9以下浏览器对html5新增标签不识别，导致css不起作用的问题
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
解决ie9以下浏览器对css3 media query的不识别
<![endif]-->
<title>Document</title>
</head>

    bootstrap布局容器

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

    1.container类
    响应式布局容器 固定宽度
    大屏 1170px
    中屏 970px
    小屏 750px
    超小屏 100%
    写了这个类 不需要写媒体查询

    注意:这个container有左右内边距15px

    2.container-fluid类
    流式布局容器 百分之百宽度
    占据全部视口的容器
    适合于单独做移动端开发

    这个类还是有左右内边距15px

    bootstrap响应式工具

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

    .hidden-xs 隐藏超小屏 其他可见
.hidden-sm 隐藏小屏 其他可见
.hidden-md 隐藏中屏 其他可见
.hidden-lg 隐藏大屏 其他可见

    与其相反的是 visible 只在某个屏幕显示

    bootstrap栅格系统

    将页面布局划分为等宽的列 然后通过列数的定义来模块化页面布局

    bootstarp提供了一套响应式、移动设备优先的流式栅格系统，
    随着屏幕或视口尺寸的增加，系统会自动分为最多12列

    bootstrap里面container宽度是固定的，但是不同屏幕下，container的宽度不同
    划分为12等份，里面内容也会自适应

    栅格选项参数
    .container最大宽度100%750px970px1170px
    类前缀.col-xs-.col-sm-.col-md-.col-lg-
    列数12
    注意事项 可为同一列指定多个类，从而控制不同屏幕的显示
    每一列有左右15px的padding
    如果孩子份数相加等于12份 孩子能占满整个container的宽度
    如果孩子份数相加小于12份 则占不满整个container的宽度 会有空白的情况
    如果孩子份数相加大于12份 多出来的那个列会另起一行显示
    <div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
</div>
</div>

    bootstrap栅格系统列偏移

    使用

    .col-md-offset-*
    类 可以将列向右偏移
    这些类实际是通过
    *
    选择器为当前元素增加了左侧的边距

    <div class="container">
<div class="row">
<div class="col-md-4">左侧</div>
<div class="col-md-4 col-md-offset-4">右侧</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">中间</div>
</div>
</div>

    bootstrap栅格系统列排序

    使用

    .col-md-push-*
    和
    .col-md-pull-*
    类 可改变列排序

    把右边的盒子pull过来 把左边的盒子push过去

    <div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">左侧</div>
<div class="col-md-7 col-md-offset-1 col-md-pull-5">右侧</div>
</div>
</div>

    bootstrap栅格系统列嵌套

    栅格系统内置的栅格系统内容再次嵌套，简单理解就是一个列再分成若干小份
    可以通过添加一个新的

    .row
    元素和一系列的
    .col-sm-*
    元素到已存在的
    .col-sm-*

    想要外边距需要在 每个盒子中嵌套一个小盒子
    列嵌套最好加一个 

    .row
    这样可以去掉父元素的
    padding
    而且高度自动和父级一样高

    <div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-6">a</div>
<div class="col-md-6">b</div>
</div>
</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
    • 内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航