响应式布局值之Bootstrap

来源：互联网发布：封印者画质优化编辑：程序博客网时间：2024/06/07 00:47

1.响应式布局介绍

就是在网站上兼容多个终端-而不是为每个终端做一个特定的版本，其目的是为用户提供更加舒适的界面和更好的用户体验。
优缺点：

优点：

（1）面对不同分辨率设备灵活度高

（2）能够快捷解决设备显示问题

缺点：

（1）兼容各种设备工作量大，效率低下

（2）代码累赘，会出现隐藏无用的元素，加载时间长。

2.响应式布局的实现

2.1CSS中的Media Query（媒体查询）

基本元素

divice-width，divce-height //设备宽高，设备的物理宽高width，height //渲染窗口化的宽高 当前展示页面的宽高orientation//设备的手持方向resolution //设备的分辨率

使用方法

（1）外联

<link type="text/css" rel="stylesheet" href="style.css" media="only screen and (max-width:640px)">

（2）内嵌样式

<style>        @media  screen and (min-width: 640px) {            body{                background-color: antiquewhite;            }        }</style>

3.Bootstrap

3.1bootstrap介绍

简单、直观、强悍的前端开发框架，让web开发更加迅速、简单
优点：快速、简单、灵活的栅格系统、小儿强大、响应式布局、跨平台。
下载：getbootstrap.com

3.2 实例介绍

实现官方例子的效果

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>bootstrap的简单使用</title>    <link rel="stylesheet" href="bootstrap.min.css" type="text/css">    <link rel="stylesheet" href="style03.css" type="text/css"></head><body><div class="container">    <nav class="navbar navbar-default">        <div class="container-fluid">            <!-- 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="#">Brand</a>            </div>            <!-- Collect the nav links, forms, and other content for toggling -->            <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="#">Link</a></li>                    <li class="dropdown">                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>                        <ul class="dropdown-menu">                            <li><a href="#">Action</a></li>                            <li><a href="#">Another action</a></li>                            <li><a href="#">Something else here</a></li>                            <li role="separator" class="divider"></li>                            <li><a href="#">Separated link</a></li>                            <li role="separator" class="divider"></li>                            <li><a href="#">One more separated link</a></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-default">Submit</button>                </form>                <ul class="nav navbar-nav navbar-right">                    <li><a href="#">Link</a></li>                    <li class="dropdown">                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>                        <ul class="dropdown-menu">                            <li><a href="#">Action</a></li>                            <li><a href="#">Another action</a></li>                            <li><a href="#">Something else here</a></li>                            <li role="separator" class="divider"></li>                            <li><a href="#">Separated link</a></li>                        </ul>                    </li>                </ul>            </div><!-- /.navbar-collapse -->        </div><!-- /.container-fluid -->    </nav><div class="row">    <div class="col-md-1">.col-md-1</div>    <div class="col-md-1">.col-md-1</div>    <div class="col-md-1">.col-md-1</div>    <div class="col-md-1">.col-md-1</div>    <div class="col-md-1">.col-md-1</div>    <div class="col-md-1">.col-md-1</div>    <div class="col-md-1">.col-md-1</div>    <div class="col-md-1">.col-md-1</div>    <div class="col-md-1">.col-md-1</div>    <div class="col-md-1">.col-md-1</div>    <div class="col-md-1">.col-md-1</div>    <div class="col-md-1">.col-md-1</div></div><div class="row">    <div class="col-md-8">.col-md-8</div>    <div class="col-md-4">.col-md-4</div></div><div class="row">    <div class="col-md-4">.col-md-4</div>    <div class="col-md-4">.col-md-4</div>    <div class="col-md-4">.col-md-4</div></div><div class="row">    <div class="col-md-6">.col-md-6</div>    <div class="col-md-6">.col-md-6</div></div><form>    <div class="form-group">        <label for="exampleInputEmail1">Email address</label>        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">    </div>    <div class="form-group">        <label for="exampleInputPassword1">Password</label>        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">    </div>    <div class="form-group">        <label for="exampleInputFile">File input</label>        <input type="file" id="exampleInputFile">        <p class="help-block">Example block-level help text here.</p>    </div>    <div class="checkbox">        <label>            <input type="checkbox"> Check me out        </label>    </div>    <button type="submit" class="btn btn-default">Submit</button></form></div></body></html>

样例图

分析：
Container
有两个作用：在随时可能的宽度变化(响应式)中提供宽度限制，并提供一个水平方向的 padding，使其内部的内容不会接触到浏览器的边界，大小为15px，实现内容居中。当页面宽度变化，container 的宽度也随之变化。并且其中的 column 的宽度是基于百分比，所以他们的值不需要变化。
注意，不需要也不应该在 container 中嵌套另一个 container。

row
row是 column 直接存在的容器，按照文档描述 row 中最多可有12个 column，不过可以通过 nesting 的方式灵活扩展。同时作为都是左浮动的 column 的 wrapper，自带 clearfix 的性质。同时 row 还有一个很特殊的地方，就是左右各有－15px 的 margin，用来抵消container 中15px的 padding。
注意：为啥栅格默认是12列，是因为12更容易被分成3,4,2,6，等份。

column
每个column 也会有15px的水平方向的 padding，colunmn 只能在 row 中生存，由于 row 的 margin 为－15px，那么位于两边的 column 就碰到了 container 的边界。但是 colunmn 本身又有 15px 的 padding 使得它其中的内容并不会碰到 container，同时不同column的内容之间就有了30px的槽。
注意：一定要把 column 放到 row 里使用。

nesting

当把上面一系列的 container, row, column 都设置好，就可以通过 nesting 扩展它的栅格系统了，也就是在 column 中直接嵌套 row，而不需要再套一层 container：nesting
还记得 container 和 column 都有15px的 padding 吗，对在 nseting 的时候 column 的作用也相当于 container 了，这样就可以实现任意的嵌套了。

3.3 bootstrap的使用

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <link rel="stylesheet" href="bootstrap.min.css" type="text/css">    <title>使用bootstrap</title></head><body><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">                <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 style="padding-top: 50px">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 &raquo;</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>            <p><a class="btn btn-default btn-lg" role="button">View Detail &raquo;</a></p>        </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>            <p><a class="btn btn-default btn-lg" role="button">View Detail &raquo;</a></p>        </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>            <p><a class="btn btn-default btn-lg" role="button">View Detail &raquo;</a></p>        </div>    </div>    <hr/>    <footer>        <p>&copy;2017 Company, byd666.</p>    </footer></div></body></html>

4 总结

使用bootstrap实现响应式布局的速度较快，但是代码冗余太大，加载速度方面不够快，并且要熟练掌握官方文档中的一些内容，要知道你需要的样式在哪一块，这样能够更快的提升自己的开发速度。

阅读全文

1 0