响应式菜单(bootstrap)

<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>
   <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>
时间: 2024-10-31 02:59:19

响应式菜单(bootstrap)的相关文章

20个全屏响应式菜单效果荟萃

响应式菜单效果在近些年的网站设计中被广泛的使用,在这篇文章中我们收集了20款最酷的响应式菜单效果,希望大家喜欢! KLM's – Flat or Not → Huge → Threadslike → Square → Ready Set Rocket → Tictail → Zaarly Employee Handbook → Reach Partners → Brooklyn Bridge Park → Pavel Proshin → Plasticbionic → Southpaw → EK

响应式框架Bootstrap

概念:Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 -- 强调 响应式设计的概念. 通过响应式设计,你无需再为你的网站设计一个手机版的.它在任何尺寸的屏幕上看起来都会不错. Bootstrap自带了一些预定义的按钮颜色.浅蓝色 btn-info 被用在那些用户可能会采取的操作上 Bootstraps 的12列网格布局. 下面是 Bootstrap 网格的基本结构: <div class="container"> <div class="r

响应式布局 Bootstrap(01)

1.是什么?Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷 Bootstrap 插件全部依赖 jQuery <!DOCTYPE html> <html lang="zh-cn"> //lang属性指定当前页面所用的自然语言 注意是为浏览器自动翻译提供基础功能 屏幕阅读软件的基础发音 <head> <meta cha

响应式(2)——bootstrap的响应式

<meta name="viewport" content="width=device-width,user-scalable=no"/> <href="bs/css/bootstrap.min.css"/> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING

响应式菜单制作

看看效果: PC端: 移动端: 一.HTML <div id="demo"> <span class="icon-menu" id="icon"></span> <ul class="nav"> <li>首页</li> <li>前端开发 <ul class="submenu"> <li>HTML-CS

响应式布局---菜单

一个简单的响应式菜单,仅使用@media query实现. 上图的作用就是将普通的菜单在缩小浏览器屏幕到一定宽度,或者是在移动设备上的显示效果.现在分步进行实现: 第一步:先构建一个普通的菜单,具体显示如图: 结构如下: <nav class="nav"> <ul> <li class="current"><a href="#">Portfolio</a></li> <

CSS:响应式下的折叠菜单(条纹式)

原文:CSS: Responsive Navigation Menu 译文:CSS:响应式导航菜单 译者:dwqs 写在之前,关于如何制作响应式的下拉菜单:响应式下的下拉菜单 之前,我写了一篇关于怎么制作响应式的移动导航的教程.现在,我发现了一个新技巧,不用使用JavaScript就能实现响应式菜单,而是使用HTML 5清晰的语义标记. 这个菜单能居左.居中和居右对齐,不像之前文章提到的菜单需要靠点击在显示和隐藏之间进行切换.它也有一个标记显示激活/当前菜单项,并且它能作用在所有移动平台和包括I

自适应屏幕的jQuery响应式布局网站特效代码

jQuery响应式图片九宫格布局点击图片查看大图效果代码 jquery响应式布局_宽屏响应式焦点图片动画轮播代码 css3绘图制作css3响应式组织架构图形代码 jQuery css3图片翻转响应式布局翻转图片筛选器代码 jquery html5响应式幻灯片插件网站响应式全屏幻灯片轮播代码 jQuery响应式焦点图插件制作响应式全屏焦点图切换代码 jQuery html5全屏响应式幻灯片制作触屏手机幻灯片代码 jQuery图片响应式布局点击弹出图片响应式幻灯片代码 jquery 3d响应式幻灯片

ACCP8.0Y2Web前端框架与移动应用开发第1章响应式布局

一.单词部分 ①flex弹性布局  ②flex-direction伸缩方向 ③justify-content对齐 ④align-items对齐属性 ⑤align-content垂直布局 ⑥media媒体 ⑦device-width设备宽度 ⑧orientation方向 ⑨landscape竖屏 portraint横屏 二.预习部分 1.Flex布局的好处 可以适应不同屏幕大小的变化时元素位置的变化 2.媒体查询有什么作用 向不同设备提供不同样式的一种不错方式提升用户体验 3.响应式布局的优点 解