为了账号安全，请及时绑定邮箱和手机立即绑定
首页 免费课 基于bootstrap的网页开发 笔记

基于bootstrap的网页开发

姜维 Web前端工程师
查看讲师更多课程 姜维讲师的其他课程
难度中级
时长 1小时14分
学习人数
综合评分9.53
408人评价 查看评价
9.8 内容实用
9.5 简洁易懂
9.3 逻辑清晰
最热 最新
  • 慕的地4563549 01:40
    Carousel-example-genetic Carousel-slide date-ride
    查看全部
    0 采集 收起 来源：滚动图片广告

    2020-03-08

  • 慕的地4563549 01:01
    carousel
    查看全部
    0 采集 收起 来源：滚动图片广告

    2020-03-08

  • weixin_慕虎3367198

    <!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>


    查看全部
    1 采集 收起 来源：编程挑战

    2020-02-27

  • weixin_慕虎3367198

    <!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>


    查看全部
    0 采集 收起 来源：编程练习

    2020-02-26

  • weixin_慕虎3367198

    <!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://img1.sycdn.imooc.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://img1.sycdn.imooc.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://img1.sycdn.imooc.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>


    查看全部
    0 采集 收起 来源：编程练习

    2020-02-26

  • xiaowang_1982 04:06
    boostoop
    查看全部
    0 采集 收起 来源：弹出框制作

    2020-01-10

  • Happy_123君

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

    查看全部
    0 采集 收起 来源：练习题

    2019-12-19

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


    查看全部
    0 采集 收起 来源：练习题

    2019-11-29

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


    查看全部
    0 采集 收起 来源：菜单定位及总结

    2019-11-29

  • qq_暖心_9

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

    响应式导航条依赖折叠（collapse）插件

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

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

    查看全部
    0 采集 收起 来源：练习题

    2019-11-29

  • 买拉条也用券 05:39
    修改样式时，添加的类名从哪里来的？还有复制内容时里面的类名怎么实现的？
    查看全部
    0 采集 收起 来源：练习题

    2019-11-28

  • qq_暖心_9

    库引用地址:

       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



    查看全部
    0 采集 收起 来源：编程练习

    2019-11-26

  • qq_暖心_9

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

    查看全部
    0 采集 收起 来源：练习题

    2019-11-26

首页上一页1234567下一页尾页

举报

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

微信扫码，参与3人拼团

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

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

查看已购买的课程