Bootstrap响应式布局简例

jingtianyiyi 2017-09-18 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>自适应</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="./job.css">
</head>
<body>
    <div class="main">

        <div class="inset">
            <!--<div class="social-icons">-->
                <div class="span">
                    <a href="#"><i>用户登录</i>
                </a></div>
                <!--<div class="clear"></div>-->
                <div class="span1">
                    <a href="#"><i>用户注册</i>
                </a></div>
                <!--<div class="clear"></div>-->
            <!--</div>-->
        </div>
    </div>
</body>
</html>
/*body{background-color: #fff;}*/
/*body{background-color: #2d2d2d}*/

html,body,div,span,h2,p,a,img,sub,u,i,menu,form
{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}

.span {
    float:left;
    display: block;
    background:#3B5998;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    border:1px solid #3B5998;
    outline:none;
    width: 49.99%;
}
.span1 {
    float:right;
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    background: #55ACEE;
    outline:none;
    width: 49.99%;
}
.clear{clear:both;}
.inset{
    overflow: hidden;
    text-align: center;
    width: 100%;
    margin: auto;
}
/*----自适应-----*/
@media (max-width:1200px){
    .main {
        width:60%;
        margin: 7em auto 0;
    }
}
@media (max-width:992px){
    .main{
        width: 70%;
        margin: 9em auto 0;
    }
}
@media (max-width:768px){
    .main{
        width:80%;
        margin: 6em auto 0;
    }
    .span,.span1 {
        margin:0 auto;
        text-align:center;
        width: 100%;
        margin-bottom: 15px;
    }
}

换行

jingtianyiyi

jingtianyiyi

相关推荐

响应式布局---2. Bootstrap前端开发框架

Bootstrap来自Twitter,是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的，它简洁灵活，使得web开发更加快捷。-- 要求当前页面使用IE浏览器最高版本的内核来渲染 -->. -- 一定不要忘记引

乔乔 / 0评论 2020-01-06

bootstrap自适应和响应式布局的区别

bootstrap是依赖jquery的，使用时先装上jquery。

乔乔 / 0评论 2019-12-16

bootstrap响应式布局原理

首先通过媒体查询确认container的宽度，每个col-xx-xx都是通过百分比定义的，屏幕尺寸变化了，container就变化了，col自然就变了。Bootstrap的官方解释：Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或

niepxiya / 0评论 2019-12-08

Bootstrap响应式布局简例

<!DOCTYPE html>. <meta name="viewport" content="width=device-width, initial-scale=1">. <!--&l

HLCsweet / 0评论 2017-09-18

Bootstrap响应式布局

它包含一个值，比如 320，表示 320 像素，或者值为 'device-width'，用来告诉浏览器使用原始的分辨率。③initial-scale 属性是视口最初的比例。当设置为 1.0 时，将呈现设备的原始宽度。如果代码需要被显示为一个独立的块元素或者

TemplarAssassin / 0评论 2017-09-16

Bootstrap

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师MarkOtto和JacobThornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0。Bootstrap是最受欢迎的HTM

bingkingboy / 0评论 2016-03-24

bootstrap：响应式布局layout

xs：extra small 特别窄屏幕，默认指浏览器像素宽度小于768pxsm：small 窄屏幕，默认指浏览器像素宽度大于等于768pxmd：middle 中等宽度屏幕，默认值指浏览器像素宽度大于等于992pxlg：large 大屏幕，默认值指浏览器像

乔乔 / 0评论 2016-11-03

bootstrap源码分析系列：二，栅格和响应式布局

bootstrap把response单独分开作为一个独立模块这样整个栅格系统实际上分为了栅格grid和响应式布局response。非响应式的栅格是940固定宽度的，并且分为固定和流式两种，响应式布局就是通过media query增加了对不同屏幕宽度的适应。

乔乔 / 0评论 2015-06-13

bootstrap响应式布局

我们可以把max-width:767px换成min-width:767px;效果正好相反，当窗口的宽度小于767像素的时候，背景颜色是黑色，大于等于767像素的时候背景颜色是红色。

乔乔 / 0评论 2014-05-03

Bootstrap 网格系统布局

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。在平面设计中，网格是一种由一系列用于组织内容的相交的直线组成的结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用 HTML 和

niepxiya / 0评论 2019-06-21

Bootstrap布局之栅格系统学习笔记

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。这样命名就体现了这几种class适应的屏幕宽度不同。下

zh000 / 0评论 2017-05-04

Bootstrap 网格系统布局详解

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。在平面设计中，网格是一种由一系列用于组织内容的相交的直线组成的结构。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于

iChangebaobao / 0评论 2019-05-09

Bootstrap禁用响应式布局的实现方法

在Bootstrap中极其重要的一个技术内容便是响应式布局了，一次编码针对不同设备终端的强大能力使得响应式技术愈发流行。不过正所谓“萝卜青菜各有所爱”，如果你想要使用Bootstrap开发自己的项目却又恰巧不太喜欢响应式布局，那么你可以通过以下方式禁用响应

相信未来 / 0评论 2017-03-09

bootstrap学习使用（导航条、下拉菜单、轮播、栅格布局等）

BootStrap学习从现在开始，前端开发框架Bootstrap，可大大简化网站开发过程，从而深受广大开发者的喜欢。-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and med

zh000 / 0评论 2016-12-01

Bootstrap基本布局实现方法详解

看到了一篇 20 分钟打造 Bootstrap 站点的文章，内容有点老，重新使用 Bootstrap3 实现一下，将涉及的内容也尽可能详细说明。

相信未来 / 0评论 2016-11-25

Bootstrap布局之栅格系统详解

前些天学习了bootstrap,把其中的栅格系统整理出来，如有错误，欢迎指正。概要，栅格系统针对pc,pad,移动端开发出响应式web页面，根据不同屏幕分辨率有针对不同的解决方法。(0.1, 屏幕设备尺寸大于1200px 选择col-lg(0.2. 屏幕设

乔乔 / 0评论 2016-06-13

Bootstrap页面布局基础知识全面解析

Bootstrap作为支持响应式布局的一个前端插件，确实发挥着重要的作用，无论你是在手机，平板还是ＰＣ上浏览网页，都能达到不错的效果，这一切一切，都是bootstrap带给我们的！Bootstrap的布局是一种栅格系统，即它由行和列组成，在使用时需要为页面

相信未来 / 0评论 2016-06-13

Bootstrap布局方式详解

Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备开始，然后扩展到大屏幕设备上的组件和网格。响应式网格系统随着屏幕或视口尺寸的增加，系统会自动分为最多12列。Bootstrap 中的媒体查询允许您基于视口大小移动、

hllinc / 0评论 2016-05-27

谈一谈bootstrap响应式布局

随着移动端的用户越来越多，传统的web系统架构无法兼容很多移动终端的正常使用。在工作中也会发现，现在很多的客户都有在手机、平板等移动终端上使用管理系统的需求。如果单独为每一个终端开发相应的响应网页，这必定增加项目的成本和开发人员的压力。这时候了解响应式布局

Chinahdy / 0评论 2016-05-23

Bootstrap每天必学之栅格系统（布局）

它就是通过一系列的行与列的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：。Bootstrap框架中的网格系统就是将容器平分成12份。

soulis / 0评论 2015-11-25