上传时间：
Bootstrap响应式布局.
专辑名称：
专辑创建者：
视频数：35
播放次数：1,086,679
56官方微信
扫一扫发现精彩在中极其重要的一个技术内容便是响应式布局了，一次编码针对不同设备终端的强大能力使得响应式技术愈发流行。
不过正所谓“萝卜青菜各有所爱”，如果你想要使用Bootstrap开发自己的项目却又恰巧不太喜欢（或者你所设计的页面布局不允许你使用响应式技术），那么你可以通过以下方式禁用响应式布局。
禁用第一步，就是需要移除在head标签中添加的
&meta&name="viewport"&content="width=device-width, initial-scale=1.0”&
该标签的作用在于使得你的网站在移动设备端被访问的时候，不会进行缩放，而是以100%的比例显示在移动设备中。
禁用第二步，为.container类设置一个宽度，从而覆盖它根据设备宽度而自动调节的功能。
例如你可以设定.container {width: 980}，为了起到覆盖原bootstrap样式的作用，最好将你自定义的css文件在bootstrap.css文件之后引入。
删除菜单折叠
倘若你采用了导航栏，那么就要注意删掉菜单在移动端的折叠样展开式（主要通过button的navbar-toggle来实现）。
除此之外，如果你采用了栅格布局，那么就要采用.col-xs-*（最小设备栅格类）的样式来代替.col-md-*以及.col-lg-*，这样就能确保栅格能够在所有设备中展开。
通过以上几个步骤，你便可以禁用自己项目中的响应式布局，还等什么？快试试吧！
佚站互联 YEAHZAN，创新团队。本文版权所有，转载时请注明出处。
对此文章有疑问？可以留言提问，或者通过
我们来获得帮助。Bootstrap技术交流群：
Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。
根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。
Bootstrap中文网联合又拍云存储共同推出了开放CDN服务，我们对广泛的前端开源库提供了稳定的存储和带宽的支持，例如Bootstrap、jQuery等。
Bootstrap优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。
gulp.js - 基于流(stream)的自动化构建工具。Grunt 采用配置文件的方式执行任务，而 Gulp 一切都通过代码实现。
LESS为CSS赋予了动态语言的特性，如变量、继承、运算、函数。LESS既可以在客户端上运行 (支持IE 6+、Webkit、Firefox)，也可以借助Node.js或者Rhino在服务端运行。
Lodash 是一个具有一致接口、模块化、高性能等特性的 JavaScript 工具库。比相同功能的 Underscore.js 使用更广泛。
Underscore.js是一个 JavaScript 工具库，它提供了一整套函数式编程的实用功能，弥补了 jQuery 没有实现的功能，同时又是 Backbone 必不可少的部分。
Buttons 是一个基于 Sass 和 Compass 构建的CSS按钮（button）样式库，图标采用的是，可以和Bootstrap融合使用。
stickUp能让页面目标元素“固定”在浏览器窗口的顶部，即便页面在滚动，目标元素仍然能出现在设定的位置。
响应式导航（Responsive Nav）是一个很小的JS插件，压缩之后仅有1.7KB，能帮你创建针对小屏幕的可切换式导航
Unslider & 一个超小的 jQuery 轮播（slider） 插件。支持主流浏览器、键盘导航、自动调整高度和响应式布局。
Flat UI是基于Bootstrap做的Metro化改造，由提供。Flat UI包含了很多Bootstrap提供的组件，但是外观更加漂亮。在此强烈推荐！
LayoutIt! 可拖放排序在线编辑的Bootstrap可视化布局系统。由同学汉化整理。
Bootstrap Switch是对Bootstrap控件的扩充。基于选HTML中基本的选择框控件实现只有开和关两种状态的单选按钮。
由于大部分的Bootstrap js插件是无法扩展的，因此才有了sco.js，它是对Bootsrap中js插件的增强实现。
iCheck让不同浏览器下的复选框（checkboxes）和单选按钮（radio button）更美观、功能更强。
bootstrap-wysiwyg是一个jQuery Bootstrap插件（5KB, & 200 行代码）可以将任何一个DIV转变成一个WYSIWYG富文本编辑器。
Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。
Preboot是一组用LESS语法书写的混合（mixin）和变量（variable）的集合，目的是辅助用户书写更优美的CSS。Bootstrap的前身就是Preboot。
jQuery.Pin 能将任意页面元素“钉”在某个容器顶部，而且在尺寸小的屏幕上能够自动禁用这种效果。
Bsie弥补了Bootstrap对IE6的不兼容。目前，bsie能在IE6上支持大部分bootstrap的特性，可惜，还有一些实在无法支持...
Messenger是一个非常酷的弹框(Alert)组件，能够非常好的与Bootstrap融合，当然，单独使用效果也是非常棒。Messenger自带4套皮肤。
Bootstrap日期时间选择器（Bootstrap DateTime Picker）是一个Bootstrap组件，能够简化页面上日期、时间的输入。
这套工具让你在使用jQuery UI 控件时也能充分利用Bootstrap的样式，而且不会出现样式不统一的现象，Bootstrap和jQuery UI可以完美融合在一起了！
Google的UI素来以简洁著称，现在Bootstrap也来Google Style一把，喜欢Google的就来试试这套Google Bootstrap吧！
Metro UI CSS 是一套用来创建类似于Windows 8 Metro UI风格网站的样式。现在，Metro UI CSS项目在Bootstrap的基础上被开发成一个独立的解决方案。
Font Awesome 中包含的所有图标都是矢量的，也就可以任意缩放，避免了一个图标做多种尺寸的麻烦。CSS对字体可以设置的样式也同样能够运用到这些图标上了。
Simple Icons -- Icon汇。收集众多网站的Logo，并提供高质量、不同尺寸的png格式图片给广大网友，所有Icon版权归其所属公司。
Bootstrap 在线表单构造器能够以鼠标拖拽的方式迅速生成一个基于Bootstrap的完整表单，减轻了各位码农手写HTML代码的劳动，而且不会出错。
HTML5 Boilerplate 是一套专业的前端模版，用以开发快速、健壮、适应性强的app或网站。
本表中列出的是WEB设计、开发中常用安全色。列于此是为了方便大家参考。
这里收集了Bootstrap从V1.0.0版本到现在，整个文档的历史。Bootstrap本身就是一个传奇，而这些文档就是传奇的见证！
Git简易指南 -- 帮助你开始使用 git 的简易指南，木有高深内容，;)。
一个气泡形状的提示（Tooltip）控件，可以在其围绕的元素周围做360度任意定位。
Cikonss是纯CSS实现的响应式Icon，兼容IE8+。
Headroom.js 是一个轻量级、纯 JavaScript 组件，用来隐藏或展现页面上的元素，为你的页面留下更多展示内容的空间。
Grunt是基于Node.js的项目构建工具。它可以自动运行你所设定的任务。Grunt拥有数量庞大的插件，几乎任何你所要做的事情都可以用Grunt实现。
Zepto.js 是一个轻量级、兼容 jQuery 的 JavaScript 工具库。jQuery Bootstrap响应式下拉菜单 | HTML5资源教程当前访客身份：游客 [
也许多少年后在某个地方，我将轻声叹息将往事回顾：一片树林里分出两条路——而我选择了人迹更少的一条，从此决定了我一生的道路。
：我擦-_-#
今日访问：0
昨日访问：14
本周访问：0
本月访问：41
所有访问：5710
bootstrap响应式导航栏
发表于1年前( 11:42)&&
阅读（4955）&|&评论（）
0人收藏此文章,
为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes&.collapse、.navbar-collapse&的 &div& 中。折叠起来的导航栏实际上是一个带有 class&.navbar-toggle&及两个 data- 元素的按钮。第一个是&data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是&data-target，指示要切换到哪一个元素。三个带有 class&.icon-bar&的 &span& 创建所谓的汉堡按钮。这些会切换为.nav-collapse&&div& 中的元素。为了实现以上这些功能，您必须包含&。
&!DOCTYPE&html&
&&&&title&Bootstrap&实例&-&响应式的导航栏&/title&
&&&&link&href="/bootstrap/css/bootstrap.min.css"&rel="stylesheet"&
&&&&script&src="/scripts/jquery.min.js"&&/script&
&&&&script&src="/bootstrap/js/bootstrap.min.js"&&/script&
&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&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&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&
如上所述，data-toggle用于告诉 JavaScript 需要对按钮做什么，&data-target指示要切换到哪一个元素。三个带有 class&.icon-bar&的 &span& 创建所谓的汉堡按钮。
.navbar-toggle {
& position:
& padding: 9px 10
& margin-top: 8
& margin-right: 15
& margin-bottom: 8
& background-color:
& background-image:
& border: 1
& border-radius: 4
.navbar-toggle:focus {
& outline: 0;
.navbar-toggle .icon-bar {
& display:
& width: 22
& height: 2
& border-radius: 1
.navbar-toggle .icon-bar + .icon-bar {
& margin-top: 4
(min-width: 768px) {
& .navbar-toggle {
& & display:
.sr-only {
& position:
& width: 1
& height: 1
& padding: 0;
& margin: -1
& overflow:
& clip: rect(0, 0, 0, 0);
& border: 0;
.sr-only-focusable:active,
.sr-only-focusable:focus {
& position:
& margin: 0;
& overflow:
.navbar-toggle .icon-bar {
& display:
& width: 22
& height: 2
& border-radius: 1
.navbar-toggle .icon-bar + .icon-bar {
& margin-top: 4
.navbar-default .navbar-toggle .icon-bar {
& background-color: #888;
.navbar-inverse .navbar-toggle .icon-bar {
& background-color: #
2、项目列表被包裹在了一个另外增加的&div&中
&div&class="collapse&navbar-collapse"&id="example-navbar-collapse"&
.collapse {
& display:
.navbar-collapse {
& padding-right: 15
& padding-left: 15
& overflow-x:
& -webkit-overflow-scrolling:
& border-top: 1
& -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
& & & & & box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
(min-width: 768px) {
& .navbar-collapse {
& & width:
& & border-top: 0;
& & -webkit-box-shadow:
& & & & & & box-shadow:
& .navbar-collapse.collapse {
& & display: block !
& & height: auto !
& & padding-bottom: 0;
& & overflow: visible !
(max-width: 480px) and (orientation: landscape) {
& .navbar-fixed-top .navbar-collapse,
& .navbar-fixed-bottom .navbar-collapse {
& & max-height: 200
更多开发者职位上
1)">1)">1" ng-class="{current:{{currentPage==page}}}" ng-repeat="page in pages"><li class='page' ng-if="(endIndex<li class='page next' ng-if="(currentPage
相关文章阅读