Bootstrap 教程
Bootstrap 响应式设计
本教程讲解如何在网页布局中应用响应式设计。在课程中，您将学到响应式 Web 设计。随着移动设备的普及，如何让用户通过移动设备浏览您的网站获得良好的视觉效果，已经是一个不可避免的问题了。响应式 Web 设计就是为实现这个目的的有效方法。
响应式 Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。例如，您先在计算机显示器上浏览一个网站，然后再智能手机上浏览，智能手机的屏幕尺寸远小于计算机显示器，但是你却没有感觉到任何差别，两者的用户体验几乎一样，这说明这个网站在响应式设计方面做得很好。
我们已经在我们的中应用了，并请您在不同的屏幕尺寸下进行浏览。您可以通过
的窗口大小调整的扩展来调整浏览器。
点击这里，可以查看 。
为了应用响应式 Web 设计，您需要创建一个包含适应各种设备尺寸样式的 CSS。一旦页面在特定的设备上加载，该页面上使用了各种字体和 Web 开发技术，比如媒体查询（Media Queries），此时，会先检测设备的视口大小，然后加载特定于设备的样式。
我们将通过 'bootstrap-responsive.css' 的学习，来了解"响应式设计"是如何实现细微差别的。在这之前，您必须在网页的头部区域加入下面这行代码：
&meta name="viewport" content="width=device-width, initial-scale=1.0"&
视口的 meta 标签，重写了默认的视口，并帮助加载与特定视口相关的样式。
width 属性设置屏幕宽度。它包含一个值，比如 320，表示 320 像素，或者值为 'device-width'，用来告诉浏览器使用原始的分辨率。
initial-scale 属性是视口最初的比例。当设置为 1.0 时，将呈现设备的原始宽度。
当然，您必须添加 Bootstrap 的响应式 CSS，如下所示：
&link href="assets/css/bootstrap-responsive.css" rel="stylesheet"&
现在，如果您查找响应式 CSS 文件，您会发现，在一些公共的声明后边（从行号 10 到 22），有各种以 '@media' 开始的区域。这就是如何编写适用于各种设备的样式。
第一个区域以 '@media (max-width: 480px)' 开始，为最大宽度为 480 像素的设备设置样式。
第二个区域以 '@media (max-width: 767px)' 开始，为最大宽度为 767像素的设备设置样式。
第三个区域以 '@media (min-width: 768px) 和 (max-width: 979px)' 开始，为最小宽度为 768 像素和最大宽度为 979 像素的设备设置样式。
下一个区域是为最大宽度为 979 像素的设备设置样式。所以是以 '@media (max-width: 979px)' 开始。
最后两个区域分别以 '@media (min-width: 980px)' 和 '@media (min-width: 1200px)' 开始，前一个是为最小宽度为 980 像素的设备设置样式，后一个是为最小宽度为 1200 像素的设备设置样式。
所以，这样样式表的基本作用就是，通过使用 'min-width' 和 'max-width' 属性，来根据设备的最大宽度和最小宽度决定使用的样式。
为了让布局更具响应性，Bootstrap 做了三件事情：
1. 修改了网格中列的宽度。
2. 只要有需要，它就使用堆栈元素，而不是浮动元素。如果您还不清楚什么是堆栈元素，下面来自 w3.org 的表单可能会提供一些帮助：
根元素（html）形成了堆栈上下文的根，其他堆栈上下文通过任意定位的元素生成（包括相对定位元素，有一个 'z-index' 的计算值，而不是 'auto'）。堆栈上下文相对与包含的块不是必需的。
3.要正确地渲染标题和文字它们的尺寸。
Bootstrap 有几个实用的用于开发对移动设备友好的布局的类。这些类可在 'responsive.less' 上看到。
.visible-phone，在宽度为 767px 及以下的手机上可见，在 979px 到 768px 的平板上隐藏不可见，在桌面上隐藏不可见，这是默认的。
.visible-tablet，在宽度为 767px 及以下的手机上隐藏不可见，在 979px 到 768px 的平板上可见，在桌面上隐藏不可见，这是默认的。
.visible-desktop，在宽度为 767px 及以下的手机上隐藏不可见，在 979px 到 768px 的平板上隐藏不可见，在桌面上可见，这是默认的。
.hidden-phone，在宽度为 767px 及以下的手机上隐藏不可见，在 979px 到 768px 的平板上可见，在桌面上可见，这是默认的。
.hidden-tablet，在宽度为 767px 及以下的手机上可见，在 979px 到 768px 的平板上隐藏不可见，在桌面上可见，这是默认的。
.hidden-desktop，在宽度为 767px 及以下的手机上可见，在 979px 到 768px 的平板上可见，在桌面上隐藏不可见，这是默认的。
反馈内容（*必填）
截图标记颜色
联系方式(邮箱)
联系邮箱：
投稿页面：
记住登录状态
重复输入密码【细解】如何基于bootstrap创建一个响应式的导航条
shirleyqin216
发布时间: 10:13:09
最终实现效果如下:
首先你得引入bootstrap与jquery
推荐一个CDN:
然后就是开始编写HTML代码.如果你不想更改显示效果的话实际上CSS都免去写了2333
因为HTML代码比较多 这里分为三个部分 然后最后再上一份整体HTML代码
首先如上图所示的,实现这个效果需要了解bootstrap的以下几个组件
实际上以上几个组件的样式有很多.我们只需要了解一部分即可 如需了解更多的请转自进行了解
PS:class{}这里仅仅是注释并不是HTML代码
PS2:提供了HTML文件与一个在线的案例调试
导航条与导航条LOGO布局
&!--创建一个bootstarp导航条以及导航LOGO布局--&
&nav class="navbar navbar-default"&
&div class="navbar-header"&
&!--创建一个按钮--&
&!--class{
navbar-toggle:向js传递这个按钮是可以点击的
collapsed:不结合navbar-collapse那就是一个默认class..不加貌似也没发现什么bug.
data-toggle="collapse":引入collapse插件
data-target="#navbar-gbtag":当点击按钮的时候跳转/打开哪一个标签
aria-expanded="false":辅助性阅读功能..针对特殊人群的设置--&
&button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-gbtag" aria-expanded="false"&
&!--在按钮上添加一些图标和说明
sr-only:隐藏这个标签
incon-bar:图标样式
动手改一下图标样式为glyphicon glyphicon-star试试
&span class="sr-only"&点我啊&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&div class="form-group"&
&!--class{
form-control:设置宽度为100%但是我们在父级元素form设置了navbar-form所以宽度会得到一定的控制
&input type="text" class="form-control" placeholder="搜索" /&
&/div&&!--表单组--&
&button type="submit" class="btn btn-default"&搜索&/button&
&/form&&!--表单--&
&li class="dropdown"&
&!--class{
dropdown-toggle:声明这是一个可以下拉的列表..实际上我没发现这个class的具体用途.取消也未发现什么bug
span .caret{
一个小三角的图标
data-toggle="dropdown" :引入下拉菜单组件的一个必要的属性
role="button":起辅助声明作用.声明这个是一个按钮--&
&a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&下拉菜单名称&span class="caret"&&/span&&/a&
&ul class="dropdown-menu"&
&li&&a href=""&bootstrap&/a&&/li&
&!--class{
divider:分隔线样式
role="separator":声明这个元素为一个分隔线--&
&li role="separator" class="divider"&&/li&
&li&&a href=""&请关注极客标签&/a&&/li&
&/ul&&!--下拉菜单--&
&完整内容请参见链接：
来源:/gbtags/p/4698873.html}