web响应式之bootstrap的基础用法。

1/首先必须在head里面引用视窗viewport,以保证之后可以响应式分布

<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

<meta http-equiv="X-UA-Compatible" content="IE=7"/>

2/必须在head里面引用bootstrap文件,必须先引用css在引用js

3/响应式导航(为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件。)

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
         data-target="#example-navbar-collapse">
         <span class="sr-only">切换导航</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">W3Cschool</a></div>
<!-- 从这往上不要动 可以把W3Cschool删除 -->
<!--下面只需要修改a标记里面的文字即可 dropdown是下拉列表 dropown-menu是二级菜单-->
<div class="collapse navbar-collapse" id="example-navbar-collapse">      <ul class="nav navbar-nav">

         <li class="active"><a href="#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Java <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">jmeter</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="#">分离的链接</a></li>
               <li class="divider"></li>
               <li><a href="#">另一个分离的链接</a></li>
            </ul>
         </li>
      </ul>
   </div></nav>

4/主体响应式(xs最小,sm小,md中,lg大 最多是12份） （class加入如: col-xs-12 col-md-6可同时存在多个,表示在多大的屏幕下显示多少画面)
只需加入
<div class="container">
　　<!-- 栅格化分行需要加入row -->
　　<div class="row">
　　　　<div class="col-xs-12 col-xs-6"></div>
　　</div>
</div>


5/如果bootstrap所提供的响应式栅格系统不满足你 那么你可以在css里用媒体查询的方式自己制定响应式(采用@media)

　<style>　

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

　</style>

我们有时候也会在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

媒体查询有两个部分，先是一个设备规范，然后是一个大小规则。在上面的案例中，设置了下列的规则：

让我们来看下面这行代码：

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

对于所有带有 min-width: @screen-sm-min 的设备，如果屏幕的宽度小于 @screen-sm-max，则会进行一些处理。

大家也可以去w3c手册去查找. 或者去菜鸟教程学习:http://www.runoob.com/bootstrap/bootstrap-tutorial.html

posted @ 2016-07-26 11:34 缓慢的小蜗牛阅读(893) 评论(0) 编辑收藏举报

缓慢的小蜗牛

web响应式之bootstrap的基础用法。

公告