专栏首页sktjbootstrap 左边栏菜单 常用样式

bootstrap 左边栏菜单 常用样式

image.png

<style> /* Custom Styles / 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 */ } </style> </head> <body data-spy="scroll" data-target="#myScrollspy"> <div class="container"> <div class="jumbotron"> <h1>Bootstrap Affix</h1> </div> <div class="row"> <div class="col-xs-3" id="myScrollspy"> <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 class="col-xs-9"> <h2 id="section-1">第一部分</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor</p>


<h2 id="section-2">第二部分</h2> <p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus.</p>


<h2 id="section-3">第三部分</h2> <p>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero,rhoncus.</p>


<h2 id="section-4">第四部分</h2> <p>Suspendisse a orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum </p>


<h2 id="section-5">第五部分</h2> <p>Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl risus, in viverra liber</p>

    </div>
</div>

</div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery tab选型卡

    *{ margin:0; padding:0;} body { font:12px/19px Arial, Helvetica, sans-serif; co...

    用户5760343
  • bootstrap 网站样式 常用

    用户5760343
  • flask flask-login使用笔记(flask 55)

    <pre style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: bre...

    用户5760343
  • JS示例06-document.getElementsByTagName

    1、行间样式优先级高于class属性样式(设置过行间样式后,再设置属性样式则无效) 2、对同一个元素只采用一种属性控制方式(要不是行间样式,要不是class样...

    专注APP开发
  • 关于opacity、visibility、display属性的一道CSS面试题

    鼠标移入div,显示菜单ul,移出后隐藏菜单ul,只使用CSS,如何实现既有淡入淡出的效果,而又不影响其他元素,不产生回流?

    FEWY
  • html的table使用div创建

          午休时间写了一个使用div创建table的案例 1.样式 <style> .table { display: table; ...

    用户1055830
  • css3转换(banner)

    天天_哥
  • 原生js实现div跳动效果---很多炫酷效果的基本原理

    这块实现起来很简单,原生的js实现更简单。为什么写这个呢?因为这个其实是很多网页动态效果的一个原型,不管是什么大型的网站,其实底层的原理都是一样的,基本思路是,...

    何处锦绣不灰堆
  • JQuery第二节

    用户3461357
  • 页面引入CSS的四种方式及区别

    一个前端页面(原生)由HTML+CSS+JS+Image组成,页面效果由CSS负责,好的页面会吸引用户访问、停留。那么页面是如何靠css来达到效果的呢?下面说说...

    申霖

扫码关注云+社区

领取腾讯云代金券