精华内容
下载资源
问答
  • 前端响应式开发介绍响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够,缺点就是CSS比较重。如果pc端和移动端内容非常多...

    前端响应式开发

    介绍

    响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够,缺点就是CSS比较重。

    如果pc端和移动端内容非常多的话,还是强烈建议pc和移动端各开发一套,这样后期维护起来更加方便。

    响应式布局的实现方案

    • css3媒体查询(@media screen)

    • 百分比布局(流式布局)   div {  width:20%; }   .box {   border-radius: 50%;  }

    • vh/vw     div {  width: 50vw }

    css3媒体查询

    CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式,当重置浏览器窗口大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

    body {    // 默认蓝色    background-color: blue;}/* 当屏幕分辨率大于768像素时,应用下面的样式 */@media screen and (min-width: 768px) {    body {      background-color: green;    }}/* 当屏幕分辨率大于900像素时,应用下面的样式 */@media screen and (min-width: 900px) {    body {      background-color: yellow;    }}/* 当屏幕分辨率大于1024像素时,应用下面的样式 */@media screen and (min-width: 1024px) {    body {      background-color: skyblue;    }}

    常用的两个属性:

    • min-width:最小宽度

    • max-width:最大宽度

    /* 当屏幕分辨率大于900小于1200像素时,应用下面的样式 */@media screen and (min-width: 900px) and (max-width: 1200px){    .a{        color: purple;        font-size: 26px;    }}

    如何确定媒体查询的分割点也是一个开发中会遇到的问题,下面是市场上的移动设备和电脑屏幕分辨率的分布情况,可以发现不同品牌和型号的设备屏幕分辨率一般都不一样 。

    如果我们选择600px,900px,1200px,1800px作为分割点,可以适配到常见的14个机型:

    6cdbeea3f398c542703614a266ecc387.png

    当然这只是其中的一种分割方案,我们还可以这样划分:480px,800px,1400px,1400px

    222349431fb945fb39c447c8a459c5c6.png

    而典型的响应式布局框架,Bootstrap是怎么进行分割的呢?

    2770c7e90ee632ff7247b36203604770.png

    百分比布局(流式布局)

    通过百分比单位,可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化,从而实现响应式的效果。Bootstrap里面的栅格系统就是利用百分比来定义元素的宽高,CSS3支持最大最小高,可以将百分比和max(min)一起结合使用来定义元素在不同设备下的宽高。

    /* pc  */html, body { margin: 0;padding: 0;width: 100%;height: 100%;}aside {    width: 10%;    height: 100%;    background-color: red;    float: left;}main {    height: 100%;    background-color: blue;    overflow: hidden;}/* ipad pro */@media screen and (max-width: 1024px) {    aside {      width: 8%;      background-color: yellow;    }}/* ipad */@media screen and (max-width: 768px) {    aside {      float: none;      width: 100%;      height: 10%;      background-color: green;    }    main {      height: calc(100vh - 10%);       background-color: red;    }}/* iphone6 7 8 plus */@media screen and (max-width: 414px) {    aside {      float: none;      width: 100%;      height: 5%;      background-color: yellow;    }    main {      height: calc(100vh - 5%);      background-color: red;    }}

    我们必须要弄清楚css中子元素的百分比到底是相对谁的百分比。

    子元素的heightwidth中使用百分比,是相对于子元素的直接父元素,width相对于父元素的widthheight相对于父元素的height;子元素的topbottom如果设置百分比,则相对于直接非static定位(默认定位)的父元素的高度,同样子元素的leftright如果设置百分比,则相对于直接非static定位(默认定位的)父元素的宽度;

    CSS3新视口单位

    • vw = view width

    • vh = view height

    这两个单位是CSS3引入的,它允许我们更接近浏览器窗口定义大小。

    cdabce30c7598b0266860de7e604d928.png

    单位解释
    vw1vw = 视口宽度的1%
    vh1vh = 视口高度的1%
    vmin选取vw和vh中最小的那个
    vmax选取vw和vh中最大的那个

    比如:浏览器视口尺寸为1920px,那么 1vw = 1920px * 1% = 19.2px(浏览器会四舍五入向下取7)

    vh/vw与%区别在于

    单位含义
    %大部分相对于祖先元素,也有相对于自身的情况比如(border-radius、translate等)
    vh/vw相对于视窗的尺寸

    calc(100vw - 10%) 可以做单位的四则运算 ,注意符号两边需要留一个空格

    适配最优做法:搭配vw和rem

    Bootstrap框架的使用

    Bootstrap框架

    几个要求:

    • 要求h5文档

    • 加viewport视口 如下:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    布局容器

    Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。我们提供了两个作此用处的类。

    注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套

    • .container 类  :用于固定宽度并支持响应式布局的容器。默认的宽度是1170px

    • .container-fluid 类 : 用于 100% 宽度,占据全部视口(viewport)的容器。

    .container 类  用于固定宽度并支持响应式布局的容器。默认的宽度是1170px ,两边会留白

    <div class="container">  ...div>

    .container-fluid 类  用于 100% 宽度并支持响应式布局的容器,占据全部视口(viewport)的容器。

    <div class="container-fluid">  ...div>

    何时使用containercontainer-fluid答:如果想让内容居中显示就用container(相当于版心),如果想占据整个屏幕宽度就使用container-fluid

    响应式原理

    栅格系统

    Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。若超过12列则会自动换行。

    • 行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。

    • 通过“行(row)”在水平方向创建一组“列(column)”。

    • 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素

    css单位的理解:px、em、rem、vh

    • px: 固定像素点大小

    • em: 在 font-size 中使用是相对于父元素的字体大小,在其他属性中使用是相对于自身的字体大小。

      比如父元素font-size:12px;子素如果写成:font-sise:2em;则自身元素用px表示就是24px(相对父元素字体大小);但是子元素同时也设置:width:2em,那么自身元素用px表示就是24px(相对自身字体大小);
    • rem:相对于根(root)元素的字体大小。rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小(浏览器)

    • vw/vh (visual width/ visual height):相对于视口宽度或高度

    1vw :视口宽度的 1/100;1vh :视口高度的 1/100;
    • vim:使用视口宽与高中的最小的那个。 

    • vmax:使用视口宽与高中的最大的那个。

    CSS的值与单位

    案例:使用BootStrap快速构建响应式页面

    <html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Documenttitle>    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">    <script src="./js/jquery-2.0.0.min.js">script>    <script src="./bootstrap/js/bootstrap.min.js">script>    <style>        body {            height: 3000px;                    }style>head><body>    <nav class="navbar navbar-inverse navbar-fixed-top">        <div class="container">                    <div class="navbar-header">            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">              <span class="sr-only">Toggle navigationspan>              <span class="icon-bar">span>              <span class="icon-bar">span>              <span class="icon-bar">span>            button>            <a class="navbar-brand" href="#">李姐万岁a>          div>                          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">            <ul class="nav navbar-nav">              <li class="active"><a href="#">Link <span class="sr-only">(current)span>a>li>              <li><a href="#">Linka>li>              <li class="dropdown">                <a href="#" class="dropdown-toggle glyphicon glyphicon-briefcase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Project <span class="caret">span>a>                <ul class="dropdown-menu">                  <li><a href="#">Actiona>li>                  <li><a href="#">Another actiona>li>                  <li><a href="#">Something else herea>li>                  <li role="separator" class="divider">li>                  <li><a href="#">Separated linka>li>                  <li role="separator" class="divider">li>                  <li><a href="#">One more separated linka>li>                ul>              li>            ul>            <form class="navbar-form navbar-left">              <div class="form-group ">                <input type="text" class="form-control " placeholder="Search">              div>              <button type="submit" class="btn btn-success glyphicon glyphicon-search"> Submit button>            form>            <ul class="nav navbar-nav navbar-right">              <li><a href="#">Linka>li>              <li class="dropdown">                <a href="#" class="dropdown-toggle glyphicon glyphicon-log-in" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Project <span class="caret">span>a>                <ul class="dropdown-menu">                  <li><a href="#">Actiona>li>                  <li><a href="#">Another actiona>li>                  <li><a href="#">Something else herea>li>                  <li role="separator" class="divider">li>                  <li><a href="#">Separated linka>li>                ul>              li>            ul>          div>        div>      nav>      <div class="jumbotron ">          <div class="container">            <h1>Hello, world!h1>            <p>This is a simple hero unit, a simple jumbotron-style component for calling                 extra attention to featured content or information.p>            <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn morea>p>          div>              div>      <div class="container">        <div class="row">            <div class="col-md-4">                <h2>Awesome!h2>                <p>                    我对年轻时候那种胡混、到处去玩,并不感到后悔。                    我觉得青春就是应该挥霍的。因为我注意到我的很                    多同龄人表现得很糟糕,比如说二十二三岁,本来                    是年轻人拼命地玩儿、拼命地谈恋爱的时候,他们                    却像傻子一样戴着像瓶底一样厚的眼镜躲在屋里啃                    那些倒霉的书本,研究鲁迅先生为什么在第二自然                    段讲那么一句话。整天看这些东西,年轻时候该玩                    不玩、该谈恋爱不谈,然后到了二十九岁,三十岁,                    眼看父母家人所有亲戚长辈全着急了,就急急忙忙谈                    了一个恋爱,谈了两个多月就结了婚,结了婚一年就                    生了孩子。然后这帮家伙到了三十五六岁,有一天忽                    然醒悟了,觉得,哎呀,我马上就人到中年了,我这                    辈子都没怎么开心过,都没玩过。于是这帮笨蛋笨笨                    地想了半天决定开心一下的结果就是,找了个外遇。                p>                <button class="btn btn-success">View detilsbutton>            div>            <div class="col-md-4">                <h2>Awesome!h2>                <p>                    人生的坟墓是婚姻,那么地狱便是养小孩,像女儿这种                    生物,哪怕会有可能存在一段可爱好玩的时间,最后十                    几年二十年的心血和投入的金钱,还不是被哪家的小子                    幸运儿给骗走,如果不好运遇到个穷小子,作为女儿属                    性的那种胳膊肘往外拐的天赋,指不定还要我这个做父                    亲的倒贴钱给房给车供他们结婚……最后成为被啃老一族                    然后到了六七十岁在人生的黄昏还被招呼过去帮忙看孙子                p>                <button class="btn btn-success">View detilsbutton>            div>            <div class="col-md-4">                <h2>Awesome!h2>                <p>                    你如果走进社会,为了生存或是为了什么不要脸的理由,                    变成了一个恶心的成年人社会中的一员,那你就把这个世                    界变得恶心了一点点。如果你一生耿直,刚正不阿,没做                    任何恶心的事情,没有做任何对别人造成伤害的事情,一                    辈子拼了老命勉强把老婆、孩子、老娘,把身边的这些人                    照顾好了,没有成名,没有发财,没有成就伟大的事业,                    一生正直,最后梗着脖子到了七八十岁死掉了,你这一生                    是不是没有改变世界?你还是改变世界了,你把这个世界                    变得美好了一点点。因为你,这个世界又多了一个好人。                p>                <button class="btn btn-success">View detilsbutton>            div>        div>      div>body>html>
    展开全文
  • 使用BootStrap进行响应式布局案例

    千次阅读 2015-09-29 00:03:30
    (1)首先下载BootStrap,把bootstrap.min.css拷贝到项目中。(2)新建style.css,实现代码如下:.row{ margin-bottom: 20px; } .row .row{ margin-top: 10px; margin-bottom: 0px; } [class*="col-&...

    (1)首先下载BootStrap,把bootstrap.min.css拷贝到项目中。

    (2)新建style.css,实现代码如下:

    .row{
    
        margin-bottom: 20px;
    
    
    }
    
    .row .row{
    
        margin-top: 10px;
        margin-bottom: 0px;
    
    }
    
    [class*="col-"]{
        padding-top: 15px;
        padding-bottom: 15px;
        /*background-color: #eee;*/
        /*background-color: rgba(86,61,124,.15);*/
        /*border: 1px solid #dddddd;*/
        /*border: 1px solid rgba(86, 61, 214,.2);*/
    
    }

    (3)新建index.html文件,实现代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="bootstrap.min.css" type="text/css" rel="stylesheet">
    
        <link href="style.css" type="text/css" rel="stylesheet">
    </head>
    <!--<div>-->
    
        <!--导航栏-->
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Project name</a>
                </div>
    
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <form class="navbar-form navbar-right" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Email">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Password">
                        </div>
                        <button type="submit" class="btn btn-success">Sign in</button>
                    </form>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
    
        <!--巨幕-->
        <div class="jumbotron">
    
            <div class="container">
                <h1>Hello, world!</h1>
    
                <p>This is a template for a simple marketing or informational website. It includes a large callout called a
                    jumbotron and three supporting pieces of content. Use it as a starting point to create something more
                    unique.</p>
    
                <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
            </div>
        </div>
    
    
        <!--三列-->
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <h2>Heading</h2>
    
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
                        mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna
                        mollis euismod. Donec sed odio dui.</p>
                    <input class="btn btn-default" type="button" value="View details »">
                </div>
    
                <div class="col-md-4">
                    <h2>Heading</h2>
    
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
                        mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna
                        mollis euismod. Donec sed odio dui.</p>
                    <input class="btn btn-default" type="button" value="View details  »">
                </div>
    
                <div class="col-md-4">
                    <h2>Heading</h2>
    
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
                        mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna
                        mollis euismod. Donec sed odio dui.</p>
                    <input class="btn btn-default" type="button" value="View details  »">
                </div>
            </div>
        </div>
    
        <!--页脚-->
        <!--注意:<hr>是分割线-->
    
        <div class="container">
            <hr>
            <footer>© Company 2014</footer>
        </div>
    
        </body>
    </html>

    (4)最后的实现效果如下:这是模仿BootStrap中的某一个模板设计出来的。可见BootStrap使用起来非常方便。


    github主页:https://github.com/chenyufeng1991  。欢迎大家访问!

    展开全文
  • 前端响应式开发介绍响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够,缺点就是CSS比较重。如果pc端和移动端内容非常多...

    前端响应式开发

    介绍

    响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够,缺点就是CSS比较重。

    如果pc端和移动端内容非常多的话,还是强烈建议pc和移动端各开发一套,这样后期维护起来更加方便。

    响应式布局的实现方案

    • css3媒体查询(@media screen)

    • 百分比布局(流式布局)   div {  width:20%; }   .box {   border-radius: 50%;  }

    • vh/vw     div {  width: 50vw }

    css3媒体查询

    CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式,当重置浏览器窗口大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

    body {    // 默认蓝色    background-color: blue;}/* 当屏幕分辨率大于768像素时,应用下面的样式 */@media screen and (min-width: 768px) {    body {      background-color: green;    }}/* 当屏幕分辨率大于900像素时,应用下面的样式 */@media screen and (min-width: 900px) {    body {      background-color: yellow;    }}/* 当屏幕分辨率大于1024像素时,应用下面的样式 */@media screen and (min-width: 1024px) {    body {      background-color: skyblue;    }}

    常用的两个属性:

    • min-width:最小宽度

    • max-width:最大宽度

    /* 当屏幕分辨率大于900小于1200像素时,应用下面的样式 */@media screen and (min-width: 900px) and (max-width: 1200px){    .a{        color: purple;        font-size: 26px;    }}

    如何确定媒体查询的分割点也是一个开发中会遇到的问题,下面是市场上的移动设备和电脑屏幕分辨率的分布情况,可以发现不同品牌和型号的设备屏幕分辨率一般都不一样 。

    如果我们选择600px,900px,1200px,1800px作为分割点,可以适配到常见的14个机型:

    3439f9ba7c3e6d38eb65b86896169a88.png

    当然这只是其中的一种分割方案,我们还可以这样划分:480px,800px,1400px,1400px

    b4dec3504c130e2b3694c907452389e7.png

    而典型的响应式布局框架,Bootstrap是怎么进行分割的呢?

    aa125208cf5c9de9135bce5a7fac7f13.png

    百分比布局(流式布局)

    通过百分比单位,可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化,从而实现响应式的效果。Bootstrap里面的栅格系统就是利用百分比来定义元素的宽高,CSS3支持最大最小高,可以将百分比和max(min)一起结合使用来定义元素在不同设备下的宽高。

    /* pc  */html, body { margin: 0;padding: 0;width: 100%;height: 100%;}aside {    width: 10%;    height: 100%;    background-color: red;    float: left;}main {    height: 100%;    background-color: blue;    overflow: hidden;}/* ipad pro */@media screen and (max-width: 1024px) {    aside {      width: 8%;      background-color: yellow;    }}/* ipad */@media screen and (max-width: 768px) {    aside {      float: none;      width: 100%;      height: 10%;      background-color: green;    }    main {      height: calc(100vh - 10%);       background-color: red;    }}/* iphone6 7 8 plus */@media screen and (max-width: 414px) {    aside {      float: none;      width: 100%;      height: 5%;      background-color: yellow;    }    main {      height: calc(100vh - 5%);      background-color: red;    }}

    我们必须要弄清楚css中子元素的百分比到底是相对谁的百分比。

    子元素的heightwidth中使用百分比,是相对于子元素的直接父元素,width相对于父元素的widthheight相对于父元素的height;子元素的topbottom如果设置百分比,则相对于直接非static定位(默认定位)的父元素的高度,同样子元素的leftright如果设置百分比,则相对于直接非static定位(默认定位的)父元素的宽度;

    CSS3新视口单位

    • vw = view width

    • vh = view height

    这两个单位是CSS3引入的,它允许我们更接近浏览器窗口定义大小。

    3ba98aac275505595045753acd669a79.png

    单位解释
    vw1vw = 视口宽度的1%
    vh1vh = 视口高度的1%
    vmin选取vw和vh中最小的那个
    vmax选取vw和vh中最大的那个

    比如:浏览器视口尺寸为1920px,那么 1vw = 1920px * 1% = 19.2px(浏览器会四舍五入向下取7)

    vh/vw与%区别在于

    单位含义
    %大部分相对于祖先元素,也有相对于自身的情况比如(border-radius、translate等)
    vh/vw相对于视窗的尺寸

    calc(100vw - 10%) 可以做单位的四则运算 ,注意符号两边需要留一个空格

    适配最优做法:搭配vw和rem

    Bootstrap框架的使用

    Bootstrap框架

    几个要求:

    • 要求h5文档

    • 加viewport视口 如下:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    布局容器

    Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。我们提供了两个作此用处的类。

    注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套

    • .container 类  :用于固定宽度并支持响应式布局的容器。默认的宽度是1170px

    • .container-fluid 类 : 用于 100% 宽度,占据全部视口(viewport)的容器。

    .container 类  用于固定宽度并支持响应式布局的容器。默认的宽度是1170px ,两边会留白

    <div class="container">  ...div>

    .container-fluid 类  用于 100% 宽度并支持响应式布局的容器,占据全部视口(viewport)的容器。

    <div class="container-fluid">  ...div>

    何时使用containercontainer-fluid答:如果想让内容居中显示就用container(相当于版心),如果想占据整个屏幕宽度就使用container-fluid

    响应式原理

    栅格系统

    Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。若超过12列则会自动换行。

    • 行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。

    • 通过“行(row)”在水平方向创建一组“列(column)”。

    • 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素

    css单位的理解:px、em、rem、vh

    • px: 固定像素点大小

    • em: 在 font-size 中使用是相对于父元素的字体大小,在其他属性中使用是相对于自身的字体大小。

      比如父元素font-size:12px;子素如果写成:font-sise:2em;则自身元素用px表示就是24px(相对父元素字体大小);但是子元素同时也设置:width:2em,那么自身元素用px表示就是24px(相对自身字体大小);
    • rem:相对于根(root)元素的字体大小。rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小(浏览器)

    • vw/vh (visual width/ visual height):相对于视口宽度或高度

    1vw :视口宽度的 1/100;1vh :视口高度的 1/100;
    • vim:使用视口宽与高中的最小的那个。 

    • vmax:使用视口宽与高中的最大的那个。

    CSS的值与单位

    案例:使用BootStrap快速构建响应式页面

    <html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Documenttitle>    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">    <script src="./js/jquery-2.0.0.min.js">script>    <script src="./bootstrap/js/bootstrap.min.js">script>    <style>        body {            height: 3000px;                    }style>head><body>    <nav class="navbar navbar-inverse navbar-fixed-top">        <div class="container">                    <div class="navbar-header">            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">              <span class="sr-only">Toggle navigationspan>              <span class="icon-bar">span>              <span class="icon-bar">span>              <span class="icon-bar">span>            button>            <a class="navbar-brand" href="#">李姐万岁a>          div>                          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">            <ul class="nav navbar-nav">              <li class="active"><a href="#">Link <span class="sr-only">(current)span>a>li>              <li><a href="#">Linka>li>              <li class="dropdown">                <a href="#" class="dropdown-toggle glyphicon glyphicon-briefcase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Project <span class="caret">span>a>                <ul class="dropdown-menu">                  <li><a href="#">Actiona>li>                  <li><a href="#">Another actiona>li>                  <li><a href="#">Something else herea>li>                  <li role="separator" class="divider">li>                  <li><a href="#">Separated linka>li>                  <li role="separator" class="divider">li>                  <li><a href="#">One more separated linka>li>                ul>              li>            ul>            <form class="navbar-form navbar-left">              <div class="form-group ">                <input type="text" class="form-control " placeholder="Search">              div>              <button type="submit" class="btn btn-success glyphicon glyphicon-search"> Submit button>            form>            <ul class="nav navbar-nav navbar-right">              <li><a href="#">Linka>li>              <li class="dropdown">                <a href="#" class="dropdown-toggle glyphicon glyphicon-log-in" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Project <span class="caret">span>a>                <ul class="dropdown-menu">                  <li><a href="#">Actiona>li>                  <li><a href="#">Another actiona>li>                  <li><a href="#">Something else herea>li>                  <li role="separator" class="divider">li>                  <li><a href="#">Separated linka>li>                ul>              li>            ul>          div>        div>      nav>      <div class="jumbotron ">          <div class="container">            <h1>Hello, world!h1>            <p>This is a simple hero unit, a simple jumbotron-style component for calling                 extra attention to featured content or information.p>            <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn morea>p>          div>              div>      <div class="container">        <div class="row">            <div class="col-md-4">                <h2>Awesome!h2>                <p>                    我对年轻时候那种胡混、到处去玩,并不感到后悔。                    我觉得青春就是应该挥霍的。因为我注意到我的很                    多同龄人表现得很糟糕,比如说二十二三岁,本来                    是年轻人拼命地玩儿、拼命地谈恋爱的时候,他们                    却像傻子一样戴着像瓶底一样厚的眼镜躲在屋里啃                    那些倒霉的书本,研究鲁迅先生为什么在第二自然                    段讲那么一句话。整天看这些东西,年轻时候该玩                    不玩、该谈恋爱不谈,然后到了二十九岁,三十岁,                    眼看父母家人所有亲戚长辈全着急了,就急急忙忙谈                    了一个恋爱,谈了两个多月就结了婚,结了婚一年就                    生了孩子。然后这帮家伙到了三十五六岁,有一天忽                    然醒悟了,觉得,哎呀,我马上就人到中年了,我这                    辈子都没怎么开心过,都没玩过。于是这帮笨蛋笨笨                    地想了半天决定开心一下的结果就是,找了个外遇。                p>                <button class="btn btn-success">View detilsbutton>            div>            <div class="col-md-4">                <h2>Awesome!h2>                <p>                    人生的坟墓是婚姻,那么地狱便是养小孩,像女儿这种                    生物,哪怕会有可能存在一段可爱好玩的时间,最后十                    几年二十年的心血和投入的金钱,还不是被哪家的小子                    幸运儿给骗走,如果不好运遇到个穷小子,作为女儿属                    性的那种胳膊肘往外拐的天赋,指不定还要我这个做父                    亲的倒贴钱给房给车供他们结婚……最后成为被啃老一族                    然后到了六七十岁在人生的黄昏还被招呼过去帮忙看孙子                p>                <button class="btn btn-success">View detilsbutton>            div>            <div class="col-md-4">                <h2>Awesome!h2>                <p>                    你如果走进社会,为了生存或是为了什么不要脸的理由,                    变成了一个恶心的成年人社会中的一员,那你就把这个世                    界变得恶心了一点点。如果你一生耿直,刚正不阿,没做                    任何恶心的事情,没有做任何对别人造成伤害的事情,一                    辈子拼了老命勉强把老婆、孩子、老娘,把身边的这些人                    照顾好了,没有成名,没有发财,没有成就伟大的事业,                    一生正直,最后梗着脖子到了七八十岁死掉了,你这一生                    是不是没有改变世界?你还是改变世界了,你把这个世界                    变得美好了一点点。因为你,这个世界又多了一个好人。                p>                <button class="btn btn-success">View detilsbutton>            div>        div>      div>body>html>
    展开全文
  • bootstrap响应式网页布局

    千次阅读 2019-05-04 10:16:52
    使用它的栅格系统可以轻松的对网页进行布局,而且可以做到响应式布局。看起来很酷,接下来我就会总结自己在开发博客系统中用到的知识点及实战案例给大家,作为一个专栏管理。 知识点 栅格系统用于通过一系列的行...

    bootstrap可以说是没有布局和审美概念的后端狗的福利。使用它的栅格系统可以轻松的对网页进行布局,而且可以做到响应式的布局。看起来很酷,接下来我就会总结自己在开发博客系统中用到的知识点及实战案例给大家,作为一个专栏管理。

    知识点

    栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。

    container: 用于固定宽度并支持响应式布局的容器

    page-header:  页头

    row: 通过“行(row)”在水平方向创建一组“列(column)”

    spanN:预定义栅格

     

    效果

     

     

    代码

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局</title>
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    
    </head>
    
    <body>
    <div class="container">
      <h1 class="page-header">响应式布局<small> 使用Bootstrap网格系统布局网页</small></h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. Maecenas facilisis tellus quis nisl facilisis eget mollis lectus feugiat. Etiam pharetra mattis ultrices. In ac mi metus, ac pharetra ipsum. Aenean imperdiet sem purus. Suspendisse quis odio eu neque varius posuere. Fusce tincidunt tincidunt arcu non viverra. Vivamus dui eros, rhoncus cursus porta quis, sollicitudin a ante. Aliquam porta euismod sollicitudin.</p>
      <div class="row">
        <div class="span4">
          <h2 class="page-header">区块一</h2>
          <p>consectetur adipiscing elit,Lorem ipsum dolor sit amet. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
        </div>
        <div class="span4">
          <h2 class="page-header">区块二</h2>
          <p>Lorem ipsum dolor sit amet, quam accumsan vestibulum,consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget . </p>
        </div>
        <div class="span4">
          <h2 class="page-header">区块三</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
        </div>
      </div>
      <div class="row">
        <div class="span8">
          <h2 class="page-header">主内容</h2>
          <p>Lorem ipsum dolor sit amet, quam accumsan vestibulum,consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget .,consectetur adipiscing elit,Lorem ipsum dolor sit amet. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
        </div>
        <div class="span4">
          <h2 class="page-header">边栏</h2>
          <p>Lorem ipsum dolor sit amet, quam accumsan vestibulum,consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget . </p>
        </div>
        
      </div>
    </div>
    <script src="../bootstrap/js/jquery-1.7.2.min.js"></script> 
    <script src="../bootstrap/js/bootstrap.js"></script>
    </body>
    </html>
    

     

    展开全文
  • 文章目录响应式布局一、介绍和版心二、BootStrap使用bootstrap做轮播图案例完整代码效果图总结 响应式布局 一、介绍和版心 前面已经简单接触过。响应式布局就是代码随着屏幕大小的改变显示不同。 档位划分: 媒体...
  • 移动端WEB开发之响应式布局 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。 设备的划分情况: <!DOCTYPE html> <html> <head> <...
  • 响应式布局Bootstrap

    2018-03-06 01:43:55
    响应式布局的介绍 什么是响应式布局 响应式布局的优缺点 响应式布局设计原则 实现方法介绍 CSS3-Media Query简单案例 Bootstrap的介绍 bootstrap的基本介绍(bootstrap.com) 响应式布局的介绍 什么...
  • 抓住重点 下面开始实现Bootstrap版本3的Demo 案例 首先去官方网站 http://www.bootcss.com/ 下载 点击 进入 点击 进入 下载 把 相关的js和css 拷贝到项目中 为了看到直观的 效果 我们给了div 添加了背景...
  • Bootstrap介绍和Bootstrap各个版本之间的差异对比。...重点讲解栅格布局这一核心内容对实现响应式布局的支持,配合其他全局样式和组件及插件,让用户在实现响应式布局的同时,得到更加优雅的页面效果。

空空如也

空空如也

1 2 3 4 5 6
收藏数 112
精华内容 44
关键字:

bootstrap响应式布局案例