大屏幕:
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Affix</h1>
</div>
</div>
附加导航:
<div class="row">
<div class="col-xs-3">
<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
<li class="active"><a href="#section-1">第一部分</a></li>
<li><a href="#section-2">第二部分</a></li>
<li><a href="#section-3">第三部分</a></li>
<li><a href="#section-4">第四部分</a></li>
<li><a href="#section-5">第五部分</a></li>
</ul>
</div>
</div>
样式表:
ul.nav-tabs{
width: 140px;
margin-top: 20px;
border-radius: 4px;
border: 1px solid #ddd;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
}
ul.nav-tabs li{
margin: 0;
border-top: 1px solid #ddd;
}
ul.nav-tabs li:first-child{
border-top: none;
}
ul.nav-tabs li a{
margin: 0;
padding: 8px 16px;
border-radius: 0;
}
ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
color: #fff;
background: #0088cc;
border: 1px solid #0088cc;
}
ul.nav-tabs li:first-child a{
border-radius: 4px 4px 0 0;
}
ul.nav-tabs li:last-child a{
border-radius: 0 0 4px 4px;
}
ul.nav-tabs.affix{
top: 30px; /* Set the top position of pinned element */
}
延伸:ul的阴影
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
分享到:
相关推荐
NULL 博文链接:https://onestopweb.iteye.com/blog/2268919
一款基于Bootstrap的导航菜单布局设计jQuery插件。该插件集成了23种Bootstrap导航菜单效果,有下拉菜单,大型菜单,侧边栏菜单,购物车菜单等,可以满足大部分网页导航菜单设计的需求。
bootstrap实现页面切换 好代码,齐分享!
主要介绍了BootStrap实现导航栏的响应式布局,当在小屏幕、手机屏幕浏览时自动折叠隐藏的效果,非常不错,具有参考借鉴价值,对bootstrap 响应式布局导航栏功能感兴趣的朋友一起学习吧
实现静态的登录页面,借助于bootstrap框架。Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。 ...
Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航
利用bootstrap和jQuery制作的一个响应式导航栏,即能够监听页面滚动事件,当页面滚动到页面某位置时导航栏会自动发生变化。同时点击导航栏滚动时利用简单的jQuery实现了平滑滚动。而且能自适应屏幕大小的变化,监听...
这是一个 bootstrap3 的侧边导航栏,东西大家应该都很熟习。希望对大家有所帮助
用bootstrap4实现侧边导航栏并且带隐藏按钮。效果就是,点击按钮侧边导航栏出现,再点击消失。不用bootstrap也可以实现
bootstrap侧边导航栏简单的实现,代码比较少,实现效果良好,原文链接http://blog.csdn.net/kebi007/article/details/76038251
yamm3是一款基于Twitter Bootstrap3的轻量级大型导航菜单插件。该大型菜单使用Bootstrap3标准的导航菜单标签和流式网格系统来制作。它具有顶部固定和响应式等特点,适合用于制作复杂的网站导航菜单。
用bootstrap做的登录,注册页面,使用validate进行表单验证,是本人从空白页面搭建的,亲测可用,1积分算是我的辛苦费吧。 我会通过博客注明知识点:http://blog.csdn.net/qq_19558705; 希望能帮到大家。没有积分的...
bootstrap实现响应式登录页面
Bootstrap写的前端页面
Bootstrap页面模板 带有滚动效果,鼠标向下拉动时,导航栏会自动出现在顶端
本文实例讲述了Bootstrap实现前端登录页面带验证码功能。分享给大家供大家参考,具体如下: Bootstrap有自定义的验证码样式,在前端页面可以直接使用,他的css、js在使用前要在开头引入 上代码: <!DOCTYPE ...
使用Bootstrap制作简单的用户注册页面,用户登录页面。此文件为项目压缩包,环境已配置。
bootstrap+html5框架搭建简易添加页面,适合初学者,,,
bootstrap下面编写的登录页面,并且使用了awesom字体进行页面美化