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

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

<!--meta:vp 响应式布局-->
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<!--meta:compat IE7兼容-->
<meta http-equiv="X-UA-Compatible" content="IE=7"/>

 

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

<link rel="stylesheet" href="css/bootstrap.css">

<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>

<!--自己的css js 可以放在这里 -->

<link rel="stylesheet" href="a.css">
<script src="a.js"></script>

 

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

转载于:https://www.cnblogs.com/wbingo/p/5706875.html