bootstrap实现导航等

来源：互联网发布：淘宝店铺怎样发布宝贝编辑：程序博客网时间：2024/06/05 16:59
1.制作用户登录页面
2.制作导航栏
3.字体图标制作与多级下啦菜单
4.网格系统
5.面包屑导航和tab标签
<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">        <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>        <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>         .navbar-inverse .navbar-brand{            color: #fff;         }        </style>    </head>    <body>    <nav class="nav navbar-inverse navbar-fixed-top" style="filter:alpha(Opacity=90);-moz-opacity:0.9;opacity: 0.9" role="navigation">    <div class="container">            <div class="navbar-header">             <a href="#" class="navbar-brand">                <span class="glyphicon glyphicon-road"></span> <strong>囧途课堂</strong>             </a>            </div>            <ul class="nav navbar-nav">                    <li class="active"><a href="#">首页</a></li>                    <li><a href="#">囧文</a></li>                    <li><a href="#">文章</a></li>            </ul>            <div class="navbar-form navbar-right">                <div class="form-group">                        <div class="input-group">                        <input type="text" class="form-control" placeholder="搜索文章、教师或课程"  />                        <div class="input-group-btn">                            <button class="btn btn-block"><span class="glyphicon glyphicon-search"></span></button>                        </div>                    </div>                  </div>                <div class="form-group" style="padding-left: 10px; margin: 0px 12px;">                    <a href="#" style="color: #D2D2D2;">登录</a>                    <span  style="color: #D2D2D2;padding-left: 5px;">|</span>                    <a href="#" style="color: #D2D2D2;padding-left: 5px;">注册</a>                </div>            </div>        </div>   </nav> <div style="height: 60px;"></div>   <div class="container">    <div class="row">        <div class="col-md-6">          <ul id="mytab" class="nav nav-tabs">            <li class="active">                <a href='#xw1' data-toggle='tab'>新闻1</a>            </li>            <li>                <a href='#xw2' data-toggle='tab'>新闻2</a>            </li>          </ul>          <div class="tab-content">            <div class="tab-pane fade in active" id="xw1">                <p><a href="#">江苏盐业集团原董事长王德善涉嫌严重违纪违法被查</a><span class="pull-right">2015-2-1</span></p>                <p><a href="#">江苏盐业集团原董事长王德善涉嫌严重违纪违法被查</a><span class="pull-right">2015-2-1</span></p>                <p><a href="#">江苏盐业集团原董事长王德善涉嫌严重违纪违法被查</a><span class="pull-right">2015-2-1</span></p>                <p><a href="#">江苏盐业集团原董事长王德善涉嫌严重违纪违法被查</a><span class="pull-right">2015-2-1</span></p>                <p><a href="#">江苏盐业集团原董事长王德善涉嫌严重违纪违法被查</a><span class="pull-right">2015-2-1</span></p>            </div>            <div class="tab-pane fade" id="xw2">                <p><a href="#">江苏盐业集团原董事长王德善涉嫌严重违纪违法被查</a><span class="pull-right">2015-2-2</span></p>                <p><a href="#">江苏盐业集团原董事长王德善涉嫌严重违纪违法被查</a><span class="pull-right">2015-2-2</span></p>                <p><a href="#">江苏盐业集团原董事长王德善涉嫌严重违纪违法被查</a><span class="pull-right">2015-2-2</span></p>                <p><a href="#">江苏盐业集团原董事长王德善涉嫌严重违纪违法被查</a><span class="pull-right">2015-2-2</span></p>                <p><a href="#">江苏盐业集团原董事长王德善涉嫌严重违纪违法被查</a><span class="pull-right">2015-2-2</span></p>            </div>          </div>        </div>    </div>     <div class="row">        <div class="col-md-12">            <ul class="breadcrumb">                <li><a href="#">开发语言</a></li>                <li><a href="#" class="text-muted">web课程</a></li>            </ul>        </div>        <div class="col-md-4">        <div class="thumbnail">            <img src="img/kc1.jpg" />            <div class="caption">                <h3><a>bootstrp课程</a></h3>                <p>共12课时</p>            </div>         </div>        </div>        <div class="col-md-4">        <div class="thumbnail">            <img src="img/kc1.jpg" />            <div class="caption">                <h3><a>bootstrp课程</a></h3>                <p>共12课时</p>            </div>         </div>        </div>        <div class="col-md-4">        <div class="thumbnail">            <img src="img/kc1.jpg" />            <div class="caption">                <h3><a>bootstrp课程</a></h3>                <p>共12课时</p>            </div>         </div>        </div>        <div class="col-md-4">        <div class="thumbnail">            <img src="img/kc1.jpg" />            <div class="caption">                <h3><a>bootstrp课程</a></h3>                <p>共12课时</p>            </div>         </div>        </div>            <div class="col-md-4">        <div class="thumbnail">            <img src="img/kc1.jpg" />            <div class="caption">                <h3><a>bootstrp课程</a></h3>                <p>共12课时</p>            </div>         </div>     </div>   </div>  <script>    //$('#mytab a[href="#xw2"]').tab('show');    //$('#mytab a:first').tab('show');    //$('#mytab a:last').tab('show');    //$('#mytab li:eq(1) a').tab('show');    $('#mytab').on('shown.bs.tab',function(e){        var txt=$(e.target).attr('href');        var prevtxt=$(e.relatedTarget).attr('href');        $(txt).html($(prevtxt).html());    })  </script>  </body></html>
0 0