狠狠日天天射轻轻干,亚洲曰本伊人VA,精品免费一区二区三区蜜桃av

首頁免費課基于bootstrap的網頁開發筆記

基于bootstrap的網頁開發

                
                姜維
            Web前端工程師

                    查看講師更多課程 
                    姜維講師的其他課程
                
jQuery插件——Validation Plugin
中級·65867
免費課程
                                
jQM Web App –列車時刻表
中級·38483
免費課程
                                
WEB調試工具---Firebug
初級·77652
免費課程
                                
網頁定位導航特效
初級·71395
免費課程
                                
用JS實現放大鏡特效
初級·30103
免費課程
                                
                難度中級
            
                時長 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 rel="stylesheet">


<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" >
<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="http://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" >
<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

首頁上一頁 1 2 3 4 5 6 7 下一頁尾頁

舉報

0/150

提交

取消

開始學習

課程須知: 本課程針對Bootstrap基礎知識進行概覽式介紹，所以希望您已學習本網站的“玩轉Bootstrap”課程知識點，同時希望您會使用HTML、CSS、JavaScript做簡單的網頁，如果您已具備jQuery基礎知識會更好。

老師告訴你能學到什么？: 1.了解Bootstrap框架基礎知識。 2. 如何開始使用Bootstrap框架。 3. 如何運行初始代碼，并修改成所需要的代碼。 4. 如何利用Bootstrap制作響應式布局的網頁。 5. 如何使用Bootstrap中的組件、插件及定制。

微信掃碼，參與3人拼團

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

熱搜

最近搜索清空

基于bootstrap的網頁開發