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

web响应式之bootstrap的基础用法。的更多相关文章

  1. web响应式图片设计实现

    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...

  2. “教你如何玩转Web响应式布局” 的更多相关文章

    “教你如何玩转Web响应式布局” 的更多相关文章 网址:http://www.360doc.com/relevant/641896074_more.shtml

  3. 响应式布局 Bootstrap

    github介绍 (1)简单灵活可用于架构流行的 用户界面和交互接口 的html.css.javascript工具集 (2)基于html5.css3的bootstrap,具有大量的诱人特征: 友好的学 ...

  4. 移动Web - 响应式布局开篇

    用到的工具: FireFox浏览器 Sublime Text 2 响应式布局定义: 2010年,Ethan Marcotte提出,可查看原文: 通俗地讲就是:百份比布局,根据不同设备显示不同布局: 这 ...

  5. 响应式布局 Bootstrap(01)

    1.是什么?Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷 Boot ...

  6. 响应式框架Bootstrap

    概念:Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 -- 强调 响应式设计的概念. 通过响应式设计,你无需再为你的网站设计一个手机版的.它在任何尺寸的屏幕上看起来都会不错. Boo ...

  7. 响应式及Bootstrap

    一丶CSS3的@media 查询 使用 @media 查询,你可以针对不同的屏幕大小定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@med ...

  8. fcc 响应式框架Bootstrap 练习2

    text-primary 属性值使标题直接变成了红色,text-center使标题直接居中 <h2 class="text-primary  text-center"> ...

  9. 响应式与bootstrap

    一.单双击问题 <body> <button>按钮</button> <script src="./jQuery.js"></ ...

随机推荐

  1. Chronometer控件实现的Android计时器

    本文为大家演示了如何使用Chronometer控件实现Android计时器的实例. 先贴上最终的实现效果图: Android计时器实现思路 使用Chronometer控件实现计器的操作.通过设置set ...

  2. [置顶] 递归 加引用 实现tree 和 无限级菜单

    <?php class k_model_menu_menu {     private $data = array();     private $rdata = array();     pr ...

  3. dubbo-RPC学习(一)自定义配置

    在dubbo的基础上实现异步调用的时候,因为需要支持回调的“重试间隔时间”与“重试次数”等属性.因此,需要扩展dubbo.xsd,需要添加新的属性来支持这种扩展. dubbo 的xsd是基于sprin ...

  4. 实例源码--Android自定义Gallery动画效果

    相关文档与源码: 下载源码   技术要点: 1.自定义控件的使用 2.Gallery控件的使用实例 3.详细的源码注释 ...... 详细介绍: 1.自定义控件的使用 本套源码通过自定义控件的方式,继 ...

  5. ConcurrentHashMap 源码解析 -- Java 容器

    ConcurrentHashMap的整个结构是一个Segment数组,每个数组由单独的一个锁组成,Segment继承了ReentrantLock. 然后每个Segment中的结构又是类似于HashTa ...

  6. 转摘:常用ubuntu 关机,重启,注销命令

    1.关机命令 shutdown 好像ubuntu的终端中默认的是当前用户的命令,只是普通用户,因此在终端器中可以使用sudo -sh 转换到管理员root用户下执行命令. 1).shutdown –h ...

  7. JMS笔记(二)

    接上篇 JMS笔记(一),启动ActiveMQ后,打开http://127.0.0.1:8161/admin管理界面,用户名admin密码admin,点击上面的Queues菜单,创建一个q_test_ ...

  8. javaweb学习总结二十(http响应)

    一:http响应 1:http响应的组成部分 状态行.响应头.空行.响应数据 2:状态行 常用状态码: 200:请求成功 302:请求路径已经转移,请访问别的地址 307或者304: 请访问缓存信息 ...

  9. MySQL同主机不同数据库的复制命令

    MySQL同主机不同数据库的复制命令:注意运行在Terminal中,不运行在MySQL命令行中. 1 mysqldump Portal_DEV -u root -ppassword1$ --add-d ...

  10. web_find和web_reg_find的用法和区别

    一.web_find()函数 该函数的作用是“在页面中查找相应的内容”,常用参数及含义如下: web_find("web_find", //定义该查找函数的名称 "Rig ...