亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

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

    <style type="text/css">

    body {

    padding: 50px 0px;

    margin: 0px;

    }

    .sidebar{

    background-color: #ddd;

    padding: 10px 0px;

    position: fixed;

    top: 51px;

    bottom: 0px;

    left: 0px;

    z-index: 3;


    }

    .sidebar .list-group-item {

    background-color: #ddd;

    border: 0px;

    padding-left: 10%;

    padding-right: 10%;

    color: #337ab7;

    }

    .main {

    background-color: #fff;

    padding-left: 19%;

    padding-right: 2%

    }

    .main .button-group .btn {

    margin-bottom: 10px;

    }

    .feature-list li{

    margin-top: 15px;

    border-radius: 4px;

    }

    .progress-title {

    margin-top: 25px;

    margin-bottom: 15px;

    }

    </style>

    </head>

    <body>

    <!-- 頂部導航欄 -->

    <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">

    ? ??

    ? ? <div class="container-fluid">

    ? ? ? <div class="navbar-header">

    ? ? ? <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-list" aria-expanded="false">

    ? ? ? ? <span class="sr-only">Toggle navigation</span>

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

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

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

    ? ? ? </button>

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

    ? ? </div>

    ? ??

    ? ? <div class='collapse navbar-collapse' id='navbar-list'>

    ? ? ? ?<ul class='nav navbar-nav'>

    ? ? ? ? ? ? <li class="active"><a href='#'>首頁</a></li>

    ? ? ? ? ? ? <li class='dropdown'>

    ? ? ? ? ? ? ? ? <a href='#' class='dropdown-toggle' data-toggle='dropdown' role='button'? >功能<span class='caret'></span></a>

    ? ? ? ? ? ? ? ? <ul class='dropdown-menu'>

    ? ? ? ? ? ? ? ? ? ? <li class='dropdown-header'>業務功能</li>

    ? ? ? ? ? ? ? ? ? ? <li><a href='#first'>信息建立</a></li>

    ? ? ? ? ? ? ? ? ? ? <li><a href='#second'>信息查詢</a></li>

    ? ? ? ? ? ? ? ? ? ? <li><a href='#third'>信息管理</a></li>

    ? ? ? ? ? ? ? ? ? ? <li class='divider'></li>

    ? ? ? ? ? ? ? ? ? ? <li class='dropdown-header'>系統功能</li>

    ? ? ? ? ? ? ? ? ? ? <li><a href='#fourth'>設置</a></li>

    ? ? ? ? ? ? ? ? </ul>

    ? ? ? ? ? ? </li>

    ? ? ? ? ? ? <li><a href='#' data-toggle="modal" data-target="#help">幫助</a></li>

    ? ? ? ? </ul>


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

    ? ? ? ? <div class="form-group">

    ? ? ? ? ? <input type="text" class="form-control" placeholder="用戶名">

    ? ? ? ? ? <input type="text" class="form-control" placeholder="密碼">

    ? ? ? ? </div>

    ? ? ? ? <button type="submit" class="btn btn-default">搜索</button>

    ? ? ? ?</form>

    ? ? ? ??

    ? ? </div>

    ? ? </div> ? ?

    </nav>

    <!-- 自適應布局 -->

    <div class="container-fluid">

    <div class="row">

    <!-- 左側導航欄 -->

    <div class="col-xs-2 col-sm-2 col-md-2 sidebar">

    <div class="list-group">

    ? ? <a href="#" class="list-group-item active">首頁</a>

    </div>

    <div class="list-group">

    ? ? <a href="#" class="list-group-item">信息建立</a>

    ? ? <a href="#" class="list-group-item">信息查詢</a>

    ? ? <a href="#" class="list-group-item">信息管理</a>

    </div>

    <div class="list-group">

    ? ? <a href="#" class="list-group-item">設置</a>

    ? ? <a href="#" class="list-group-item">幫助</a>

    </div>

    </div>

    <!-- 右側控制臺 -->

    <div class="col-xs-12 col-ms-12 col-md-12 main">

    <h3>管理控制臺</h3>

    <hr class="divider">

    <div class="button-group" >

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

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

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

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

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

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

    </div>

    <div class="row">

    <div class="col-xs-12 col-ms-12 col-md-6">

    <div class="panel panel-primary">

    ? ?<div class="panel-heading">最新提醒</div>

    ? ?<div class="panel-body">

    ? ? ?<ul class="list-group feature-list">

    ? ?<li class="list-group-item list-group-item-success">提示 您的訂單（2014001）已經審批通過！</li>

    <li class="list-group-item list-group-item-danger">提示 您的訂單（2014002）被打回</li>

    <li class="list-group-item list-group-item-warning">提示 您的訂單（2013001）客戶付款延遲！</li>

    </ul>

    ? ?</div>

    </div>

    </div>

    <div class="col-xs-12 col-ms-12 col-md-6">

    <div class="panel panel-primary">

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

    ? ?<div class="panel-body">

    ? ? ??

    ? ? ? ?<ul class="list-group feature-list">

    ? ?<li class="list-group-item list-group-item-info">

    ? ? ?<span class="badge">42</span>

    ? ? ?訂單審批

    ? ?</li>

    ? ?<li class="list-group-item list-group-item-info">

    ? ? ?<span class="badge">20</span>

    ? ? ?收繳確認

    ? ?</li>

    ? ?<li class="list-group-item list-group-item-info">

    ? ? ?<span class="badge">10</span>

    ? ? ?付款確認

    ? ?</li>

    </ul> ?

    </div>

    </div>

    </div>

    </div>

    <div class="row">

    <div class="col-xs-12 col-ms-12 col-md-6">

    <div class="panel panel-primary">

    ? ?<div class="panel-heading">最新訂單</div>

    ? ?<div class="panel-body">

    ? ? <table class="table panel-table">

    ? ? ?<tr>

    ? ? ?<th>#</th>

    ? ? ?<th>產品</th>

    ? ? ?<th>數量</th>

    ? ? ?<th>總金額</th>

    ? ? ?<th>業務員</th>

    ? ? ?</tr>

    ? ? ?<tr>

    ? ? ?<td>1</td>

    ? ? ?<td>Apple Macbook</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>

    ? ? </table>?

    ? ? <div class="btn-group" role="group" aria-label="...">

    ? ? ?<button type="button" class="btn btn-primary">查看詳情 <span class="glyphicon glyphicon-forward" aria-hidden="true"></span></button>

    </div> ? ? ? ?

    ? ? </div>


    </div>

    </div>

    <div class="col-xs-12 col-ms-12 col-md-6">

    <div class="panel panel-primary">

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

    ? ?<div class="panel-body progress-part">

    ? ?<div class="progress-title"><p class="label label-primary">水井挖掘工程</p></div>

    ? ? ?<div class="progress">

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

    ? ? ?<span class="sr-only">20% Complete</span>

    ? ? </div>

    </div>

    <div? class="progress-title"><p class="label label-danger">基建工程</p></div>

    <div class="progress">

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

    ? ? ?<span class="sr-only">20% Complete</span>

    ? ? </div>

    </div>

    ? ?</div>

    </div>

    </div>

    </div>

    </div>

    </div>

    </div>


    <div class="modal fade" tabindex="-1" role="dialog" id="help">

    ? <div class="modal-dialog" role="document">

    ? ? <div class="modal-content">

    ? ? ? <div class="modal-header">

    ? ? ? ? <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

    ? ? ? ? <h4 class="modal-title">Modal title</h4>

    ? ? ? </div>

    ? ? ? <div class="modal-body">

    ? ? ? ? <p>One fine body&hellip;</p>

    ? ? ? </div>

    ? ? ? <div class="modal-footer">

    ? ? ? ? <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

    ? ? ? </div>

    ? ? </div><!-- /.modal-content -->

    ? </div><!-- /.modal-dialog -->

    </div><!-- /.modal -->


    <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 采集 收起 來源：編程挑戰

    2018-07-16

  • 添加,.navbar-fixed-top讓導航條固定在頂端

    可以包含一個,container或.container-fluid容器，讓導航條居中或自適應顯示

    查看全部

  • 1.Carousel是一個用于輪播內容的組件（bootstrap對于組件的實現是用data屬性來實現的） Carousel基本結構如下圖：<ol></ol>對應輪播圖下面的小點點；ol下面的div對應輪播組件內容，而組件內容中的div可通過p、h來，設置圖片文字，<a class="btn 其他按鈕類名">來設置有超鏈接的按鈕，如：下載；div下面的兩個<a>對應輪播的用于鼠標切換的左右按鈕 ol中的data-slid-to=“0”表示index（即縮影）為從0開始，這里<li>的個數及li中data-slid-to=“”的編號與下面輪播內容的個數相對應https://img1.sycdn.imooc.com//5b420d9c00013ac312800720.jpg

    查看全部
    0 采集 收起 來源：滾動圖片廣告

    2018-07-08

  • bootstrap必須基于jquary，所以要在引用bootstrap框架之前引入jquary


    查看全部

  • <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

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

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

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

    <link 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: 40px;

    ? ? ? ? ? ? color: #5a5a5a;

    ? ? ? ? }


    /* 下面是左側導航欄的代碼 */

    .sidebar {

    ? ? ? ? ? ? position: fixed;

    ? ? ? ? ? ? top: 51px;

    ? ? ? ? ? ? bottom: 0;

    ? ? ? ? ? ? left: 0;

    ? ? ? ? ? ? z-index: 1000;

    ? ? ? ? ? ? display: block;

    ? ? ? ? ? ? padding: 20px;

    ? ? ? ? ? ? overflow-x: hidden;

    ? ? ? ? ? ? overflow-y: auto;

    ? ? ? ? ? ? background-color: #ddd;

    ? ? ? ? ? ? border-right: 1px solid #eee;

    ? ? ? ? }


    ? ? ? ? .nav-sidebar {

    ? ? ? ? ? ? margin-right: -21px;

    ? ? ? ? ? ? margin-bottom: 20px;

    ? ? ? ? ? ? margin-left: -20px;

    ? ? ? ? }


    ? ? ? ? .nav-sidebar > li > a {

    ? ? ? ? ? ? padding-right: 20px;

    ? ? ? ? ? ? padding-left: 20px;

    ? ? ? ? }


    ? ? ? ? .nav-sidebar > .active > a,

    ? ? ? ? .nav-sidebar > .active > a:hover,

    ? ? ? ? .nav-sidebar > .active > a:focus {

    ? ? ? ? ? ? color: #fff;

    ? ? ? ? ? ? background-color: #428bca;

    ? ? ? ? }

    已久


    ? ? ? ? .main {

    ? ? ? ? ? ? padding: 20px;

    ? ? ? ? }


    ? ? ? ? .main .page-header {

    ? ? ? ? ? ? margin-top: 0;

    ? ? ? ? }

    </style>


    </head>


    <body>

    <!--下面是頂部導航欄的代碼-->

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

    <div class="container-fluid">

    <div class="navbar-header">

    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

    ? ? ? ? ? ? ? ? ? ? data-target="#bs-example-navbar-collapse-1">

    <span class="sr-only">Toggle navigation</span>

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

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

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

    </button>

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

    </div>


    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

    <ul class="nav navbar-nav">

    <li class="active"><a href="#">首頁</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 class="dropdown-header">業務功能</li>

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

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

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

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

    <li class="dropdown-header">系統功能</li>

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

    </ul>

    </li>

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

    </ul>

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

    <div class="form-group">

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

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

    </div>

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

    </form>

    </div>

    </div>

    </nav>


    <!--自適應布局-->

    <div class="container-fluid">

    <div class="row">

    <!--左側導航欄-->


    <div class="col-sm-3 col-md-2 sidebar">

    <ul class="nav nav-sidebar">

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

    </ul>

    <ul class="nav nav-sidebar">

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

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

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

    </ul>

    <ul class="nav nav-sidebar">

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

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

    </ul>

    </div>

    <!—右側管理控制臺-->

    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

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


    <p>

    <!--一組按鈕控件-->

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

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

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

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

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

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

    </p>

    <div class="row">

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

    <!--panel面板，里面放置一些控件，下同-->

    <div class="panel panel-primary">

    <!--panel面板的標題，下同-->

    <div class="panel-heading">

    <h3 class="panel-title">最新提醒</h3>

    </div>

    <!--panel面板的內容，下同-->

    <div class="panel-body">

    <div class="alert alert-success" role="alert">

    <strong>提示</strong>您的訂單（2014001）已經審批通過！

    </div>

    <div class="alert alert-danger" role="alert">

    <strong>提示</strong>您的訂單（2014002）被打回！

    </div>

    <div class="alert alert-warning" role="alert">

    <strong>提示</strong>您的訂單（2013001）客戶付款延遲！

    </div>

    </div>

    </div>

    </div>

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


    <div class="panel panel-primary">

    <div class="panel-heading">

    <h3 class="panel-title">我的任務</h3>

    </div>

    <div class="panel-body">

    <ul class="nav nav-pills nav-stacked" role="tablist">

    <li role="presentation">

    <a href="#" class="alert alert-info">

    <span class="badge pull-right">42</span>

    訂單審批

    </a>

    </li>

    <li role="presentation">

    <a href="#" class="alert alert-info">

    <span class="badge pull-right">20</span>

    收款確認

    </a>

    </li>

    <li role="presentation">

    <a href="#" class="alert alert-info">

    <span class="badge pull-right">10</span>

    付款確認

    </a>

    </li>

    </ul>

    </div>

    </div>

    </div>

    </div>

    <div class="row">

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

    <div class="panel panel-primary">

    <div class="panel-heading">

    <h3 class="panel-title">最新訂單</h3>

    </div>

    <div class="panel-body">

    <table class="table table-striped">

    <thead>

    <tr>

    <th>#</th>

    <th>產品</th>

    <th>數量</th>

    <th>總金額</th>

    <th>業務員</th>

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

    <p><a class="btn btn-primary" href="#" role="button">查看詳細&raquo;</a></p>

    </div>

    </div>

    </div>

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

    <div class="panel panel-primary">

    <div class="panel-heading">

    <h3 class="panel-title">工程進度</h3>

    </div>

    <div class="panel-body">

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


    <div class="progress">

    <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="80"

    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?aria-valuemin="0" aria-valuemax="100" ><span class="sr-only">80% Complete</span>

    </div>

    </div>

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


    <div class="progress">

    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="30"

    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?aria-valuemin="0" aria-valuemax="100" ><span class="sr-only">30% Complete (danger)</span>

    </div>

    </div>

    </div>

    </div>

    </div>

    </div>

    </div>

    </div>

    </div>



    <script src=" https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

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


    </body>

    </html>




    查看全部
    2 采集 收起 來源：編程挑戰

    2018-06-06


  • <!DOCTYPE html>

    <html lang="en">


    <head>

    <meta charset="UTF-8">

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

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

    <title>Document</title>


    <!-- 1. 引入 bootstrap 的全局樣式-->

    <link rel="stylesheet" href="dist/css/bootstrap.min.css">

    </head>


    <body>


    <h1 class="text-center">Hello World!</h1>


    <button class="btn btn-info center-block">我是按鈕，按我一下</button>



    <!-- 2. 引入Jquery 文件-->

    <!--jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊)-->

    <script src="jquery/jquery-3.3.1.min.js"></script>

    <!-- 3. 引入bootstrap JavaScript -->

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

    </body>


    </html>



    查看全部
    3 采集 收起 來源：編程練習

    2018-06-05

  • <h1 class="text-center">hello word</h1>
    ?<button class="btn center-block btn-primary " >按鈕</button>
    查看全部
    1 采集 收起 來源：編程練習

    2018-05-15

  • html5shiv主要解決HTML5提出的新的元素不被IE6-8識別，這些新元素不能作為父節點包裹子元素，并且不能應用CSS樣式。讓CSS 樣式應用在未知元素上只需執行 document.createElement(elementName) 即可實現。html5shiv就是根據這個原理創建的。

    查看全部
    0 采集 收起 來源：練習題

    2018-05-13

  • Bootstrap是Twitter推出的一個開源的用于前端開發的工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架。

    查看全部
    0 采集 收起 來源：練習題

    2018-05-13

  • 插件素材

    查看全部

  • Available glyphs

    查看全部

  • tooltip示例

    查看全部

  • Grid options

    查看全部

  • 布局結構

    查看全部

  • IE版本低于9

    查看全部
首頁上一頁567891011下一頁尾頁

舉報

0/150
提交
取消
課程須知
本課程針對Bootstrap基礎知識進行概覽式介紹，所以希望您已學習本網站的“玩轉Bootstrap”課程知識點，同時希望您會使用HTML、CSS、JavaScript做簡單的網頁，如果您已具備jQuery基礎知識會更好。
老師告訴你能學到什么？
1.了解Bootstrap框架基礎知識。 2. 如何開始使用Bootstrap框架。 3. 如何運行初始代碼，并修改成所需要的代碼。 4. 如何利用Bootstrap制作響應式布局的網頁。 5. 如何使用Bootstrap中的組件、插件及定制。

微信掃碼，參與3人拼團

微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號
友情提示：

您好，此課程屬于遷移課程，您已購買該課程，無需重復購買，感謝您對慕課網的支持！