-
Bootstrap的响应式布局----自适应手机、平板和电脑PC端
2019-01-18 00:09:41通过响应式布局能使网站在电脑、平板和手机上有更好的阅览体验,屏幕尺寸不一样展示给用户的网页内容也不一样,我们利用媒体查询可以检测到屏幕的尺寸(主要检测宽度),并设置不同的CSS样式,就可以实现响应式的...在移动终端设备起来越多的今天,如果要针对做所有屏幕去适配开发成本太大。通过响应式开发使得一个网站能够兼容多种终端。 通过响应式布局能使网站在电脑、平板和手机上有更好的阅览体验,屏幕尺寸不一样展示给用户的网页内容也不一样,我们利用媒体查询可以检测到屏幕的尺寸(主要检测宽度),并设置不同的CSS样式,就可以实现响应式的布局。
响应式开发的原理:媒体查询
媒体查询,查询到当前屏幕(媒介媒体)的宽度,针对不同的屏幕宽度设置不同的样式来适应不同屏幕。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。简单说,你可以设置 不同屏幕下面的不同的样式,达到适配不同的屏幕的目的。
实现方式:通过查询screen的宽度来指定某个宽度区间的网页布局。
超小屏幕 (移动设备) w<768px
小屏设备 768px-992px 768 <= w <992
中等屏幕 992px-1200px 992 =< w <1200
宽屏设备 1200px以上 w>=1200
CSS 语法:@media mediatype and|not|only (media feature) { CSS-Code; }
值 描述 device-height 定义输出设备的屏幕可见高度 device-width 定义输出设备的屏幕可见宽度 max-device-height 定义输出设备的屏幕可见的最大高度 max-device-width 定义输出设备的屏幕最大可见宽度 min-device-width 定义输出设备的屏幕最小可见宽度 min-device-height 定义输出设备的屏幕的最小可见高度 max-height 定义输出设备中的页面最大可见区域高度 max-width 定义输出设备中的页面最大可见区域宽度 min-height 定义输出设备中的页面最小可见区域高度 min-width 定义输出设备中的页面最小可见区域宽度 简单举例:控制不同屏幕尺寸下的屏幕背景色
<style> .container{ width:1200px; margin: 0 auto; height:1200px; background-color: red; } /*媒体查询:注意and后面空格的添加*/ /*iphone: w < 768px*/ @media screen and (max-width: 768px){ .container{ width:100%; background-color: green; } } /*pad: w >= 768 && w< 992*/ @media screen and (max-width: 992px) and (min-width: 768px) { .container{ width:750px; background-color: blue; } } /*中等屏幕 w >= 992 && w<1200*/ @media screen and (max-width: 1200px) and (min-width: 992px) { .container{ width:970px; background-color: pink; } } </style>
-
Bootstrap响应式布局原理
2017-04-05 11:40:50Bootstrap响应式布局是利用其栅格系统,对于不同的屏幕采用不同的类属性。在开发中可以只写一套代码在手机平板,PC端都能使用,而不用考虑使用媒体查询(针对不同的设备分别写不同的代码)。Bootstrap的官方解释:...Bootstrap响应式布局是利用其栅格系统,对于不同的屏幕采用不同的类属性。在开发中可以只写一套代码在手机平板,PC端都能使用,而不用考虑使用媒体查询(针对不同的设备分别写不同的代码)。Bootstrap的官方解释:Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为做多12列。
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局。栅格系统的工作原理:
1.行(row)必须包含在.container(固定宽度)或.container-fluid(100%宽度)中,以便为其赋予合适的排列(aligment
)和内补(padding)。
2.通过行(row)在水平方向创建一组列(column)。
3.自己内容应当放置于列(column)内,并且,只有列可以作为行(row)的直接子元素。
4.类似.row和.col-xs-4这种预定义的类,可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化布局。
5.通过为列设置padding属性,从而创建列与列之间的间隔(gutter)。通过为.row元素设置负值margin从而抵消为.container元素设置的padding,也就间接为行(row)所包含的列(column)抵消掉了padding。
6.栅格系统的列是通过指定1到12的值来表示其跨越范围。例如三个等宽的列可以使用三个.col-xs-4来创建。
7.如果一行(row)中包含了的列(column)大于12,多余的列所在的元素将作为一个整体另起一行排列。
8.栅格类适用于与屏幕宽度大于或等于分界点大小的设备,并且针对小屏幕覆盖栅格类。
如下图所示为栅格系统在多种屏幕上的应用说明。使用Bootstrap响应式布局
首先需要在head中引入meta标签,添加viewpirt属性,content中宽度等于设备宽度, initial-scale:页面首次被显示可见区域的缩放级别,取值1则页面按实际尺寸显示,无任何缩放;
maximum-scale:允许用户缩放到的最小比例;
user-scalable:用户是否可以手动缩放。代码如下:<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">
下面为使用bootstrap布局的页面(登录表单界面),针对的是手机超小屏幕(iphone5s)和PC屏幕(>=1200px)。col-xs-12:小屏幕占12列大小,col-lg-5:大屏幕占5列大小,col-lg-offset-3:大屏幕缩进3列大小。这是一个比较简单的实例,想要适应其他屏幕如平板可添加col-md-* 属性,大屏手机可添加col-sm-*属性。具体的屏幕使用哪个属性,可参考上面图上的针对不同屏幕Bootstrap栅格系统的不同使用。
<div class="container-fluid login"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-8 col-lg-5 col-lg-offset-3"> <form class="form-horizontal loginForm"> <h3 class="form-signin-heading">用户登录</h3> <div class="form-group"> <label for="email" class="col-sm-2 col-xs-3 control-label">邮箱</label> <div class="col-sm-8 col-xs-8"> <input type="text" class="form-control" name="email" placeholder="请输入邮箱"> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> </div> </div> <div class="form-group"> <label for="password" class="col-sm-2 col-xs-3 control-label">密码</label> <div class="col-sm-8 col-xs-8"> <input type="password" class="form-control" name="password" placeholder="请输入密码"> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-4 col-xs-4 "> <div class="checkbox"> <label> <input type="checkbox">记住我 </label> </div> </div> <div class="col-sm-4 col-xs-4 control-label" > <a href="resetPwd.html" id="forget">忘记密码?</a> </div> </div> <div class="form-group"> <div class="col-sm-12 col-lg-12"> <button type="button" class="btn btn-primary btn-block" id="submit">登录</button> </div> </div> </form> </div> </div>
代码效果图:
PC端:
手机端: -
Bootstrap响应式布局的笔记
2020-03-05 09:04:031.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配...1.2 响应式布局容器 响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。 原理就是在不同屏幕下,通过媒体...1.1 响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。
设备的划分情况:
- 小于768的为超小屏幕(手机)
- 768~992之间的为小屏设备(平板)
- 992~1200的中等屏幕(桌面显示器)
- 大于1200的宽屏设备(大桌面显示器)
1.2 响应式布局容器
响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。
原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。
父容器版心的尺寸划分
- 超小屏幕(手机,小于 768px):设置宽度为 100%
- 小屏幕(平板,大于等于 768px):设置宽度为 750px
- 中等屏幕(桌面显示器,大于等于 992px):宽度设置为 970px
- 大屏幕(大桌面显示器,大于等于 1200px):宽度设置为 1170px
但是我们也可以根据实际情况自己定义划分
2.0 bootstrap的介绍
2.1Bootstrap简介
Bootstrap 来自 Twitter(推特),是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
中文网 官网 推荐网站
框架:顾名思义就是一套架构,它有一套比较完整的网页功能解决方案,而且控制权在框架本身,有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。
2.2 bootstrap优点
- 标准化的html+css编码规范
- 提供了一套简洁、直观、强悍的组件
- 有自己的生态圈,不断的更新迭代
- 让开发更简单,提高了开发的效率
2.3bootstrap基本使用
Bootstrap 使用四步曲:
-
创建文件夹结构
-
创建 html 骨架结构
Bootstrap 101 Template <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好,世界!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
-
引入相关样式文件
-
书写内容
直接拿Bootstrap 预先定义好的样式来使用
修改Bootstrap 原来的样式,注意权重问题
学好Bootstrap 的关键在于知道它定义了哪些样式,以及这些样式能实现什么样的效果
2.4 bootstrap布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 或者.container-fluid 容器,它提供了两个作此用处的类。
.container
- 响应式布局的容器 固定宽度
- 大屏 ( >=1200px) 宽度定为 1170px
- 中屏 ( >=992px) 宽度定为 970px
- 小屏 ( >=768px) 宽度定为 750px
- 超小屏 (100%)
.container-fluid
- 流式布局容器 百分百宽度
- 占据全部视口(viewport)的容器。
2.6 bootstrap栅格系统
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”
栅格嵌套
栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-*
元素内。
<!-- 列嵌套 --> <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-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。
<!-- 列偏移 --> <div class="row"> <div class="col-lg-4">1</div> <div class="col-lg-4 col-lg-offset-4">2</div> </div>
列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。
<!-- 列排序 --> <div class="row"> <div class="col-lg-4 col-lg-push-8">左侧</div> <div class="col-lg-8 col-lg-pull-4">右侧</div> </div>
响应式工具
为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
-
bootstrap 页面分成三列_bootstrap响应式布局
2020-12-14 06:25:52响应式布局是什么?其实就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。简单来说,我们希望网站在移动设备和PC上都能有一个好的呈现效果。当检测到设备不同时,我们可以给出不同的浏览、布局...哈喽,大家好呀,我是滑稽君。响应式布局是什么?其实就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。简单来说,我们希望网站在移动设备和PC上都能有一个好的呈现效果。当检测到设备不同时,我们可以给出不同的浏览、布局方案。
我们可以通过Bootstrap来实现,那么它又是什么呢?Bootstrap基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。
视频讲解:
效果:
如视频演示,在大屏时我们的网页内容会自动放大填充,小屏时会舍弃右侧的博客分类来凸显主体。为了避免导航栏遮挡网页,在小屏时,副导航栏还会自动折叠,并且永远保持在正上方,方便你随时切换不同的页面。在面对不同的浏览情况时,我们的网站都给出了较好的浏览方案。
除此之外我们还对排版做了进一步的优化,替换文字标签、使文章内容居中显示,为内容增加边框。涉及到布局肯定需要一个方法来规定坐标。这样我们才可以在指定的位置放置我们想要的内容。bootstrap采用栅格来划分网页。
它把网页分成12份,你可以决定每个部分各自占多少栏,如上图你可以任意分配,但你要保证它们加起来为12。比如在blog_detail页面,我们规定博客主体占10份,左右各余1,即添加1个偏置量。其中md代表中等屏幕。它对屏幕大小的定义如下。md就是中等屏幕的类前缀。
部分代码:
list页面
{% extends 'base.html' %}{% block title %}我的网站{% endblock %}{% block nav_blog_active %}active{% endblock %}{% load staticfiles %}{% block header_extends %} <link rel="stylesheet" href="{% static 'blog/blog.css' %}">{% endblock %}{# 页面内容 #}{% block content %} <div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-sm-8 col-md-9 col-lg-10"> <div class="panel panel-default"> <div class="panel-heading"> {% block block_list_title %} 博客列表(一共有{{ blogs|length }}篇博客) {% endblock %} div> <div class="panel-body"> {% for blog in blogs %} <div class="blog"> <h3><a href="{% url 'blog_detail' blog.pk %}">{{ blog.title }}a>h3> <p class="blog-info"> <span class="glyphicon glyphicon-tag">span> <a href="{% url 'blogs_with_type' blog.blog_type.pk %}"> {{ blog.blog_type }}a> <span class="glyphicon glyphicon-time">span>{{ blog.created_time|date:"Y-m-d" }} p> <p>{{ blog.content|truncatechars:120 }}p> div> {% empty %} <div class="blog"> <h3>暂无博客,敬请期待h3> div> {% endfor %} div> div> div> <div class="hidden-xs col-sm-4 col-md-3 col-lg-2"> <div class="panel panel-default"> <div class="panel-heading">博客分类div> <div class="panel-body"> <ul class="blog-types"> {% for blog_type in blog_types %} <li><a href="{% url 'blogs_with_type' blog_type.pk %}"> {{ blog_type.type_name }}a>li> {% empty %} <li>暂无分类li> {% endfor %} ul> div> div> div> div> div>{% endblock %}
blog.css
ul.blog-types { list-style-type: none;}div.blog:not(:last-child) { margin-bottom: 2em; padding-bottom: 1em; border-bottom: 1px solid #eee;}div.blog h3 { margin-top: 0.5em;}div.blog p.blog-info { margin-bottom: 0;}ul.blog-info-description { list-style-type: none; margin-bottom: 2em;}ul.blog-info-description li { display: inline-block; margin-right: 2em;}div.blog-content { text-indent: 2em;}--line4 只要不是最后一个元素就赋予格式
base.html
{% load staticfiles %}<html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>{% block title %}{% endblock %}title> <link rel="stylesheet" href="{% static 'base.css' %}"> <link rel="stylesheet" href="{% static 'bootstrap-3.3.7/css/bootstrap.min.css' %}"> <script type="text/javascript" src="{% static 'jquery-1.12.4.min.js' %}">script> <script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}">script> {% block header_extends %}{% endblock %}head><body> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="{% url 'home' %}">个人博客网站 a> <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" > <span class="icon-bar">span> <span class="icon-bar">span> <span class="icon-bar">span> button> div> <div id="navbar-collapse" class="collapse navbar-collapse" > <ul class="nav navbar-nav"> <li class="{% block nav_home_active %}{% endblock %}"> <a href="{% url 'home' %}">首页a> li> <li class="{% block nav_blog_active %}{% endblock %}"> <a href="{% url 'blog_list' %}">博客a> li> ul> div> div> div> {% block content %}{% endblock %}body>html>
仅展示部分源码,更细节的内容我们放在视频中为大家演示,全部源码放百度云啦~
https://pan.baidu.com/s/1tUJ3x9l_Dq1EvmTtMT4GOQ公众号内发送django获取提取码。https://space.bilibili.com/252028233
❂ 滑稽研究所
咳咳,记得看视频,看视频,看视频。
-
vue+bootstrap响应式布局_vue响应式原理学习
2020-12-12 04:17:26实现响应式,我们需要做些什么3.如何侦测数据的变化3.2 Proxy实现4.收集依赖5 观察者 Watcher前言:现在前端面试Vue中都会问到响应式原理以及如何实现的,如果你还只是简单回答通过Object.defineProperty()来劫持属性... -
Bootstrap响应式布局瀑布流
2019-10-08 03:45:56Bootstrap是当下比较热门的web前端开发框架之一,通过引入Bootstrap,你可以很快的给你的项目做一个自适应的页面。 为什么需要Masonry 在某些项目中,我们可能需要展示一些产品、主题或者项目等,通过网格的形式... -
vue+bootstrap响应式布局_bootstrap基础快速入门-8 响应式显示与隐藏
2020-11-19 20:17:06大学生就可以看懂的bootstrap基础实战系列,pre标签里是笔记总结,动手实际操作一下会加强理解。... 本节内容体验响应式,建议实际操作一下。 Title x<768px 768px1200px xs -- extra samll 最小屏 sm -- s... -
李炎辉 bootstrap 响应式布局demo
2018-07-24 22:47:08以前跟着视频做的demo,今天想起来,一顿找,最后还是觉得放在github上好找。 https://github.com/yongchaoo/respLayout -
Bootstrap-响应式
2019-04-28 12:59:281.什么是响应式布局? 简而言之,就是一个网站能够兼容多个终端(pc,平板,手机…)——而不是为每个终端做一个特定的版本 说白了: 开发一套代码,适配不同分辨率的设备(pc,平板,手机…) 2.什么是bootStrap? bs是... -
响应式布局-bootstrap
2019-11-01 10:08:32响应式布局(respond layout)是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端(手机、平板、pc电脑) ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网... -
【5-12】《响应式布局》——响应式布局介绍和版心、BootStrap、使用BootStrap步骤、BootStrap入门基础、...
2020-10-30 16:27:22文章目录响应式布局一、介绍和版心二、BootStrap使用bootstrap做轮播图案例完整代码效果图总结 响应式布局 一、介绍和版心 前面已经简单接触过。响应式布局就是代码随着屏幕大小的改变显示不同。 档位划分: 媒体... -
Bootstrap里container的响应式布局的解释
2018-09-27 16:44:22之前在用bootstrap的时候,发现其中container设置了响应式布局,然后根据逻辑自己敲了一遍. 现在移动端越来越火,基本所有的网页都会根据移动端做一些适配,其中响应式布局,就是适配中关键的一环.其实响应式布局十分... -
响应式布局之BootStrap
2015-03-05 14:08:00响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的... -
前端基础:响应式布局(Bootstrap)
2020-04-18 22:33:35响应式布局:Bootstrap 1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。 设备的划分情况: 小于768的为超小屏幕(手机) 768~992之间的... -
基于Bootstrap3制作响应式布局网站(二)
2015-05-22 13:34:59在上一篇文章中中主要讲到Bootstrap的栅格布局系统,虽然之前说要更新如何写导航栏,但是想了下还是先介绍下如何做CSS的媒体查询和响应式表格,这样才能为以后的的编码打下基础。 原创文章,欢迎转载,请保留出处。 ... -
响应式布局与bootstrap框架
2019-02-21 15:38:00原文 网页布局方式 1、固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页。 ...2、流式布局:为网页设置一个相对的...4、响应式布局:通过检测设备信息,决定网页布局方式,即用户... -
bootstrap_响应式_CSS
2019-05-29 19:38:19响应式布局 1.什么是响应式布局 Responsive web page 响应式/自适应网页 可以根据浏览设备不同(pc,pad,phone) 而自动改变布局,图片文字效果,不会影响用户浏览体验 2.响应式网页必须做下面几件... -
bootstrap之响应式原理
2021-01-12 11:22:11一、响应式所具有的特点、 1、网页的宽度自动调整,例如当我们打开一个网页时,拉动页面使之宽度发生变化,那么展示的内容也会随着宽度的增大缩小而改变一行所容纳的内容多少。 2、尽量少用绝对宽度 3、字体要使用... -
bootstrap 屏幕高度_Bootstrap的响应式原理
2020-12-28 11:37:25响应式是指使网页适应不同尺寸、不同分辨率的设备。响应式所具有的特点1、网页的宽度自动调整。2、尽量少用绝对宽度。3、字体要使用rem、em做为单位。4、布局要使用浮动、弹性布局。响应式界面的四个层次1、同一页面... -
响应式布局及bootstrap(实例)
2015-05-11 09:33:00这几天公司要求网站实现响应式布局,所以对响应式布局进行了相对全面的了解,并做了几个实例。 转载请注明源地址,谢谢^_^,http://www.cnblogs.com/liu-zhen/p/4493679.html 响应式布局介绍 参考:维基... -
响应式布局和BootStrap 全局CSS样式
2017-11-23 12:51:001、什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的。 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 响应... -
bootstrap之响应式开发-栅栏系统
2020-09-23 01:23:24响应式开发原理 就是使用媒体查询针对不同宽度的设备进行样式布局和样式的设置,从而适配不同设备的目的。 设备划分 ...响应式布局容器 响应式需要一个父级做为容器布局,来配合子级元素来实现变化效 -
0083 移动端WEB开发之响应式布局、bootstrap
2019-12-30 15:47:10移动端WEB开发之响应式布局 1. 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。 设备的划分情况: 小于768的为超小屏幕(手机) 768~992... -
移动端WEB开发之响应式布局和bootstrap的介绍
2019-11-05 19:55:12响应式布局容器 响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。 原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同... -
响应式布局值之Bootstrap
2017-08-01 15:48:58就是在网站上兼容多个终端-而不是为每个终端做一个特定的版本,其目的是为用户提供更加舒适的界面和更好的用户体验。 -
Bootstrap学习笔记2--响应式布局与栅格样式
2019-09-26 20:58:28响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 响应式布局可以为不同终端的...
-
微信支付2021系列之扫码支付一学就会java版
-
java中输入只一窜英文字母,输出格式是小写转换大写,大写转化成小写英文字母
-
UnitySocket异步聊天室
-
绿色天然果蔬网页模板
-
PW2320-2.0.pdf
-
Spring(五)SpringIoC之实例化AbstractBeanFactory.getBean()
-
最新版【京东飞天茅台1499抢购】Python 脚本
-
C++ 第69-03篇 技巧:自定义内存管理
-
保龄球中心网页模板
-
北极圣诞节礼物网页模板
-
转行做IT-第7章 数组
-
erlang-23.2.1-1.el7.x86_64.rpm
-
2021-01-22
-
Middleware.zip
-
郊野探索旅游网页模板
-
RabbitMQ消息中间件实战(附讲义和源码)
-
Ajax技术
-
第3章 入门程序、常量、变量
-
2021-01-22
-
转行做IT-第6章 IDEA、方法