bootstrap 做响应式布局

2017-11-15 16:28:07 hhthwx 阅读数 4322

栅格系统

我们来了解如何利用栅格系统实现响应式布局:
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。

栅格系统原理:

首先栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局。bootstrap根据不同屏幕尺寸,选择不同的栅格选项。一共有四种栅格选项,超小屏(手机)、小屏(平板)、中屏(桌面)、大屏(超大桌面)。栅格系统分为12列,即每行最多可容纳12列。若里,一个.row内包含的列(column)大于12个(即,一行中的栅格单元超过12个单元),则会自动排版,总之,一行只能最多12列,具体分析往后阅读。

而在Bootstrap3中主要把屏幕分成了三种(这里以行(row)来说明):
.col-xs-* 超小屏幕,手机 (宽度<768px)
.col-sm-* 小屏幕,平板 (宽度≥768px)
.col-md-* 中等屏幕,桌面显示器 (宽度≥992px)

不管在哪种屏幕上,栅格系统都会自动的分12列
.col-xs-* 和.col-sm-和.col-md- 后面跟的参数表示在当前的屏幕中占的列数。

使用栅格系统时,需要在部分做如下处理:

<head>
2     <meta charset="UTF-8">
3     <title>Document</title>
4     <meta name="viewport" content="width=device-width, initial-scale=1.0">
5     <link rel="stylesheet" href="css/bootstrap.min.css">
6     <!-- [if lt IE 9]>
7         <script  src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
8     <![endif] -->
9 </head>
  1. 为了确保适当的绘制和触屏缩放,需要在中添加viewport元数据标签

    width=device-width 宽度等于设备宽度

    initial-scale=1.0 初始显示大小——原始大小,即不进行缩放

  2. 导入bootstrap.css文件【bootstrap核心CSS文件,必须导入】,有两种方式导入方式:

    一是,直接导入本地.css文件:

    二是,使用CDN加速服务:

          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
          3. 兼容性:
    

    bootstrap是基于CSS3的,对于IE8- 不支持

    IE8需要Respond.js配合才能实现对媒体查询(media query)的支持。
    以下代码可以解决兼容问题
    “`

栅格系统在多种屏幕设备上如何工作


使用方式:在相应的

上加上对应的类名即可。 类名形式为: 类前缀+num

如:

    表示中等屏幕,该<div>仅占1列

网页开发中的单位

-px:相对于显示屏幕分辨率的长度单位
1.px大小无法跟随屏幕方法缩小
2.所有浏览器都支持px单位

-em:相对于当前文本内的字体尺寸(缺点:不稳定)
1.1em =16px(但不完全是)
2.em会继承父级元素的字体大小
3.IE的部分浏览器并不支持em

-rem:与em类似,相对于HTML根节点的字体单位
1.rem与em类似
2.rem会继承根元素的字体大小
3.html(font-size:62.5%)

字体图标

1.字体小便于加载
2.重复利用
3.方便引用

Bootstrap组件

一个网站,一个APP或者一个系统的构建
一些零件的组合
包括(字体图标,下拉菜单,警告框,弹出框)

Bootstrap组件-图标

1.glyphicon
使用字体图标只需在其类名称中加入:glyphicon+图标名称

    <div class="glyphicon glyphicon-align-center"></div>
    <div class="glyphicon glyphicon-arrow-left"></div>
    <div class="glyphicon glyphicon-apple"></div>

我们还可以为图标设置样式

<button class="btn btn-default"><span class="glyphicon glyphicon-apple"> </span>Click</button>

<style>
        .glyphicon-apple{
            color: crimson;
            font-size: 50px;
        }

    </style>

这里写图片描述

Bootstrap组件-下拉菜单

1dropdown控制组件为下拉
2.dropdown-menu-right代替.pull-right右对齐
3.divider分割线

 <div class="dropdown">
         <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
             Click
             <sapn class="caret"></sapn>
         </button>
         <ul class="dropdown-menu">
             <li><a href="http://www.imooc.com">小胡</a></li>
             <li><a href="http://www.imooc.com">小胡胡</a></li>
             <li><a href="http://www.imooc.com">小胡胡胡</a></li>
         </ul>
     </div>

BootStrap组件:导航

  <ul class="nav nav-tabs">
           <li class="active"><a href="#">小胡</a></li>
           <li><a href="#">小胡</a></li>
           <li><a href="#">小胡</a></li>
           <li><a href="#">小胡</a></li>
       </ul>
       <br>
       <ul class="nav nav-pills">
           <li class="active"><a href="#">小胡</a></li>
           <li><a href="#">小胡</a></li>
           <li><a href="#">小胡</a></li>
           <li><a href="#">小胡</a></li>
       </ul>
       <br>
       <ul class="nav nav-pills nav-stacked">
           <li class="active"><a href="#">小胡</a></li>
           <li><a href="#">小胡</a></li>
           <li><a href="#">小胡</a></li>
           <li><a href="#">小胡</a></li>
       </ul>

这里写图片描述

Bootstrap组件:分页

1.pagination在父元素中添加表示分页
2.pager放置在翻页区域
3.previous把链接左对齐,.next把链接右对齐

 <nav>
        <ul class="pager">
            <li class="previous">
                <a href="./table.html">向左</a>
            </li>
            <li class="next">
                <a href="./table.html">向右</a>
            </li>
        </ul>
       <ul class="pagination ">
       //添加类名称active默认为选中状态
           <li class="active">
               <a href="./table.html">1</a>
           </li>
           <li>
               <a href="./table.html">2</a>
           </li>
           <li>
               <a href="./table.html">3</a>
           </li>
           <li>
               <a href="./table.html">4</a>
           </li>
           <li>
               <a href="./table.html">5</a>
           </li>
       </ul>
    </nav>

Bootstap组件:进度条

 <script>
        $(function () {
            var a = parseInt($('.progress-bar').css('width'));
            console.log(a);
           b = parseInt($(document).width());
           console.log(b);

           var c = a/b;
           console.log(c);
           var str = c.toString();
           //在c中找小数点,如果有小数点,需要将c转化为字符串
            if(str.indexOf(".") != -1){
                d =  parseInt(c * 100) + "%";
                console.log(d);
            }

           $('.progress-bar').html(d);
        })
    </script>
</head>
<body>
   <div class="progress">
       <!--代表进度条的内容-->
       <div class="progress-bar progress-bar-striped" style="width: 30%;">


       </div>
   </div>
</body>

这里写图片描述

Bootstrap组件

1.list-group代表列表组
2.badge代表状态数
3.active代表选中状态

 <ul class="list-group">
      <li class="list-group-item active">
          这是一个列表
          <span class="badge">
              14
          </span>
      </li>
      <li class="list-group-item  list-group-item-danger">
          这是一个列表
          <span class="badge">
              14
          </span>
      </li>
      <li class="list-group-item list-group-item-info">
          这是一个列表
          <span class="badge">
              14
          </span>
      </li>
  </ul>

Bootstrap组件:面板

1.panel面板
2.panel-body代表面板内容
3.panel-footer代表面板的注脚

<div class="panel panel-danger">
          <div class="panel-heading">
              弹出层!
          </div>
              <div class="panel-body">
                  这是面板的具体内容
              </div>
              <div class="panel-footer">
                注脚
              </div>

      </div>

这里写图片描述

2019-01-18 16:48:44 weixin_44541076 阅读数 5585

首先我们要在页面上引用bootstraps
在这里插入图片描述
引用bootstrap或者bootstrap.min都可以的,如果有需要查看源代码,那么可以引用bootstrap,一般都建议用boostrap.min。同样的效果,bootstrap.min占的内存小,意味着能加载的更快一点,哪怕只是快0.1秒,感觉也是很不一样的。怎样引用就不用我说了吧?

<link rel="stylesheet" href="../bootstrap-4.1.3-dist/css/bootstrap.min.css">

嗯,link然后tab键,找到所在文件夹,点击引用就行了。
Bootstrap里定义好的类和样式有非常非常的多。
接下来只是说它这个布局里的一个响应式
在这里插入图片描述

<div class="container" style="height: 400px; width: 800px;">
<div class="row w-100 h-100">
<div class="col-lg-3 bg-danger col-md-4 col-sm-6"></div>
<div class="col-lg-3 bg-info col-md-4 col-sm-6"></div>
<div class="col-lg-3 bg-primary col-md-4 col-sm-6"></div>
<div class="col-lg-3 bg-success col-md-4 col-sm-6"></div>
<div class="col-lg-3 bg-warning col-md-4 col-sm-6"></div>
<div class="col-lg-3 bg-secondary col-md-4 col-sm-6"></div>
</div>
</div>

Bootstrap里已经把响应不同屏幕大小的类都定义好了,你只需要动动手指就可以用了。
col-lg-3,我给它在>=992px的情况下一排显示4份。(注:col默认一排可分成12等份。)

在这里插入图片描述
col-md-4,我给它在大于等于768px小于992px的情况下一排显示3份。
在这里插入图片描述
col-sm-6,我给它在大于等于576px小于768px的情况下一排显示2份
在这里插入图片描述
这样就可以在屏幕大小不同的情况下,也能实现完美的布局了。

2015-05-17 18:29:47 maxwell_nc 阅读数 29274

前言

原创文章,欢迎转载,请保留出处。
有任何错误、疑问或者建议,欢迎指出。
我的邮箱:Maxwell_nc@163.com

现在的上网设备十分多,每种设备的分辨率都不一样,传统的网站开发需要花很大功夫才能实现不同分辨率下兼容布局,而Bootstrap的出现使得网站开发更加简单快捷。Bootstrap是Twitter推出的一个用于前端开发的开源工具包,其中的一个特性就是支持响应式布局。


何为响应式布局

我们可以查阅百度百科得到比较权威的解析:

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

看下下面的两种设备浏览显示的效果:

大屏

上面的是当设备宽度大于768px时,下面则是在小屏幕显示的效果

小屏

侧边栏和导航条都被隐藏,通过按钮显示

弹出侧边栏


下载Bootstrap3

首先我们使用的开发平台是Windows7+Eclipse for J2EE
首先要下载Bootstrap3,可以到Bootstrap中文网下载,只需要下载用于生产环境的 Bootstrap,感兴趣还可以下源码研究:
http://v3.bootcss.com/getting-started/#download
另外要注意,要使用Bootstrap必须要有JQuery,可以从Bootstrap中文网的CDN里面保存jquery的压缩版即可,地址是:
http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js
准备后就开始配置项目


为项目配置Bootstrap3

本地配置

首先利用Eclipse建立一个动态Web项目,在WebContent下建立bootstrap文件夹和jquery文件夹,然后把对应的文件复制进去即可。
注意:可能你复制jquery的js文件进去后,Eclipse报错,这个是因为Eclipse对Javascript验证出错,可以把这个文件排除验证,或者直接无视Eclipse的报错。如下图:

项目目录

接下来建立一个index.jsp文件,引入Bootstrap3:

<!-- Bootstrap3 核心 CSS 文件 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">

把JS文件放在<BODY>的最后,加快页面显示:

<!-- JQuery文件,务必在bootstrap.min.js 之前引入 -->
<script src="${pageContext.request.contextPath}/jquery/jquery.min.1.11.2.js"></script>

<!-- Bootstrap3的 JavaScript文件 -->
<script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>

利用Bootstrap中文网CDN配置

如果觉得上述过程过于复杂,实际建站又想节省点流量,可以利用Bootstrap中文网的CDN配置(个人建议还是本地配置靠谱):

Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务,访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务,请进入BootCDN 主页查看更多可用的工具库。

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

但要注意,要实现移动设备响应还要附加一个meta(必须写在其他meta前面):

<!-- 下面这句用于响应移动设备的改变布局,必须写在前面 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

配置好后就可以开始使用Bootstrap3的全局CSS样式、Javascript插件和Bootstrap组件。


栅格系统

接下来我们了解如何利用Bootstrap的栅格系统实现响应式布局:

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。

学习Bootstrap一定理解栅格系统的原理,才能实现响应式布局。

首先栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,我们这里只使用行(row)。

“行(row)”必须包含在 .container (容器:固定宽度)或 .container-fluid (流式容器:固定宽度转换为100% 宽度)中。

而在Bootstrap3中主要吧屏幕分成了三种(这里以行(row)来说明):
.col-xs-* 超小屏幕,手机 (宽度<768px)
.col-sm-* 小屏幕,平板 (宽度≥768px)
.col-md-* 中等屏幕,桌面显示器 (宽度≥992px)

不管在哪种屏幕上,栅格系统都会自动的分12列
.col-xs-*.col-sm-*.col-md-* 后面跟的参数表示在当前的屏幕中占的列数。

同一段代码在不同屏幕下的显示,看我的图解:
同一段代码在不同屏幕下的显示

了解栅格系统就能初步实现响应式布局了。


后记

我会更新一系列的Bootstrap3建站教程,从下载配置开始,本篇虽短,但所有代码都是经过个人验证的,对于一个利用业余时间写博客的我来,本编已经花了我不少的时间了,下篇我们来探讨如下实现响应式导航栏。
实际上我已经实现了,但是由于时间关系还没来得及写博记录,不过我已经上传了源码在
http://download.csdn.net/detail/maxwell_nc/8709975
等不及的朋友可以自己研究下。

2015-09-29 00:03:30 CHENYUFENG1991 阅读数 5465

(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  。欢迎大家访问!

2017-01-16 14:22:09 u012238748 阅读数 4705
Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行。
不过正所谓“萝卜青菜各有所爱”,如果你想要使用Bootstrap开发自己的项目却又恰巧不太喜欢响应式布局(或者你所设计的页面布局不允许你使用响应式技术),那么你可以通过以下方式禁用响应式布局

移除标签

禁用第一步,就是需要移除在head标签中添加的
<meta name="viewport" content="width=device-width, initial-scale=1.0”>
该标签的作用在于使得你的网站在移动设备端被访问的时候,不会进行缩放,而是以100%的比例显示在移动设备中。

设定宽度

禁用第二步,为.container类设置一个宽度,从而覆盖它根据设备宽度而自动调节的功能。
例如你可以设定.container {width: 980px;},为了起到覆盖原bootstrap样式的作用,最好将你自定义的css文件在bootstrap.css文件之后引入。

删除菜单折叠

倘若你采用了导航栏,那么就要注意删掉菜单在移动端的折叠样展开式(主要通过button的navbar-toggle来实现)。

栅格布局

除此之外,如果你采用了栅格布局,那么就要采用.col-xs-*(最小设备栅格类)的样式来代替.col-md-*以及.col-lg-*,这样就能确保栅格能够在所有设备中展开。