为了账号安全,请及时绑定邮箱和手机立即绑定
  • <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>图片轮播测试</title>

    <link rel="stylesheet" type="text/css" href=" //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>

    <script type="text/javascript" src=" http://libs.baidu.com/jquery/1.9.0/jquery.js" ></script>

    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" ></script>

    <style type="text/css">

    .carousel {

                height: 380px;

            }

            .carousel .item {

                height: 380px;

            }

            .carousel .item img {

                width: 100%;

            }

            .carousel-caption{

            color:#EC971F;

            }

    </style>

    </head>

    <body>

    <div id="myCarousel" class="carousel slide">

    <!-- 轮播(Carousel)指标 -->

    <ol class="carousel-indicators">

    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

    <li data-target="#myCarousel" data-slide-to="1"></li>

    </ol>

    <!-- 轮播(Carousel)项目 -->

    <div class="carousel-inner">

    <div class="item active">

    <img src=" http://img.mukewang.com/5412ad400001e52014280484.jpg" alt="刺泡1">

    <div class="carousel-caption">

    11 英寸 MacBook Air 充电一次可运行长达 9 小时,而 13 英寸机型则可运行长达 12 小时。

    </div>

    </div>

    <div class="item">

    <img src="http://img.mukewang.com/5412ad7c0001d2eb10880541.jpg" alt="刺泡2">

    <div class="carousel-caption">

    无论是什么任务,配备 Intel HD Graphics 5000 图形处理器的第四代 Intel Core 处理器都能应对自如。

    </div>

    </div>

    <div class="item">

    <img src="http://img.mukewang.com/5412ae5c0001653b12800644.jpg" alt="刺泡2">

    <div class="carousel-caption">

    有了新一代 802.11ac 技术,MacBook Air 令 Wi-Fi 速度超越极限。

    </div>

    </div>

    </div>

    <!-- 轮播(Carousel)导航 -->

    <a class="carousel-control left" href="#myCarousel" data-slide="prev">

    <span  class="glyphicon glyphicon-chevron-left"></span>

    </a>

    <a class="carousel-control right" href="#myCarousel" data-slide="next">

    <span  class="glyphicon glyphicon-chevron-right"></span>

    </a>

    </div>

    </body>

    </html>


  • ie版本低于IE9引用两个js文件,让ie8及以下支持html5标签和支持媒体查询

    04:55
    看视频
  • <div class="dropdown-divider"></div>

    用这个添加分割线

  • 添加 .navbar-fixed-bottom 类可以让导航条固定在底部

    添加 .navbar-static-top 类可创建一个与页面等宽度的导航条,随页面向下滚动而消失

    通过添加 .navbar-inverse 类可以改变导航条的外观。


  • 应该是通过添加 .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。两个类都会通过 CSS 设置特定方向的浮动样式。

  • navbar-expand-lg 
    navbar-light
    bg-light


  • <!DOCTYPE html>

    <html>


       <head>

          <meta charset="utf-8">

          <title>Bootstrap 模板</title>

          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <!-- 引入 Bootstrap -->

       <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

       <style >

          .row div p {

             border: 1px solid #ccc;

          }

       </style>

       </head>

       <body>

    <div class="container">

      

       <div class="row">

          <div class="col-md-4"><p>慕课网是一家从事互联网免费教学的网络教育公司。秉承"开拓、创新、公平、分享"的精神,将互联网特性全面的应用在教育领域,致力于为教育机构及求学者打造一站式互动在线教育品牌。</p></div>

          <div class="col-md-4"><p>慕课网是一家从事互联网免费教学的网络教育公司。秉承"开拓、创新、公平、分享"的精神,将互联网特性全面的应用在教育领域,致力于为教育机构及求学者打造一站式互动在线教育品牌。</p></div>

          <div class="col-md-4"><p>慕课网是一家从事互联网免费教学的网络教育公司。秉承"开拓、创新、公平、分享"的精神,将互联网特性全面的应用在教育领域,致力于为教育机构及求学者打造一站式互动在线教育品牌。</p></div>

             

       </div>

       <div class="row">

                <div class="col-md-4"><p>慕课网是一家从事互联网免费教学的网络教育公司。秉承"开拓、创新、公平、分享"的精神,将互联网特性全面的应用在教育领域,致力于为教育机构及求学者打造一站式互动在线教育品牌。</p></div>

                <div class="col-md-4 col-md-offset-4"><p>慕课网是一家从事互联网免费教学的网络教育公司。秉承"开拓、创新、公平、分享"的精神,将互联网特性全面的应用在教育领域,致力于为教育机构及求学者打造一站式互动在线教育品牌。</p></div>

             </div>

             <div class="row">

          <div class="col-md-3 col-md-offset-3"><p>慕课网是一家从事互联网免费教学的网络教育公司。秉承"开拓、创新、公平、分享"的精神,将互联网特性全面的应用在教育领域,致力于为教育机构及求学者打造一站式互动在线教育品牌。</p></div>

          <div class="col-md-3 col-md-offset-3"><p>慕课网是一家从事互联网免费教学的网络教育公司。秉承"开拓、创新、公平、分享"的精神,将互联网特性全面的应用在教育领域,致力于为教育机构及求学者打造一站式互动在线教育品牌。</p></div>

          

             

       </div>

         <div class="row">

          <div class="col-md-6 col-md-offset-3"><p>慕课网是一家从事互联网免费教学的网络教育公司。秉承"开拓、创新、公平、分享"的精神,将互联网特性全面的应用在教育领域,致力于为教育机构及求学者打造一站式互动在线教育品牌。</p></div>

          

          

             </div>


    </div>

      

       <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

       <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

       </body>

    </html>


  • <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <title>Hello World</title>

    <style>

            .carousel {

                height: 500px;

            }

            .carousel .item {

                height: 500px;

            }

            .carousel .item img {

                width: 100%;

            }

    </style>


    </head>


    <body>

    <div id="myCarousel" class="carousel slide">

    <!-- 轮播(Carousel)指标 -->

    <ol class="carousel-indicators">

    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

    <li data-target="#myCarousel" data-slide-to="1"></li>

    <li data-target="#myCarousel" data-slide-to="2"></li>

    </ol>   

    <!-- 轮播(Carousel)项目 -->

    <div class="carousel-inner">

    <div class="item active">

    <img src=" http://img1.sycdn.imooc.com/5412ad400001e52014280484.jpg" alt="First slide">

    <p class="carousel-caption">11 英寸 MacBook Air 充电一次可运行长达 9 小时,而 13 英寸机型则可运行长达 12 小时。</p>

    </div>

    <div class="item">

    <img src=" http://img1.sycdn.imooc.com/5412ad7c0001d2eb10880541.jpg" alt="Second slide">

    <p class="carousel-caption">无论是什么任务,配备 Intel HD Graphics 5000 图形处理器的第四代 Intel Core 处理器都能应对自如。</p>

    </div>

    <div class="item">

    <img src="http://img1.sycdn.imooc.com/5412ae5c0001653b12800644.jpg" alt="Third slide">

    <p class="carousel-caption">有了新一代 802.11ac 技术,MacBook Air 令 Wi-Fi 速度超越极限。</p>

    </div>

    </div>

    <!-- 轮播(Carousel)导航 -->

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

    <span class="sr-only">Previous</span>

    </a>

    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

    <span class="sr-only">Next</span>

    </a>

    </div> 




     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

       <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </body>

    </html>


  • <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <title>Hello World</title>



    </head>


    <body>

    <nav class="navbar navbar-default" role="navigation">

        <div class="container-fluid">

        <div class="navbar-header">

            <a class="navbar-brand" href="#">某管理系统</a>

        </div>

        <div>

            <ul class="nav navbar-nav">

                <li class="active"><a href="#">首页</a></li>

               

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">

                        功能

                        <b class="caret"></b>

                    </a>

                    <ul class="dropdown-menu">

                        <li class="disabled"><a href="#" >业务功能</a></li>

                        <li><a href="#">信息建立</a></li>

                        <li><a href="#">信息查询</a></li>

                        <li><a href="#">信息管理</a></li>

                        <li class="divider"></li>

                        <li class="disabled"><a href="#" >系统功能</a></li>

                        <li><a href="#">设置</a></li>

                    </ul>

                </li>

                <li><a href="#">帮助</a></li>

            </ul>

        </div>

    <form class="navbar-form navbar-right">

    <div class="form">

    <input type="text" class="form-control" placeholder="用户名...">

    <input type="text" class="form-control" placeholder="密码...">

    <button type="submit" class="btn btn-default">登录</button>

    </div>

    </form>


        </div>

    </nav>




     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

       <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </body>

    </html>


首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
本课程针对Bootstrap基础知识进行概览式介绍,所以希望您已学习本网站的“玩转Bootstrap”课程知识点,同时希望您会使用HTML、CSS、JavaScript做简单的网页,如果您已具备jQuery基础知识会更好。
老师告诉你能学到什么?
1.了解Bootstrap框架基础知识。 2. 如何开始使用Bootstrap框架。 3. 如何运行初始代码,并修改成所需要的代码。 4. 如何利用Bootstrap制作响应式布局的网页。 5. 如何使用Bootstrap中的组件、插件及定制。
意见反馈 邀请有奖 帮助中心 APP下载
官方微信