响应式网站导航代码（响应式网页设计代码）
本文目录一览：
Bootstrap响应式导航由768px变成992px的实现代码
废话不多说了，直接给大家贴代码了，具体代码如下所示：
!--响应式导航部分--
header
role="banner"
nav
role="navigation"
class="c95a-7b42-3296-55a0 navbar
navbar-static-top
navbar-default"
div
class="7b42-3296-55a0-0677 container
"
div
class="3296-55a0-0677-fd24 navbar-header"
!--设置手风琴式的navbar，然后类navbar-toggle包装在屏幕大于992px，隐藏--
button
type="button"
class="55a0-0677-fd24-70cb navbar-toggle"
data-toggle="collapse"
data-target="#navbar-collapse"
!--这里的span.icon-bar
是用来在按钮中画三条线--
span
class="0677-fd24-70cb-f681 icon-bar"/span
span
class="fd24-70cb-f681-5b5f icon-bar"/span
span
class="70cb-f681-5b5f-71d6 icon-bar"/span
/button
a
class="f681-5b5f-71d6-8b55 navbar-brand"
href="index.html"
rel="external
nofollow"
rel="external
nofollow"
img
src="img/logo.png"
alt="Bootstrappin'"
width="120"/a
!--这里的商标图一定要设置宽度--
/div
!--这里的类collapse保证默认包裹的菜单是隐藏的，如果
替换为
in
则显示--
div
class="5b5f-71d6-8b55-ffb9 navbar-collapse
collapse"
id="navbar-collapse"
ul
class="71d6-8b55-ffb9-7ccd nav
navbar-nav"
li
class="8b55-ffb9-7ccd-8a7a active"a
href="index.html"
rel="external
nofollow"
rel="external
nofollow"
span
class="1d1a-87e0-6511-df4a icon
fa
fa-home
"/span
Home/a/li
lia
href="#"
rel="external
nofollow"
rel="external
nofollow"
rel="external
nofollow"
span
class="87e0-6511-df4a-c95a icon
fa
fa-desktop"/span
Portfolio/a/li
lia
href="#"
rel="external
nofollow"
rel="external
nofollow"
rel="external
nofollow"
span
class="6511-df4a-c95a-7b42 icon
fa
fa-group
"/span
Team/a/li
lia
href="#"
rel="external
nofollow"
rel="external
nofollow"
rel="external
nofollow"
span
class="df4a-c95a-7b42-3296 icon
fa
fa-envelope
"/span
Contact/a/li
/ul
/div!--/.nav-collapse
--
/div!--/.container
--
/nav
/header
这是我跟着做的一个实例，看上面第一个注释，button定义了类navbar-toggle。navbar-toggle其中的一个样式是媒体查询。
//bootstrap.css
@media
(min-width:
992px)
{
.navbar-toggle
{
display:
none;
}
}
然后我又查看了下navbar.less文件。发现
//navbar.less
.navbar-toggle
{
position:
relative;
float:
right;
margin-right:
@navbar-padding-horizontal;
padding:
9px
10px;
.navbar-vertical-align(34px);
background-color:
transparent;
border:
1px
solid
transparent;
border-radius:
@border-radius-base;
//
Bars
.icon-bar
{
display:
block;
width:
22px;
height:
2px;
border-radius:
1px;
}
.icon-bar
+
.icon-bar
{
margin-top:
4px;
}
@media
(min-width:
@grid-float-breakpoint)
{
//@grid-float-breakpoint
display:
none;
}
}
//variables.less
@grid-float-breakpoint:
@screen-sm-min;
//想要改成992px这里就要用这个
@grid-float-breakpoint:
@screen-md-min;
//--------
@screen-sm:
768px;
@screen-sm-min:
@screen-sm;
@screen-md:
992px;
@screen-md-min:
@screen-md;
@screen-desktop:
@screen-md-min;
//
Large
screen
/
wide
desktop
//
Note:
Deprecated
@screen-lg
and
@screen-lg-desktop
as
of
v3.0.1
@screen-lg:
1200px;
@screen-lg-min:
@screen-lg;
@screen-lg-desktop:
@screen-lg-min;
所以，如果你想修改默认的折叠断点，就将上面的媒体查询变量
@grid-float-breakpoint:
@screen-sm-min;
修改为其他Bootstrap定义的断点，当然也可以自定义一个断点变量。然后重新编译为css文件即可。
注：最好把
variables.less
复制一份为
_variables.lss。navbar.less
复制一份
_navbar.less。然后在复制的文件上修改。最后将
bootstrap.less
复制一份
__bootstrap
将其中的导入
//__bootstrap.less
//@import
"navbar.less";
@import
"_navbar.less";
//@import
"variables.less";
@import
"_variables.less";
修改完，编译自定义的
__bootstrap.less
即可。
以上所述是小编给大家介绍的Bootstrap响应式导航由768px变成992px的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
响应式网站需要什么代码
响应式网站是指网站样式根据屏幕大小自适应，基本的HTML结构不变，不同屏幕应用不同的css代码，可以用媒体查询，也就是@media这个来做。
举例：
@media screen and ( a href=";tn=44039180_cprfenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBPHK-uHmYmvFbPAwhnAfv0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3ErjT1PWf4PjnknWRkrHnYP1Tz" target="_blank" class="c95a-7b42-3296-55a0 baidu-highlight"max-width/a:960px ){
body{ background-color:red; }}@media screen and ( a href=";tn=44039180_cprfenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBPHK-uHmYmvFbPAwhnAfv0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3ErjT1PWf4PjnknWRkrHnYP1Tz" target="_blank" class="7b42-3296-55a0-0677 baidu-highlight"max-width/a:480px ){ body{ background-color:blue; }}
在不同的屏幕大小下显示不同的颜色，你可以缩放浏览器窗口查看一下效果。
html5 怎么制作响应式网页
步骤1 创建空白的HTML 5模版
首先，我们创建一个空白的模版，代码很简单，如下所示：
复制代码
步骤2 增加HTML 5新标签 HTML 5中新增加了不少标签，如：
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
在页面模版中，我们需要确保每个区域都能正确地对齐，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer这些标签。代码如下所示：
复制代码
读者可能留意到这里使用的div id=”wrapper”，这个是稍候用来做meida query的时候调整全局CSS样式调整用的 步骤3 往HTML 5标签中增加代码
1）首先往标题中增加如下代码：
Simple HTML5 Template
复制代码
2）往导航标签中添加如下代码，这样很方便地构件了一个简单的页面分类导航：
Home About Parent Page Child
One Child Two with child Child One Child
Two Child Three Child Three
Contact
复制代码
3）使用标签来描述每一个要展示的内容实体,比如要展示的是多篇文章列表,其中的每一篇文章的具体内容就可以使用标签了。如下代码所示：
This is a title for post
Richard KS 20th March 2013 Tutorials HTML5, CSS3
and Responsive 10 Comments Lorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s
复制代码
4）添加标签 HTML5提供的元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。
根据目前的规范，元素有两种使用方法：
被包含在中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。
在之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。
代码如下：
Categories Category 1 Category 2
Parent Category Child One Child Two
Grandchild One Grandchild Two Grandchild Three
Child Three Category 3
Text Lorem Ipsum is simply dummy
text of the printing and typesetting industry.
复制代码
5）加上最后的标签，代码为：
Copyright@ 2013 HTML5.com Privacy Policy - About Us
复制代码
步骤4 增加CSS样式
首先创建一个空白的样式，如下：
[/code] 然后在中下载这个css,然后将其内容复制到该空白的文件中代码如下： [code]body {
font-family: arial, sans-serif;
font-size: 100%; /* best for all browser using em */
padding:0;
margin:0;
}
*, html { line-height: 1.6em; }
article img { width:auto; max-width:100%; height:auto; }
.sidebar a, article a, header a, footer a { color: #C30; }
header a { text-decoration: none; }
#wrapper {
font-size: 0.8em; /* 13px from 100% global font-size */
max-width: 960px; /* standard 1024px wide */
margin: 0 auto;
}
/* css for */
header { padding: 1em 0; margin: 0px; float: left; width: 100%;
}
header hgroup { width: 100%; font-weight:normal; }
/* css for */
nav
{ display: block; margin: 0 0 2em; padding: 0px;
float: left; width: 100%; background-color: #181919;
}
nav ul ul {display: none;}
nav ul li:hover ul {display: block;}
nav
ul { padding: 0; list-style: none; position:
relative; display: inline-table; z-index: 9999;
margin: 0px; float: left; width: 100%;
}
nav ul:after {content: ""; clear: both; display: block;}
nav ul li {float: left;}
nav ul li:hover a {color: #fff;}
nav
ul li a { display: block; padding: 1em; font-size:
1.125em; color: #ccc; text-decoration: none;
margin: 0px; background-color: #000; border-right: 1px
solid #333;
}
nav ul li:last-of-type a {border-right: 1px solid transparent !important;}
nav
ul ul { background: #5f6975; border-radius: 0px;
padding: 0; position: absolute; top: 100%; width:
auto; float: none;
}
nav ul li:hover { background: #5f6975; color: #FFF;
}
nav ul ul li a:hover { background-color: #4b545f;
}
nav ul ul li {
float: none;
border-bottom: 1px solid #444240;
position: relative;
}
nav ul ul li a {
padding: 0.5em 1em;
font-size: 1em;
width:10em;
color: #fff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
/* css for */
section.content { width: 70%; float:left; }
.content article { width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; }
article .entry { clear:both; padding: 0 0 1em; }
h1.post-title { font-size: 1.8em; margin:0; padding:0;}
.entry.post-meta { color: #888; }
.entry.post-meta span { padding: 0 1em 0 0; }
.entry.post-content { font-size: 1.125em; margin:0; padding:0;}
/* css for */
aside.sidebar { width: 25%; float:right; }
aside.sidebar ul { width:100%; margin: 0px; padding: 0px; float: left; list-style: none;
}
aside.sidebar
ul li { width:100%; margin: 0px 0px 2em; padding:
0px; float: left; list-style: none;
}
aside.sidebar ul li ul li { margin: 0px 0px 0.2em; padding: 0px;
}
aside.sidebar
ul li ul li ul li { margin: 0px; padding: 0px 0px 0px
1em; width: 90%; font-size: 0.9em;
}
aside.sidebar
ul li h3.widget-title { width:100%; margin: 0px;
padding: 0px; float: left; font-size: 1.45em;
}
/* css for */
footer { width: 98%; float:left; padding: 1%; background-color: white; margin-top: 2em;
}
footer .footer-left { width: 45%; float:left; text-align:left; }
footer .footer-right { width: 45%; float:right; text-align:right; }
复制代码
步骤5 为移动应用使用@media query查询 为了进行响应式设计，最佳的方案是使用@media query去进行查询，在上面的CSS代码中添加如下代码：
/* ipad 768px */
@media only screen and (min-width:470px) and (max-width:770px){
body { background-color: red; } #wrapper { width:96%; font-size: 0.6875em; }
section.content, aside.sidebar { width:100%; }
}
/* iphone 468px */
@media only screen and (min-width:270px) and (max-width:470px){
body { background-color: yellow; } #wrapper { width:96%; font-size: 0.6875em; }
section.content, aside.sidebar { width:100%; }
}
复制代码
步骤6 增加jquery,modernizer和html5shiv到标签中 这里推荐使用Modernizr 和html5shiv，它们都是一个能在多种浏览器中通过运行各种脚本兼容运行支持大部分HTML 5标签的插件。我们将它们和jQuery库放在标签前，代码如下：
复制代码
Dreamweaver中响应式网页代码如何写
默认一个固定宽度为980px的网页，当浏览器窗口比980px小的时候，这个布局就变为100%比宽度的液态布局，而不是固定宽度。当浏览器窗口再缩小于700px的时候，我们就隐藏侧边栏。当窗口小于480px的时候，横向导航条隐藏，换成点击下拉效果的导航条。
如上图，从左至右依次为移动版本—平板电脑—桌面浏览器的效果。
1、响应式网页结构
首先，我们先来看下上面案例展示的html结构，如下图所示：
可以说这是一个很典型的博客模版结构。一个wrapper容器包含了头部、内容、侧栏、底部。
2、Meta标签
其次就需要我们针对移动设备加入这个meta标签。告诉webkit内核浏览器初始缩放比例为1。（很多iOS和Android的浏览器都是基于webkit内核的）
meta name="viewport" content="width=device-width; initial-scale=1.0"
IE8或者更早的浏览器并不支持Media Query。你可以使用media-queries.js或者respond.js来为IE添加Media Query支持。
!--[if lt IE 8]
script src=""/script
![endif]--
如果你的网站页面中用了html5文档声明，用到了很多html5标签，但是这些标签在ie9以下版本是不支持的，所以我们必须引用一个html5.js文件使得这些标签被其它低版本浏览器确认。
!--[if lt IE 9]
script src=""/script
![endif]--
3、媒介查询-Media Queries
在这里马海祥就不再详细的讲正常页面下的布局如何写了。在此主要讲解下媒体查询media queries这个css的设计思路。这个是css3的属性，也是我们这个响应式网页设计的最重要的部分。可以说是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。
link href="media_queries.css" rel="stylesheet" type="text/css"
下面我们用CSS3的媒介查询（Media Query）特性使得网页适应不同设备，即根据设备的分辨率和缩放自动重新布局。
@media screen and (max-width: 480px) {
这里就是重新设定一些css的属性
}
（1）、当浏览器视图宽度为小于等于980像素时，如下规则将会生效。基本上，我会将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。
#pagwraper { width: 94%;}重新设定容器宽度为94%;
#content { width: 65%; padding: 3% 4%;}重新设定内容宽度为65%;
#sidebar { width: 30%;}重新设定侧边栏宽度为30%
注意这里我们用到了%，使得页面是一个流体布局。
（2）、当浏览器视图宽度为小于等于700像素时，视图指定#content和#sidebar的宽度为自适应并且清除浮动，使得这些容器按全宽度显示。
#content { width: auto;float: none;margin: 20px 0;}
#sidebar { display:none; width: 100%; margin: 0; float: none; }
容器宽度继承了上面94%的宽度，这个时候我们设定内容宽度为自动，使其填满外部的wraper容器。并清除其浮动样式。这个时候的浏览的页面，可以权衡下右边侧栏的重要程度，如果觉得有必要继续在页面中显示，我们可以清除其浮动，并把宽度也设为100%，这样就在content这个容器下显示。但马海祥觉的一般情况下，在这么小的浏览窗口中，用户只想看到最主要的内容，右边侧栏成为了一个补助模块，那么可以直接把它隐藏掉。这样可以减少页面的高度。
（3）、当浏览器窗口小于等于480px的时候，一般这个就是iPhone的横向宽度。就要将#header元素的高度设置为自适应，将h1的字体大小修改为24像素并隐藏侧边栏。
首先我们设计webkit内核浏览器下禁用文字大小调整，代码如下：
html { -webkit-text-size-adjust: none; }
其次就是代码的转换了，如下图所示：
其实在480px宽度下的时候，整体框架布局已经不用设置，马海祥认为我们应该考虑得更多的是怎么把一个良好的页面布局展示给用户。而在这个模式下，如果导航条有很多选项的时候，就会相互堆叠换行，那么这里我们设计成点击出下拉菜单形式，如下图所示：
这里我们首先考虑在小设备窗口下header太高已经占据了大半的屏幕显示，所以这里我们重新设定下header的高度，能完整呈现出这个站点logo就可以了。在480px小设备窗口下浏览，页面内容会很长，这个时候我们要在底部加个返回页面顶部的按钮。
