精华内容
下载资源
问答
  • 前面说了Bootstrap4的下载和简单使用,现在我们接着往下学习,Bootstrap4响应式布局主要依靠栅格系统来实现的。面老K先来讲解一下Bootstrap4的栅格系统,让你能够更快的了解Bootstrap4.(PS:更详细的介绍请访问原K...

    前面说了Bootstrap4的下载和简单使用,现在我们接着往下学习,Bootstrap4的响应式布局主要依靠栅格系统来实现的。面老K先来讲解一下Bootstrap4的栅格系统,让你能够更快的了解Bootstrap4.(PS:更详细的介绍请访问原K先生的博客)

    Bootstrap4栅格系统

    栅格系统是基于一个12列、有5种响应尺寸(对应不同的屏幕)的布局。Bootstrap4栅格系统共有五个类:

    .col- 针对所有设备

    .col-sm- 平板 - 屏幕宽度等于或大于 576px

    .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)

    .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)

    .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

    这些类的意思通俗点说就是,当你同时使用这些类的时候,它会根据你的屏幕大小来使相应的类生效。

    下面我们再来看一下,这些类是怎么使用的

    这个div中放置轮播图片,并且它占9列

    展开全文
  • 前面说了Bootstrap4的下载和简单使用,现在我们接着往下学习,Bootstrap4响应式布局主要依靠栅格系统来实现的。面老K先来讲解一下Bootstrap4的栅格系统,让你能够更快的了解Boo...

    前面说了Bootstrap4的下载和简单使用,现在我们接着往下学习,Bootstrap4的响应式布局主要依靠栅格系统来实现的。面老K先来讲解一下Bootstrap4的栅格系统,让你能够更快的了解Bootstrap4.(PS:更详细的介绍请访问原K先生的博客

    Bootstrap4栅格系统

    栅格系统是基于一个12列、有5种响应尺寸(对应不同的屏幕)的布局。Bootstrap4栅格系统共有五个类:

    .col- 针对所有设备 

    .col-sm- 平板 - 屏幕宽度等于或大于 576px

    .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)

    .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)

    .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

    这些类的意思通俗点说就是,当你同时使用这些类的时候,它会根据你的屏幕大小来使相应的类生效。

    下面我们再来看一下,这些类是怎么使用的 

    <div class="row">
        <div class="col-9">这个div中放置轮播图片,并且它占9列</div>
        <div class="col-3">这个div中放置排行榜,并且它占3列</div>
    </div>

    我们需要把col类放到row类下,并且同一行中的数字相加为12,也就是上面代码中的col类,下面是大致效果图

    最后在补充一点,栅格系统必须放在container容器类下,也就是说上面的代码外面还要再嵌套一层<div>,就是

    <div class="container"></div>

    接下来我们来看Bootstrap4栅格系统另一种使用方法:  

    下面这也是用栅格系统做的响应式布局,这是屏幕分辨率符合.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)时的布局情况  

    下面是屏幕分辨率符合.col-sm- 平板 - 屏幕宽度等于或大于 576px时的布局。这时我们可以看到电影列表从一行6个变为了一行4个,也就是说它根据屏幕大小自动排列变化了这就是响应式。 

    下面我们看一下大致的布局代码

    <div class="container">
      <div class="row">
        <div class="col-md-2 col-sm-3">这个div中放置要显示的各个电影
        </div>
      </div>
    </div>

    相信大家都能从这简单的代码中抓到重点。没错那就是col-md-2和col-sm-3类,我们前面说过栅格系统分为12列,也就是说一行会有12列,col-md-2的意思时每个电影图占据2个列,也就是说要满足一行12列,就需要一行出现6个电影图,如上图确实是出现了六个电影图;col-sm-3类同理,4个电影图,3*4=12。 好了,栅格系统暂时先介绍到这了,有什么不懂的可以给老K留言哦。


    更多专业前端知识,请上【猿2048】www.mk2048.com
    展开全文
  • bootstrap的v3版本中,已经将各种媒介分为4种像素宽度类型: xs:extra small 特别窄屏幕,默认指浏览器像素宽度小于768px sm:small 窄屏幕,默认指浏览器像素宽度大于等于768px md:middle 中等宽度...

    1、像素宽度分类

    在bootstrap的v3版本中,已经将各种媒介分为4种像素宽度类型:

    • xs:extra small 特别窄屏幕,默认指浏览器像素宽度小于768px
    • sm:small 窄屏幕,默认指浏览器像素宽度大于等于768px
    • md:middle 中等宽度屏幕,默认值指浏览器像素宽度大于等于992px
    • lg:large 大屏幕,默认值指浏览器像素宽度大于等于1200px

    这四种屏幕宽度对应的尺寸缩写死记硬背记住,对布局来说非常的重要。

    2、布局栅格化

    和v2一样,bootstrap将内容区域分为了12等分,平均每一等分都有相等的间距,左右无外边距。一个栅格宽度为栅格单位宽度,一个栅格的外边距为栅格的单位外边距。栅格的宽度和边距都是百分比计算,使之能够自适应各种宽度。栅格的class为col-*,栅格的外包class为row。每一个行可以有多个列组成的多行栅格,每一个行在形象意义上称为版块(模块、区域),是一个相对独立的部分。但一行有且只能一个行出现,不能出现多个。

    结合屏幕宽度分别有:

    • xscol-xs-1 ~ col-xs-12,多列始终在一行内。
    • sm:col-sm-1 ~ col-sm-12,多列在浏览器像素宽度大于等于768px时才在一行内。
    • md:col-md-1 ~ col-md-12,多列在浏览器像素宽度大于等于992px时才在一行内。
    • lg:col-lg-1 ~ col-lg-12,多列在浏览器像素宽度大于等于1200px时才在一行内。

    例1:http://demo.qianduanblog.com/3150/1.html

    1. <divclass="row">
    2. <divclass="col-xs-4"></div>
    3. <divclass="col-xs-4"></div>
    4. <divclass="col-xs-4"></div>
    5. </div>

    如上,xs宽度下,同行多列始终在一行内:

    例2:http://demo.qianduanblog.com/3150/2.html

    1. <divclass="row">
    2. <divclass="col-sm-4"></div>
    3. <divclass="col-sm-4"></div>
    4. <divclass="col-sm-4"></div>
    5. </div>

    如预期的一样,在大于等于768px的时候,多列是水平排列的,否则是垂直排列的:

    对于md、lg和sm是同理的,惟独xs特殊。

    在处理不同像素宽度的时候,大宽度的适配优先于窄宽度(即ls>md>sm>xs)。

    例3:http://demo.qianduanblog.com/3150/3.html

    1. <divclass="row">
    2. <divclass="col-sm-4 col-md-1"></div>
    3. <divclass="col-sm-4 col-md-10"></div>
    4. <divclass="col-sm-4 col-md-1"></div>
    5. </div>

    如上,md的优先级就高于sm,即:

    • 在大于等于992px(md)的时候(即使此时也是大于等于768px(sm)的),该行多列是水平方向1:10:1栅格宽度排列的;
    • 在小于992px并且大于等于768px的时候,该行多列遵循sm规则,在水平方向4:4:4栅格宽度排列;
    • 在小于768px的时候,该行多列呈垂直方向排列(即水平方向12:12:12)。

    如下图:

    简要说明:

    1. // 遵循md规则
    2. if( width >=992)1:10:1
    3. // 遵循sm规则
    4. elseif( width <992&& width >=768)4:4:4
    5. // 普通规则
    6. else12:12:12

    例4:http://demo.qianduanblog.com/3150/4.html

    1. <divclass="row">
    2. <divclass="col-xs-4 col-sm-1 col-md-1 col-lg-5"></div>
    3. <divclass="col-xs-4 col-sm-3 col-md-10 col-lg-2"></div>
    4. <divclass="col-xs-4 col-sm-8 col-md-1 col-lg-5"></div>
    5. </div>

    如上,sm的优先级大于xs,md的优先级就高于xs,而lg的优先级又高于md,即:

    • 在大于等于1200px的时候,呈水平5:2:2单位栅格宽度排列;
    • 在大于等于992px并且小于1200px的时候,呈水平1:10:1单位栅格宽度排列;
    • 在大于等于768px并且小于992px的时候,呈水平1:3:8单位栅格宽度排列;
    • 其余遵守xs规则,呈水平4:4:4单位栅格宽度排列。

    如下图:

    简要说明:

    // 遵循lg规则
    if( width >= 1200 ) 5:2:2
    // 遵循md规则
    else if( width < 1200 && width >= 992 ) 1:10:1
    // 遵循sm规则
    else if( width < 992 && width >= 768 ) 1:3:8
    // 遵循xs规则
    else 4:4:4

    3、栅格偏移

    理解了栅格化,那么栅格偏移也相对容易理解了。v3的偏移分别有以下几种:

    • offset:左外边距(margin-left);
    • pull:右位移(right);
    • push:左位移(left)。

    其中offset使用的频率最高。不同的列宽度对应的外边距是不同的,所以每一种类型偏移都有四种,以offset为例(以下皆以offset为例):

    • xs:col-xs-offset-0 ~ col-xs-offset-12
    • sm:col-sm-offset-0 ~ col-sm-offset-12
    • md:col-md-offset-0 ~ col-md-offset-12
    • lg:col-lg-offset-0 ~ col-lg-offset-12

    例5:http://demo.qianduanblog.com/3150/5.html

    1. <divclass="row">
    2. <divclass="col-xs-4"></div>
    3. <divclass="col-xs-4 col-xs-offset-4"></div>
    4. </div>

    结果如图:

    例6:http://demo.qianduanblog.com/3150/6.html

    1. <divclass="row">
    2. <divclass="
    3. col-xs-4
    4. col-sm-1
    5. col-md-10
    6. col-lg-6
    7. "></div>
    8. <divclass="
    9. col-xs-4 col-xs-offset-4
    10. col-sm-1 col-sm-offset-10
    11. col-md-1 col-md-offset-1
    12. col-lg-1 col-lg-offset-5
    13. "></div>
    14. </div>

    结果如图:

    另外push和pull主要用来调整列顺序的,比如视图情况需要内容区域在右边,侧边栏在左边,但源代码则必须内容在左边,侧边栏在右边,内容的代码在前面,对SEO据说有一点的好处。

    例7:http://demo.qianduanblog.com/3150/7.html

    1. <divclass="row">
    2. <divclass="col-md-9 col-md-push-3">
    3. 源代码左边,但视图在右边
    4. </div>
    5. <divclass="col-md-3 col-md-pull-9">
    6. 源代码右边,但视图在右边
    7. </div>
    8. </div>

    4、布局实例

    例8,经典的左侧边栏+右内容栏:http://demo.qianduanblog.com/3150/8.html

    例9,经典的单内容栏:http://demo.qianduanblog.com/3150/9.html

    5、参考资料

    bootstrap栅格系统:http://getbootstrap.com/css/#grid

    展开全文
  • bootstrap响应式布局

    2020-03-19 10:26:02
    4. bootstrap伸缩布局并居中:`d-flex justify-content-center align-items-center` 5. `jQuery.data(element,[key],[value])`:在元素上存放数据,返回jQuery对象。 例如:在index界面中 ```javascript ...
  • Bootstrap 响应式布局

    2020-05-20 20:37:45
    了解过媒体查询后,就可以进行响应式布局了 如果不希望在屏幕变小时上所有列都堆在一起。那就可以使用针对小屏幕所定义的类 <div class="container"> <div class="row"> <div class="col-md-4 ...

    了解过媒体查询后,就可以进行响应式布局了

    如果不希望在屏幕变小时上所有列都堆在一起。那就可以使用针对小屏幕所定义的类

        <div class="container">
            <div class="row">
                <div class="col-md-4 bg-primary col-xs-6">1</div>
                <div class="col-md-4 bg-warning col-xs-6">1</div>
                <div class="col-md-4 bg-danger col-xs-6">1</div>
            </div><br>
    
            <div class="row">
                <div class="col-md-4 bg-danger">2</div>
                <div class="col-md-4 bg-primary">2</div>
                <div class="col-md-4 bg-warning">2</div>
            </div>
        </div>

     

    展开全文
  • bootstrap响应式布局特点以及解析

    万次阅读 2018-03-21 17:01:54
    一、bootstrap介绍当提到响应式布局,我们脑子里会出现bootstrap的概念,它有哪些特点呢? (1)响应式(@media媒体布局) (2)移动设备优先(meta name="viewport" content="width=device-width,...
  • TenNews – Bootstrap News Agency Template是一个现代,干净,有创意的新闻模板。...最新的Bootstrap 4 Sass Powered Font Awesome Icons Google字体使用 干净,现代,美观的设计 Ajax支持的表单 超级容易定制
  • 收集依赖5 观察者 Watcher前言:现在前端面试Vue中都会问到响应式原理以及如何实现的,如果你还只是简单回答通过Object.defineProperty()来劫持属性可能已经不够了vue响应式原理学习(1)一句话总结:通过Obje...
  • 响应式布局__Bootstrap
  • bootstrap4响应式轮播图详解

    千次阅读 2018-06-19 21:26:24
    在开发过程中,既要采用框架,又要使用响应式布局。而bootstrap正好帮我们解决了这个问题。采用bootstrap框架快速开发,达到快速开发响应式轮播图的目的。1.引入bootstrap框架 引入方式有两种:&lt;link rel=&...
  • 12、Bootstrap响应式布局 这节课我们完成对博客列表页的修改 想要实现的效果如图 响应式布局:根据屏幕的大小自动地控制调整页面布局 在www.bootcss.com页面的“全局CSS样式”——“栅格系统”、“栅格参数”: ...
  • 从头开始创建的新WordPress主题的草稿,使用Bootstrap 4响应式布局开始您的项目。 • 特征 自定义标题 特色图片 一栏 两列 React灵敏 兼容Bootstrap 4 主题安装 Download or clone the theme folder and copy to ...
  • 响应式布局 参照了 Bootstrap 的 响应式设计,预设了五个响应尺寸:xs、sm、md、lg 和 xl。 <el-row :gutter="10"> <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-...
  • Bootstrap4响应式动态选项卡(卡片效果)详解先看效果图。卡片会随着屏幕的缩放的缩放而缩放。1.逻辑详解。利用Bootstrap4网格系统与弹性盒子布局来实现效果。比较重要的一点是:在响应式网站中,我们可能需要某些...
  • 响应式布局+Bootstrap

    2020-12-19 10:00:42
    2.响应式布局容器 ** 3.Bootstrap简介 https://bootstrap.css88.com/ 4.Bootstrap使用 控制权在框架本身,使用者要按照框架所规定的某种规范进行开发 Bootstrap使用四部曲:1.创建文件夹结构 2.创建...
  • col开头的所有的类,都是⽤来进⾏栅格系统的布局的。 col-屏幕宽度代号-列数 比如说 col-md-4 表示在md屏幕尺寸下,此元素占4列,1/3 col-xs-6 表示在xs屏幕尺寸下,此元素占6列,1/2 在col-的类中,有如下...
  • BOOTSTRAP 4响应式布局中图片自动缩放用img-fluid,图片居中用d-block mx-auto 如下面形式, <img alt="" src=...
  • 使用Scss敲一个响应式网格布局bootstarp 许多人都用过,是一个非常丰富的框架,那么,现在闲来无事,模仿 bootstrap 敲一个简单的响应式布局框架。1. 确定响应确立需要响应的屏幕设备宽度,仿 bootstrap 设计 超小...
  • 1、 2、媒体查询布局容器 从小写到大 3、 4bootstrap预定义类container 3、 4、 左边距为4 5、 左推右拉 6、
  • 分享一套优质、精美的Bootstrap 4响应式Web应用程序后台管理系统模板,此模板集成了Bootstrap 4,HTML 5、CSS3以及jQuery等现代流行的前端开发框架和技术。此模板是一套功能强大并且灵活的后台管理系统模板,非常...
  • 原文 网页布局方式 1、固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页。 ...2、流式布局:为网页设置一个相对的...4响应式布局:通过检测设备信息,决定网页布局方式,即用户...
  • 响应式布局的原理 页面源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>responsive</title> <link rel="stylesheet" type=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 457
精华内容 182
关键字:

bootstrap4响应式布局