12.09-12.12日 bootstrap学习

最新推荐文章于 2023-12-08 00:04:53 发布
Sitwoold
最新推荐文章于 2023-12-08 00:04:53 发布
阅读量126
点赞数
分类专栏： bootstrap
本文链接：https://blog.csdn.net/Sitwoold/article/details/85019480
版权
bootstrap 专栏收录该内容
4 篇文章 0 订阅
订阅专栏
4)	输入框组
<from class=”form-horizontal”>
<div class=”inout-group”>
<div class=”input-group-addon”>$</div>
<input type=“text” class=”form-control”>
<div class=”input-group-addon”>.00</div>
</div>
</form>
尺寸：<.input-group-lg>等
额外元素的单选框多选框：
  <div class=“input-group”>
<div class=”input-group-addon”>
     <input type=”checkbox” name=”” id=””>
</div>
   <input type=”text” class=”form-control”>
</div>    //单选与多选的区别就在于，name那一栏的值是不是一样的，如果是一样的就是单选，如果不是，那就是多选。

输入框组的下拉菜单：
输入框组的分裂是下拉菜单：
5)	导航
标签页式:
<style media="screen">
      .row{
        padding-top: 15px;
        padding-left: 30px;
        display: none;
      }
</style>

<div class="container">
        <h1 class="page-header">这是我的标签式导航栏</h1>

          <ul class="nav nav-pills">
             <li class="active">
                <a href="">Linux</a>
             </li>

             <li class="">
                <a href="">JAVA</a>
             </li>

             <li class="">
                <a href="">JS</a>
             </li>
          </ul>
      <div class="row">
         <p>LINUX真是太原始了</p>
      </div>

      <div class="row">
         <p>JAVA是个好东西</p>
      </div>

      <div class="row" >
         <p>JS让人头秃顶</p>
      </div>

      </div>

  </body>
  <script>
  $('li').mouseenter(function(){
      $(this).addClass('active');
      $('li').not($(this)).removeClass('active');

      idx=$(this).index('li');
      $('.row').eq(idx).show(500);
      $('.row').not($('.row').eq(idx)).hide(500);
  });
  $('.row').eq(0).show(500);        //实现鼠标移动到哪里，那里显示；
  </script>胶囊式：
胶囊式的只用把<ul class=”nav nav-tabs”>换成
<ul class=”nav nav-pills”>

堆叠导航：<.nav-stacked>
  
<style media="screen">
      .navs{
        padding-top: 15px;
        padding-left: 30px;
        display: none;
      }
    </style>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="bootstrap/js/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
  </head>
  <body>

     <div class="container">
        <h1 class="page-header">这是我的标签式导航栏</h1>
          <div class="rows">
            <div class="col-md-2">
              <ul class="nav nav-pills nav-stacked">
                 <li class="active">
                    <a href="">Linux</a>
                 </li>

                 <li class="">
                    <a href="">JAVA</a>
                 </li>

                 <li class="">
                    <a href="">JS</a>
                 </li>
              </ul>
             </div>
             <div class="col-md-10">
             <div class="row navs">
                <p>LINUX真是太原始了</p>
             </div>

             <div class="row navs">
                <p>JAVA是个好东西</p>
             </div>

             <div class="row navs" >
               <p>JS让人头大</p>
             </div>
          </div>
          </div>

</div>

  </body>
  <script>
  $('li').mouseenter(function(){
      $(this).addClass('active');
      $('li').not($(this)).removeClass('active');

      idx=$(this).index('li');
      $('.navs').eq(idx).show(100);
      $('.navs').not($('.navs').eq(idx)).hide(150);
  });
  $('.navs').eq(0).show(200);        //实现鼠标移动到哪里，那里显示；
 </script>

6)	导航条
  <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>导航条</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style media="screen">

</style>
  </head>
  <body>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    <div class="container">
      <h1 class="page-header">导航条</h1>
         <nav  class="navbar navbar-default navbar-inverse">   <!--  navbar-inverse 的作用，把导航栏的主题色设置为黑色,
                                                               只提供了两种颜色，其他的颜色可以通过更改.container-fluid背景色改变-->
           <div class="container-fluid">

           <div id="blacknav" class="nav-header">
              <a href="" class="navbar-brand">
               <img src="../picture/nav_logo.jpg" height="100%">  <!--  可以直接插入img当作品牌图标，也可以放文字-->
              </a>
              <button class="navbar-toggle collapsed"  data-toggle="collapse" data-target="#mynavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
              </div>

       <div id="mynavbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">linux</a></li>
              <li><a href="#">JAVA</a></li>
              <li><a href="#">JS</a></li>
              <li><a href="#">Python</a></li>
              <li><a href="#">C++</a></li>
              <li><a href="#">文档</a></li>
              <li><a href="#">起步</a></li>
              <li class="dropdown">       <!--下拉菜单-->
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <span>下拉菜单<span class="caret"></span></span>
              </a>

              <ul class="dropdown-menu">
                <li> <a href="#">linux</a></li>
                <li> <a href="#">linux</a></li>
                <li> <a href="#">linux</a></li>
                <li> <a href="#">linux</a></li>
                <li> <a href="#">linux</a></li>
              </ul>
            </li>


            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">编辑器下载</a></li>
              </ul>
              <form class="" action="index.html" method="post">

              </form>
          </div>

          </div>

        </nav>
    </div>
</body>
</html>