为了账号安全,请及时绑定邮箱和手机立即绑定
  • Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架

  • <!DOCTYPE html>//html5的定义

    <html lang="en>

      <head>

           <meta charset="utf-8"> //页面uft-8编码

           <meta http-equiv="X-UA-Compatible" content ="IE=edge">//bootstrap不支持IE的兼容模式,这句是为了在IE运行最新的渲染模式

           <meta name="viewport" content="width=device-width, initial-scale=1">//适配移动浏览器时一般都要加上的代码。

    平时使用的移动浏览器是把页面放在一个虚拟的视口, 即"viewport"中,通常这个虚拟视口比屏幕宽,这样就不用每个网页挤到一个很小的视口中,但是这样会破坏没有针对移动浏览器优化的网页布局,用户可以通过平移和缩放来看网页不同的部分;viewport可以让网页开发者控制大小和缩放 

    //视口的宽度等于物理设备的宽度,设置初始缩放比例, 即页面第一次载入时缩放比例,这里设置为1,不作任何的缩放

    <link href="css/bootstrap.min.css" rel="stylesheet">//载入Bootstrap的CSS样式

    </head>

    <body>

      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

      <script src = "js/bootstrap.min.js"></script>

    //加入jQuery和Bootstrap js插件的支持

    //css文件放在head中,js文件要放到body的最下面

    </body>


  • Bootstrap中的JS插件依赖于jQuery,因此jQuery要在Bootstrap之前引用

  • 国&老婆好(;Y 他9看7&天天 看大数据战略7吗6&)安 粘&孜7发6 t
    1. Tooltip 浮动提示框效果

    2. data-toggle="tooltip"

    3. data-placement="left" 代表位置

  • Carousel-example-genetic Carousel-slide date-ride
    01:40
    看视频
  • <!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">

    <title>某管理系统</title>

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


    <!--[if lt IE 9]>

    <script src="js/html5shiv.js"></script>

    <script src="js/respond.min.js"></script>

    <![endif]-->

    <style>

        body {

            padding-top: 50px;

            padding-bottom:10px;

        }

         

    /*侧栏*/

    .sidebar {

    background-color: #ddd;

    position: fixed;

    top: 50px;

    bottom: 0;

    padding-top: 20px;

    }

    .sidebar ul {

    margin-left: -15px;

    margin-right: -18px;

    }

    .sidebar li.active > a,

    .sidebar li > a:hover {

    color: #fff;

    border-top-left-radius:0px;

        border-top-right-radius:0px;

        border-bottom-left-radius:0px;

        border-bottom-right-radius:0px;

    background-color: #428BCA;

    }

    .sidebar .nav-divider {

    background-color: transparent;

    }


    /*主要内容*/

    .main > .page-header {

    margin-top: 20px;

    }

        .btn-ground{

            margin-bottom:10px;

        }

        .progress{

            margin-top: 10px;

        }

        }

    </style>


    </head>


    <body>

    <header>

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

            <div class="container">

                <div class="navbar-header">

                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                        <span class="sr-only">切换导航</span>

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                    </button>

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

                </div>

                <div class="navbar-collapse collapse" id="menu-nav">

                    <ul class="nav navbar-nav">

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

                        <li class="dropdown">

                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">功能 <span class="caret"></span></a>

                            <ul class="dropdown-menu" role="menu">

                                <li><a href="#feature-tab" data-tab="tab-one">信息建立</a></li>

                                <li><a href="#feature-tab" data-tab="tab-two">信息查询</a></li>

                                <li><a href="#feature-tab" data-tab="tab-three">信息管理</a></li>

                                <li><a href="#feature-tab" data-tab="tab-four">信息统计</a></li>


                            </ul>

                        </li>

                        <li><a href="#" data-toggle="modal" data-target="#about-modal">帮助</a></li>

                    </ul>

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

                      <div class="form-group">

                        <input type="email" class="form-control" id="admin" placeholder="用户名...">

                      </div>

                      <div class="form-group">

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

                      </div>


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

                    </form>

                </div>

            </div>

        </div>

    </header>

    <nav>

    <div class="container-fluid">

        <div class="row">

          <aside class="col-md-2 sidebar">

            <ul class="nav nav-tabs nav-stacked">

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

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

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

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

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

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

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

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

         </ul>

         </aside>

          <section class="col-md-10 col-md-offset-2 main">

             <h1 class="page-header">管理控制台</h1>

             <div class="btn-ground">

                 <button type="btn" class="btn btn-deauflt">操作1</button>

                 <button type="btn" class="btn btn-primary">操作2</button>

                 <button type="btn" class="btn btn-success">操作3</button>

                 <button type="btn" class="btn btn-info">操作4</button>

                 <button type="btn" class="btn btn-warning">操作5</button>

                 <button type="btn" class="btn btn-danger">操作6</button>

             </div>

             <div class="row">

                <div class="col-md-6">

                <div class="panel panel-primary">

                <div class="panel-heading">最新消息</div>

                <div class="panel-body">

    <div class="alert alert-success"><strong>提示</strong> 您的订单(2014001)已经审批通过!</div>

    <div class="alert alert-danger"><strong>提示</strong> 您的订单(2014002)被打回!</div>

    <div class="alert alert-warning"><strong>提示</strong> 您的订单(2013001)客户付款延迟!</div>

                    </div>

                    </div>

                </div>

                <div class="col-md-6">

                <div class="panel panel-primary">

                <div class="panel-heading">我的任务</div>

                <div class="panel-body">

                    <div class="alert alert-info" role="alert">订单审批<span class="badge pull-right">42</span></div>

                    <div class="alert alert-info" role="alert">收款确认<span class="badge pull-right">20</span></div>

                    <div class="alert alert-info" role="alert">付款确认<span class="badge pull-right">10</span></div>

                    </div>

                    </div>

                </div>

                <div class="col-md-6">

                <div class="panel panel-primary">

                <div class="panel-heading">最新订单</div>

                <div class="panel-body">

        <table class="table table-striped">

                       <thead>

    <tr>

    <td>#</td>

    <td>产品</td>

    <td>数量</td>

    <td>总金额</td>

    <td>业务员</td>

    </tr>

    </thead>

    <tbody>

    <tr>

    <td>1</td>

    <td>Apple MacBook air</td>

    <td>10</td>

    <td>80000</td>

    <td>王小贱</td>

    </tr>

    <tr>

    <td>2</td>

    <td>Apple iPad air</td>

    <td>20</td>

    <td>65000</td>

    <td>尹开花</td>

    </tr>

    <tr>

    <td>3</td>

    <td>Apple MacBook pro</td>

    <td>5</td>

    <td>50000</td>

    <td>刘老根</td>

    </tr>

    </tbody>

                     </table>

                     <button type="btn" class="btn btn-primary">查看详细>></button>

                 </div>

                </div>

                </div>

                <div class="col-md-6">

                <div class="panel panel-primary">

                <div class="panel-heading">工程进度</div>

                <div class="panel-body">

                    <span class="label label-primary">水井挖掘工程</span>

                    <div class="progress">

                        <div class="progress-bar progress-bar-primary"  role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" ></div>  

                    </div>  

                    <span class="label label-danger">基建工程</span>

                    <div class="progress">

                     <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"   ></div>

                    </div>

                    </div>

                    </div>

                </div>

              </div>

          </section>

       </div>

      </div>

    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

    <script src="http://cdn.bootcss.com/bootstrap/3.2.0/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">

    <title>Hello World</title>

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

    <style type="text/css">

        .row div p{

            border:solid 1px #ccc;

            paidding: 10px;

        }

    </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="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/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">

    <title>Hello World</title>

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

    <style>

    .carousel {

        height: 500px;


    }

    .carousel .item {

        height: 500px;

        background-color: #000;

    }

    .carousel .item img {

        width: 100%;

    }

    </style>

    </head>


    <body>

    <div id="ad-carousel" class="carousel slide" data-ride="carousel">

    <ol class="carousel-indicators">

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

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

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

        <li data-target="#ad-carousel" data-slide-to="3"></li>

        <li data-target="#ad-carousel" data-slide-to="4"></li>

    </ol>

    <div class="carousel-inner">

        <div class="item active">

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


            <div class="container">

                <div class="carousel-caption">

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

                </div>

            </div>

        </div>

        <div class="item">

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

            <div class="container">

                <div class="carousel-caption">

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

                </div>

            </div>

        </div>

        <div class="item">

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

            <div class="container">

                <div class="carousel-caption">

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

                </div>

            </div>

        </div>

        </div>

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

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

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

                class="glyphicon glyphicon-chevron-right"></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">


    </body>

    </html>


  • html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的

  • 如要选取某一个指定标签页,例:
    // 选取第二个标签页(从 0 开始索引)
    $('#myTab li:eq(1) a').tab('show')


  • 打开下拉菜单下的标签页
    $(document).ready(function () {
        $("footer #top").click(function(){
            $("html").animate({scrollTop:0},300)
        })
    })
    点击A标签平和一点的返回页面顶部


  • 导航条是在应用或网站中作为导航页头的响应式基础组件。它在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式。响应式导航条在移动设备上默认折叠。

    响应式导航条依赖折叠(collapse)插件

    响应式导航条在移动设备上可以折叠(并且可开可关)

    响应式导航条在视口(viewport)宽度增加时逐渐变为水平展开模式。

  • 修改样式时,添加的类名从哪里来的?还有复制内容时里面的类名怎么实现的?
  • 库引用地址:

       bootstrap框架: 

    //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css

       jquery库: 

    http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js

       bootstrap.min.js:

    http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js



  • html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。

首页上一页1234567下一页尾页

举报

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

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!