BootStrap创建响应式导航条实例代码_javascript技巧_第1页
BootStrap创建响应式导航条实例代码_javascript技巧_第2页
BootStrap创建响应式导航条实例代码_javascript技巧_第3页
BootStrap创建响应式导航条实例代码_javascript技巧_第4页
BootStrap创建响应式导航条实例代码_javascript技巧_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、bootstrap创建响应式导航条实例代码qqqqq>o t>12700.3( * 018 q=m 打xot网it大全a童戏42工作奇用 nfb game 字习:百度云回* o rc4zjk根吝标基 amoui gbiaa ft?湃soul<b手机收藏c 白田 :8( f v谷歌£网址大全奠游戏中心工作专用找图game极客标签relsoulgbt ag下拉菜单名称搜索搜索首先你得引入bootstrap与jqucry 推荐一个 cdn:http:/cdn. gbtags. com/index, html然后就是开始编写html代码.如果你不想更改显示

2、效果的话实际上css都免去写 了 2333因为html代码比较多 这里分为三个部分 然后最后再上一份整体html代码首先如上图所示的，实现这个效果需要了解bootstrap的以下几个组件导航条按钮表单下拉菜单实际上以上几个组件的样式有很多我们只需要了解一部分即可如需了解更多 的请转自http:/www. gbtags com/api/bootstrap3 2/bootstrap-doc/components/index .html进行了解ps:class这里仅仅是注释并不是html代码ps2:提供了 html文件与一个在线的案例调试导航条与导航条logo布局<!-创建一个boots ta

3、rp导航条以及导航logo布局-><nav class=navbar navbar-defau 11><div class二"navbar-header>/do sth</div></nav>导航按钮!一创建一个按钮一><!-class navbar-toggle:向js传递这个按钮是可以点击的 collapsed:不结合navbar-collapse那就是一个默认class.不加貌似也没发现 什么bug. data-togglc="collapsc ：引入 collapse 插件 data-target二&

4、quot;#navbdt-gbtag：当点击按钮的时候跳转/打开哪一个标签 afia-expanded二 false ：辅助性阅读功能.针对特殊人群的设置->button type二button" class="navbar-toggle collapsed" data-toggle二collapse" data-target=“#navbar-gbtag" aria-expanded二"false"<! -在按钮上添加一些图标和说明classsr-only:隐藏这个标签ineon-bar:图标样式动手改一下图标

5、样式为glyphicon glyphicon-star试试-><span class二"sr-only>点我啊/span><span class=/zicon-barz，x/span><span class二icon-bar>/span><span classicon-barx/span></button>表单<div c 1 ass=/zform-group，z><!-classform-control :设置宽度为但是我们在父级元索form设置了 navbar-form所以 宽度会得到

6、一定的控制->input type二"text" class二"fomi-control" placeholder/搜索"/> </div><!-表单组-><button type二"submit" class二btn btn-defaultz，>®</button> </formx! -表单->卜拉菜单<li class二dropdown"<!-classdropdown-toggle:声明这是一个可以下拉的列表实际上我

7、没发现这个class 的具体用途取消也未发现什么bugspan . caret一个小三角的图标图片样式data-toggle二"ch、opdown :引入下拉菜单组件的一个必要的属性 role二button":起辅助声明作用.声明这个是一个按钮-><a href 二 # cl ass 二"dropdown - toggle" data-toggl e=z<dropdownz，role二"buttort aria-haspopup=，truez，aria-expanded二"false"下拉菜单名称 <

8、span class=/zcarct，x/span></a><ul cl as s=/，clropdown-menu'<li><a href=z/z/>bootstrap</a></li><!-classdivider:分隔线样式role二"separator":声明这个元素为一个分隔线-> <li role二"separator" class=/zdividerz，></li> <li><a href二">

9、;请关注极客标签</a></li> </ul><!下拉菜单->总体实现的html<!doctype html><html><head><meta charset二"utf-8><title>响应式导航条</title><link rel二"stylesheet" type二"text/css href二./css/bootstrap. min. css"/><script src二jqueryt. 9. 1.

10、 min. js type二text/javascript" charset=，utf-8，z></script><script src=z， /js/bootstrap min. js type=，text/javascript charset二"utf-8">/script></head><body><!-创建一个bootstarp导航条->nav class=，navbar navbar-dcfault，z><!-创建一个bootstrap全屏布局-><div c

11、lass二"container-fluid><!-创建一个 bootstraplogo 布局-><!-注意：必须要创建navbar-header,把ogo以及响应式按钮给包裹进去. 否则大家删除下navbar-headcr缩小屏幕点击下拉菜单就知道了-><div class二navbar-headerz，><div class=navbar-brand/z><p>极客标签</p></div>创建一个按钮classnavbar-toggle:向js传递这个按钮是可以点击的collapsed:不结合

12、navbar-collapse那就是一个默认class.不加貌似也没 发现什么bug.data-toggle二"collapse":引入 collapse 插件data-target=，/#navbar-gbtag，/：当点击按钮的时候跳转/打开哪一个标签 aria-expanded=，falsez，:辅助性阅读功能针对特殊人群的设置-> <button type二buttoclass二avbar-toggle collapsed" data-toggle二col lapse" data-target=#navbar-gbtagz， aria

13、-cxpandcd=，falsc，><!在按钮上添加一些图标和说明class sr-only:隐藏这个标签 i neon-bar:图标样式 动手改一下图标样式为glyphicon glyphicon-star试试-><span class二2工、-0111丫>点我啊/span<span classicon-barx/span><span class=/zicon-barz，></span><span class=，icon-bar，></span></button></div>创建

14、导航条元素布局classcollapse:配合navbar-collapse按钮默认是否展开 如杲取消collapse那 么按钮默认就是展开的navbar-collapse:导航条元素布局必须的classid:与按钮的 data-targe 一致-><di v cl ass 二 col lapse n avbarcol lapsez， id二 avbargbtagz，><! -创建导航条内部元素classnav :创建导航条内部元素的一个必须的基类navbar-nav:这点不好解释.因为翻了一下官方文档并没有说的特别详细 这 里稍微说一下，:使ul水平居中横排排列.同时

15、宽度为内容宽度不会挤下后面的元素如 fomi;等最后大家可以删除这个class试试就知道作用了navbar-right:导航条排列的类-><ul cl ass二"nav navbar-navz，><!-classactive:默认点击， dropdown:仓ij建一个下拉菜单所需要的基类-><1i class=active><a href=，>rclsoul</a></li><li><a href=，/，>gbtag</a></li><li class二

16、dropdown"<!-class dropdown-toggle:声明这是一个可以下拉的列表实际上我没发现这个 class的具体用途.取消也未发现什么bugspan . caret一个小三角的图标图片样式 data-toggle=，dropdown，/ :引入下拉菜单组件的一个必要的属性 role二"button":起辅助声明作用声明这个是一个按钮-><a href=“# class二dropdown-toggle" data-toggle二dropdown" role 二 but toaria-haspopuptrue a

17、ria-expanded=zzfalsezz>tfe¥<span classcaretx/spanx/a><ul class二"dropdown-menu"<li><a href=，/，>bootstrap</a></1 i><!-class divider:分隔线样式role二"separator":声明这个元素为一个分隔线-><li role二"separator" class二divider">/li><

18、;li><a href二>请关注极客标签</a></li></ul><!下拉菜单一></1 i><!导航子元索- </ul><! -导航元素-<!-class navbar-form:可以呈现良好的垂直对齐具体参考 http:/v3. bootcss. com/components/#navbai-forms navbar-1 eft:用來规定导航条内元索对齐的具体参考 http:/v3 bootcss com/componcnts/#navbar-componcnt-alignmcnt

19、-><form c 1 ass=/znavbar-form navbar-1 eftrole二"search"<!-class btn:创建一个按钮所必须的基类 btn:按钮样式基于btn基类具体参考http:/v3. bootcss. com/css/#buttons form-group:排列表单元素的一个基类具休参考http:/v3. bootcss. com/css/#forms-><div class二"form-group"<!-class form-control:设置宽度为100%但是我们在父级元素fo

20、rm设置了 navbar-form所以宽度会得到一定的控制 ->_<input type二"text" class二form-control" placeholder"搜索 /></div><!表单组一><button type二submicl ass二btn btn-defaul t>搜索/button></form><! -表单-><ul class=z，nav navbar-nav navbar-right，z><li><a href=z/z，>soul</a></li><1 i cl ass二dropdown"><a hrcf="# class二"dropdown-toggle"

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论