search

Home >Web Front-end >HTML Tutorial >Bootstrap两端对齐的导航实例_html/css_WEB-ITnose

Bootstrap两端对齐的导航实例_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:33:301630browse

Bootstrap两端对齐的导航，样式剥离出来代码如下：

<!DOCTYPE html><html><head>    <title>Bootstrap 实例 - 两端对齐的导航元素</title>    <style>        .nav { padding-left: 0; margin-bottom: 0; list-style: none; }        .nav:before, .nav:after { display: table;content: " "; }        .nav:after { clear: both; }        .nav:before, .nav:after { display: table; content: " "; }        .nav:after { clear: both; }        .nav li { position: relative; display: block; }        .nav li a { position: relative; display: block; padding: 10px 15px; }        .nav li a:hover, .nav li a:focus { text-decoration: none; background-color: #eee; }        .nav li.disabled a { color: #999; }        .nav li.disabled a:hover, .nav li.disabled a:focus { color: #999; text-decoration: none; cursor: not-allowed; background-color: transparent; }        .nav .open a, .nav .open a:hover, .nav .open a:focus { background-color: #eee; border-color: #428bca; }        .nav .nav-divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; }        .nav li a img { max-width: none; }        .nav-pills li { float: left; }        .nav-pills li a { border-radius: 4px; }        .nav-pills li + li { margin-left: 2px; }        .nav-pills li.active a, .nav-pills li.active a:hover, .nav-pills li.active a:focus { color: #fff; background-color: #428bca; }        .nav-justified{ width:100% }        .nav-justified li{ float:none }        .nav-justified li a{ margin-bottom:5px;text-align:center }        .nav-justified .dropdown .dropdown-menu{ top:auto;left:auto }        @media(min-width:768px){             .nav-justified li{ display:table-cell; width:1% }             .nav-justified li a{ margin-bottom:0 }        }    </style></head><body>    <p>两端对齐的导航元素</p>    <ul class="nav nav-pills nav-justified">       <li class="active"><a href="#">Home</a></li>       <li><a href="#">SVN</a></li>       <li><a href="#">iOS</a></li>       <li><a href="#">VB.Net</a></li>       <li><a href="#">Java</a></li>       <li><a href="#">PHP</a></li>    </ul></body></html>

 

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML 外边距折叠，以及消除的办法_html/css_WEB-ITnoseNext article：IE8及低版本浏览器不支持CSS3 media queries的解决方法_html/css_WEB-ITnose

Related articles

See more