bootstrap实现导航等

最新推荐文章于 2024-11-20 06:14:02 发布
原创 最新推荐文章于 2024-11-20 06:14:02 发布 · 1k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
其它

当前文章被收录于：

其它
13 篇文章 0 人学习
订阅专栏 查看详情
本文介绍如何使用Bootstrap快速构建响应式网页布局，包括导航栏、面包屑导航、标签页等功能，并通过实例展示了如何实现这些组件。

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>
标签
#bootstrap #导航 #网格 #标签 #字体
Bootstrap自适应导航栏的实现
Sakura__Lu的博客
11-20 1924
bootstrap的导航栏有成熟的组件，在移动端和PC端都能够做到自适应，这里只是稍微做了一点修改，做一下笔记~ 效果图： 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 在移动端不缩放 --> <...
Bootstrap 导航栏：设计、定制与实现
最新发布
lly202406的博客
11-20 568
Bootstrap 是一个流行的前端框架，它提供了大量的组件和工具，帮助开发者快速构建响应式和移动优先的网页。在 Bootstrap 的众多组件中，导航栏（Navbar）是一个核心元素，它用于创建网站的主要导航结构。本文将详细介绍 Bootstrap 导航栏的设计理念、定制方法以及在项目中实现导航栏的步骤。
bootStrap实现导航栏
weixin_44657829的博客
05-11 2327
导航栏的实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.5.0.js"></script> <script src="../js/bootstrap.min.js"></scrip
bootstrap自定义样式-bootstrap侧边导航栏的实现
热门推荐
dotNet全栈开发
07-25 19万+
1. 侧滑栏使用定位fixed 2. 使用bootstrap响应式使用工具类 visible-sm visible-xs hidden-xs hidden-sm等对不同屏幕适配 3. 侧滑栏的侧滑效果不使用jquery方法来实现，使用的是css3 transforms属性进行div的移动，侧滑的动画效果使用的是css属性transition
基于bootstrap实现收缩导航条
acq56639的博客
07-20 1461
<!DocType html> <html> <head> <meta charset="utf-8"> <!--设置浏览器优先使用什么模式来渲染页面--> <!--告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。 --> <meta http-equiv="X-...
Bootstrap导航菜单实现
dgxa30111的博客
03-19 169
<h3>导航栏</h3> <nav class="navbar navbar-inverse navbar-fixed-top"> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-na...
bootstrap 实现自适应导航栏
Future1994的博客
09-20 1985
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>Bootstrap--模板</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compati.
Bootstrap隐藏式导航条的实现
HH_zhuzhuxia的博客
05-28 2893
<div class="navbar-header" style="margin-top: 5px;"> <!-- data-target后面接的值是需要隐藏的id，aria-controls是控制被隐藏的元素的 --> <button class="navbar-toggle collapsed" type="button" data-toggle=...
用BootStrap实现响应式导航条效果
stormzi的博客
09-14 1850
  导航条效果图如下： 拖动窗口缩小到小于980像素，可以看到收起来的导航条以及切换按钮： 点击切换按钮效果如下： 代码如下： &lt;header role="banner"&gt; &lt;nav role="navigation" class="navbar navbar-static-top navbar-default"&gt; &...
Bootstrap实现响应式导航栏效果
qq_27905183的博客
04-30 3666
效果图 实现代码<html> <head> <title>响应式导航栏</title> <meta http-equiv="content-Type" content="text/html;charset=utf-8" /> <!--Bootstrap CSS--> <link rel="stylesheet" href="b
Bootstrap多级导航栏(级联导航)的实现代码
turingty的博客
02-17 4486
在bootstrap官方来说，导航最多就是两级，两级以上是无法实现的，大叔找了一些第三方的资料，终于找到一个不错的插件，使用上和效果上都还不错，现在和大家分享一下 插件地址：http://vsn4ik.github.io/bootstrap-submenu/ 先看一下，在后台系统上的显示效果 下面说一下实现的方式 １.引用三个JS插件和一个CSS类库
bootstrap实现垂直导航框架
baidu_33403616的博客
04-18 2万+
<html> <head> <title>Bootstrap 实例 - 垂直的胶囊式导航菜单</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.
用BootStrap实现一个导航栏
weixin_42199230的博客
09-11 913
导航栏 人员管理 顺丰科技 顺丰...
bootstrap实现响应式导航栏，折叠隐藏效果
tammy1151的博客
08-22 4万+
bootstrap实现响应式导航栏 PC机显示正常的长条导航，手机端实现折叠隐藏的按钮效果 向 标签添加 class .navbar、.navbar-default（导航条背景白）navbar-inverse导航条背景黑。向上面的元素添加 role="navigation"，有助于增加可访问性。向 元素添加一个标题 class .navbar-header，内部包含了带有 clas
【Bootstrap】Bootstrap v5 nav导航条实现部分居左，部分居右布局
微雨停了的博客
04-26 6097
文章目录一、效果二、修改后代码三、分析3.1 修改前效果3.2 修改前代码3.3 方法四、学习网址 一、效果 在同一行中，资产收集、信息探测等内容居左对齐，而测试与退出登录居右对齐。 二、修改后代码 <!-- nav --> <nav class="navbar navbar-expand-sm bg-light navbar-light"> <!-- div1 start --> <div class="colla
bootstrap动态切换导航按钮的active属性就实现
吴清钺的博客
05-31 3万+
在网上找了半天怎么动态切换导航，偶然发现bootstrap实现方法，bootstrap框架真的很强大，直接用能省不少时间,菜鸟教程很不错，在上面找到点击打开链接&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Bootstrap 实例 &lt;/titl..
php加密解密函数authcode的用法详细解析
vvvbird的专栏
06-15 8084
// 参数解释 // $string： 明文 或 密文 // $operation：DECODE表示解密,其它表示加密 // $key： 密匙 // $expiry：密文有效期 function authcode($string, $operation = 'DECODE', $key = '', $expiry = 0) { // 动态密匙长度，相同的明文会
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值