-
移動瀏覽器
查看全部 -
IE最新渲染模式
查看全部 -
juery必須在bootsrap之前引用,因?yàn)閖s都是基于juery的
查看全部 -
<!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>練習(xí)</title>
<link rel="stylesheet">
<style>
body {
padding-top: 50px;
}
.sildebar {
background-color: #ddd;
padding-top: 20px;
}
@media (min-width:992px) {
.sildebar {
position: fixed;
top: 50px;
left: 0;
bottom: 0;
}
}
.mblff {
margin-bottom: 20px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
? <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" 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="#">某管理系統(tǒng)</a> </div>
? ? <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
? ? ? <ul class="nav navbar-nav">
? ? ? ? <li class="active"><a href="#">首頁 <span class="sr-only">(current)</span></a></li>
? ? ? ? <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">功能 <span class="caret"></span></a>
? ? ? ? ? <ul class="dropdown-menu">
? ? ? ? ? ? <li><a href="#">功能下拉菜單</a></li>
? ? ? ? ? ? <li><a href="#">功能下拉菜單</a></li>
? ? ? ? ? ? <li><a href="#">功能下拉菜單</a></li>
? ? ? ? ? ? <li role="separator" class="divider"></li>
? ? ? ? ? ? <li><a href="#">功能下拉菜單</a></li>
? ? ? ? ? ? <li role="separator" class="divider"></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>
<!--Main Content-->
<div class="container-fluid">
? <div class="row">
? ? <div class="col-md-2 sildebar">
? ? ? <ul class="nav nav-pills nav-stacked">
? ? ? ? <li role="presentation" class="active"><a href="#">首頁</a></li>
? ? ? ? <li role="presentation"><a href="#">信息建立</a></li>
? ? ? ? <li role="presentation"><a href="#">信息查詢</a></li>
? ? ? ? <li role="presentation"><a href="#">信息管理</a></li>
? ? ? ? <li role="presentation"><a href="#">設(shè)置</a></li>
? ? ? ? <li role="presentation"><a href="#">幫助</a></li>
? ? ? </ul>
? ? </div>
? ? <!--right-->
? ? <div class="col-md-10 col-md-offset-2">
? ? ? <h1>管理控制臺</h1>
? ? ? <hr class="divider">
? ? ? <div class="mblff">?
? ? ? ? <!-- Standard button -->
? ? ? ? <button type="button" class="btn btn-lg btn-default">Default</button>
? ? ? ??
? ? ? ? <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
? ? ? ? <button type="button" class="btn btn-lg btn-primary">Primary</button>
? ? ? ??
? ? ? ? <!-- Indicates a successful or positive action -->
? ? ? ? <button type="button" class="btn btn-lg btn-success">Success</button>
? ? ? ??
? ? ? ? <!-- Contextual button for informational alert messages -->
? ? ? ? <button type="button" class="btn btn-lg btn-info">Info</button>
? ? ? ??
? ? ? ? <!-- Indicates caution should be taken with this action -->
? ? ? ? <button type="button" class="btn btn-lg btn-warning">Warning</button>
? ? ? ??
? ? ? ? <!-- Indicates a dangerous or potentially negative action -->
? ? ? ? <button type="button" class="btn btn-lg btn-danger">Danger</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" role="alert">提示您的訂單(2014001)已經(jīng)審批通過!</div>
? ? ? ? ? ? ? <div class="alert alert-info" role="alert">提示您的訂單(2014002)被打回!</div>
? ? ? ? ? ? ? <div class="alert alert-warning" role="alert">提示您的訂單(2013001)客戶付款延遲!</div>
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <div class="col-md-6">
? ? ? ? ? <div class="panel panel-primary">
? ? ? ? ? ? <div class="panel-heading">最新提醒</div>
? ? ? ? ? ? <div class="panel-body">
? ? ? ? ? ? ? <ul class="nav nav-pills nav-stacked">
? ? ? ? ? ? ? ? <li role="presentation"><a class="alert alert-info alert-info-lg" href="#">首頁<span class="badge pull-right">42</span></a></li>
? ? ? ? ? ? ? ? <li role="presentation"><a class="alert alert-info" href="#">信息建立<span class="badge pull-right">42</span></a></li>
? ? ? ? ? ? ? ? <li role="presentation"><a class="alert alert-info" href="#">信息查詢<span class="badge pull-right">42</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">最新提醒</div>
? ? ? ? ? ? <div class="panel-body">
? ? ? ? ? ? ? <table class="table table-striped">
? ? ? ? ? ? ? ? <thead>
? ? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? <th>#</th>
? ? ? ? ? ? ? ? ? ? <th>產(chǎn)品</th>
? ? ? ? ? ? ? ? ? ? <th>數(shù)量</th>
? ? ? ? ? ? ? ? ? ? <th>總金額</th>
? ? ? ? ? ? ? ? ? ? <th>業(yè)務(wù)員</th>
? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? </thead>
? ? ? ? ? ? ? ? <tbody>
? ? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? <td>1</td>
? ? ? ? ? ? ? ? ? ? <td>Apple Macbook air</td>
? ? ? ? ? ? ? ? ? ? <td>10</td>
? ? ? ? ? ? ? ? ? ? <td>80000</td>
? ? ? ? ? ? ? ? ? ? <td>王小賤</td>
? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? <td>1</td>
? ? ? ? ? ? ? ? ? ? <td>Apple Macbook air</td>
? ? ? ? ? ? ? ? ? ? <td>10</td>
? ? ? ? ? ? ? ? ? ? <td>80000</td>
? ? ? ? ? ? ? ? ? ? <td>王小賤</td>
? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? <td>1</td>
? ? ? ? ? ? ? ? ? ? <td>Apple Macbook air</td>
? ? ? ? ? ? ? ? ? ? <td>10</td>
? ? ? ? ? ? ? ? ? ? <td>80000</td>
? ? ? ? ? ? ? ? ? ? <td>王小賤</td>
? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? <td>1</td>
? ? ? ? ? ? ? ? ? ? <td>Apple Macbook air</td>
? ? ? ? ? ? ? ? ? ? <td>10</td>
? ? ? ? ? ? ? ? ? ? <td>80000</td>
? ? ? ? ? ? ? ? ? ? <td>王小賤</td>
? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? </tbody>
? ? ? ? ? ? ? </table>
? ? ? ? ? ? ? <button type="submit" class="btn btn-primary">查看詳細(xì) >></button>
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <div class="col-md-6">
? ? ? ? ? <div class="panel panel-primary">
? ? ? ? ? ? <div class="panel-heading">最新提醒</div>
? ? ? ? ? ? <div class="panel-body">
? ? ? ? ? ? ? <h3><span class="label label-default">NeNewNeww</span></h3>
? ? ? ? ? ? ? <div class="progress">純色
? ? ? ? ? ? ? ? <div class="progress-bar progress-bar-success"? role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" >70%</div>
</div>
? ? ? ? ? ? ??
? ? ? ? ? ? ??
? ? ? ? ? ? ??
? ? ? ? ? ? ? ?<h3><span class="label label-default">NeNewNeww</span></h3>
? ? ? ? ? ? ? ? <div class="progress progress-striped active"> 條紋動態(tài)色
? ? ? ? ? ? ? ? ? <div class="progress-bar progress-bar-warning"? role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" >90%</div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? <h3><span class="label label-default">NeNewNeww</span></h3>
? ? ? ? ? ? ? ? <div class="progress">疊色
? ? ? ? ? ? ? ? ? <div class="progress-bar progress-bar-success" >20%</div>
? ? ? ? ? ? ? ? ? <div class="progress-bar progress-bar-info progress-bar-striped" >20%</div>
? ? ? ? ? ? ? ? ? <div class="progress-bar progress-bar-warning" >30%</div>
? ? ? ? ? ? ? ? ? <div class="progress-bar progress-bar-danger progress-bar-striped" >15%</div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? </div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>?
<script type="text/javascript" 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">
<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>
<style type="text/css">
? ? body{
? padding: 5px;
?}
?#pal .row p{ border: 1px solid #ccc; padding: 5px;}
?}
</style>
</head>
<body>
<div class="container" id="pal">
<div class="row">
<div class="col-md-4">
? ? ? ? ? ? <p>慕課網(wǎng)是一家從事互聯(lián)網(wǎng)免費(fèi)教學(xué)的網(wǎng)絡(luò)教育公司。秉承"開拓、創(chuàng)新、公平、分享"的精神,將互聯(lián)網(wǎng)特性全面的應(yīng)用在教育領(lǐng)域,致力于為教育機(jī)構(gòu)及求學(xué)者打造一站式互動在線教育品牌。</p>
</div>
<div class="col-md-4">
? ? ? ? ? ? <p>慕課網(wǎng)是一家從事互聯(lián)網(wǎng)免費(fèi)教學(xué)的網(wǎng)絡(luò)教育公司。秉承"開拓、創(chuàng)新、公平、分享"的精神,將互聯(lián)網(wǎng)特性全面的應(yīng)用在教育領(lǐng)域,致力于為教育機(jī)構(gòu)及求學(xué)者打造一站式互動在線教育品牌。</p>
</div>
<div class="col-md-4">
? ? ? ? ? ? <p>慕課網(wǎng)是一家從事互聯(lián)網(wǎng)免費(fèi)教學(xué)的網(wǎng)絡(luò)教育公司。秉承"開拓、創(chuàng)新、公平、分享"的精神,將互聯(lián)網(wǎng)特性全面的應(yīng)用在教育領(lǐng)域,致力于為教育機(jī)構(gòu)及求學(xué)者打造一站式互動在線教育品牌。</p>
</div>
</div>
<div class="row">
? ? <div class="col-md-4">
? ? ? ? ? ? <p>慕課網(wǎng)是一家從事互聯(lián)網(wǎng)免費(fèi)教學(xué)的網(wǎng)絡(luò)教育公司。秉承"開拓、創(chuàng)新、公平、分享"的精神,將互聯(lián)網(wǎng)特性全面的應(yīng)用在教育領(lǐng)域,致力于為教育機(jī)構(gòu)及求學(xué)者打造一站式互動在線教育品牌。</p>
</div>
<div class="col-md-4 col-md-offset-4">
? ? ? ? ? ? <p>慕課網(wǎng)是一家從事互聯(lián)網(wǎng)免費(fèi)教學(xué)的網(wǎng)絡(luò)教育公司。秉承"開拓、創(chuàng)新、公平、分享"的精神,將互聯(lián)網(wǎng)特性全面的應(yīng)用在教育領(lǐng)域,致力于為教育機(jī)構(gòu)及求學(xué)者打造一站式互動在線教育品牌。</p>
</div>
</div>
<div class="row">
? ? <div class="col-md-3 col-md-offset-3">
? ? ? ? ? ? <p>慕課網(wǎng)是一家從事互聯(lián)網(wǎng)免費(fèi)教學(xué)的網(wǎng)絡(luò)教育公司。秉承"開拓、創(chuàng)新、公平、分享"的精神,將互聯(lián)網(wǎng)特性全面的應(yīng)用在教育領(lǐng)域,致力于為教育機(jī)構(gòu)及求學(xué)者打造一站式互動在線教育品牌。</p>
</div>
<div class="col-md-3 col-md-offset-3">
? ? ? ? ? ? <p>慕課網(wǎng)是一家從事互聯(lián)網(wǎng)免費(fèi)教學(xué)的網(wǎng)絡(luò)教育公司。秉承"開拓、創(chuàng)新、公平、分享"的精神,將互聯(lián)網(wǎng)特性全面的應(yīng)用在教育領(lǐng)域,致力于為教育機(jī)構(gòu)及求學(xué)者打造一站式互動在線教育品牌。</p>
</div>
</div>
<div class="row">
? ? <div class="col-md-6 col-md-offset-3">
? ? ? ? ? ? <p>慕課網(wǎng)是一家從事互聯(lián)網(wǎng)免費(fèi)教學(xué)的網(wǎng)絡(luò)教育公司。秉承"開拓、創(chuàng)新、公平、分享"的精神,將互聯(lián)網(wǎng)特性全面的應(yīng)用在教育領(lǐng)域,致力于為教育機(jī)構(gòu)及求學(xué)者打造一站式互動在線教育品牌。</p>
</div>
</div>
</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" >
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
? ? ? ?.carousel{
height:60%;
max-height: 600px;
background-color: #000;
? overflow: hidden;
? }
? .carousel .item{
background-color: #000;
max-height: 600px;
? }
? .carousel img{
width: 100%;
? ? min-height:300px;
? ??
? }
? .carousel-caption p{
? margin-bottom: 20px;
? font-size: 16px;
? }
? .carousel-caption a{
? ?margin-bottom: 30px;
? }
? ?@media (max-width: 768px){
? ? ? .carousel{ min-width: 370px;}
? ??
? }
??
</style>
</head>
<body>
<!--banner? -->
??
? <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
? <!-- Indicators -->
? <ol class="carousel-indicators">
? ? <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
? ? <li data-target="#carousel-example-generic" data-slide-to="1"></li>
? ? <li data-target="#carousel-example-generic" data-slide-to="2"></li>
? </ol>
? <!-- Wrapper for slides -->
? <div class="carousel-inner" role="listbox">
? ? <div class="item active">
? ? ? <img src="http://img1.sycdn.imooc.com//5412ad400001e52014280484.jpg" alt="1 slide">
? ? ? <div class="carousel-caption">
? ? ? ? <h1>Chome</h1>
? ? ? ? <p>Google chrome,又稱Google瀏覽器,是一個由谷歌公司開發(fā)的網(wǎng)頁瀏覽器。</p>
? ? ? ? <a class="btn btn-lg btn-primary" href="">點(diǎn)我下載</a>
? ? ? </div>
? ? </div>
? ??
? ? <div class="item">
? ? ? <img src="http://img1.sycdn.imooc.com//5412ad7c0001d2eb10880541.jpg" alt="2 slide">
? ? ? <div class="carousel-caption">
? ? ? ? <h1>Chome</h1>
? ? ? ? <p>Google chrome,又稱Google瀏覽器,是一個由谷歌公司開發(fā)的網(wǎng)頁瀏覽器。</p>
? ? ? ? <a class="btn btn-lg btn-primary" href="">點(diǎn)我下載</a>
? ? ? </div>
? ? </div>
? ? <div class="item">
? ? ? <img src="http://img1.sycdn.imooc.com//5412ae5c0001653b12800644.jpg" alt="3 slide">
? ? ? <div class="carousel-caption">
? ? ? ? <h1>Firefox</h1>
? ? ? ? <p>Google chrome,又稱Google瀏覽器,是一個由谷歌公司開發(fā)的網(wǎng)頁瀏覽器。</p>
? ? ? ? <a class="btn btn-lg btn-primary" href="">點(diǎn)我下載</a>
? ? ? </div>
? ? </div>
? ??
? </div>
? <!-- Controls -->
? <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
? ? <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
? ? <span class="sr-only">上一頁</span>
? </a>
? <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
? ? <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
? ? <span class="sr-only">下一頁</span>
? </a>
</div>
?<!--banner end -->
??
查看全部 -
在IE運(yùn)行最新的渲染模式
查看全部 -
4
查看全部 -
3
查看全部 -
2
查看全部 -
導(dǎo)航條
查看全部 -
1
查看全部 -
0.第一塊ol部分是對應(yīng)底部多個小點(diǎn)點(diǎn)的代碼,第二塊item部分是對應(yīng)輪播圖片的代碼,第三塊部分是對應(yīng)左右滑動圖標(biāo)的代碼。 1.<ol>部分,多個輪播圖則引用多個data,data-slide-to=“0,1,2,3,4,5…n”,與引用<dic class=“item”>個數(shù)相對應(yīng)、相同。 2.輪播圖片框太大,要加一些樣式限制它。限制.carousel的高度和背景。.carousel:{height:500px;backgroung-color:#000;}.carousel .item{heighe:500px;background-color:#000;} 當(dāng)分辨率特別高時,有些圖片填滿,有些圖片沒填滿,此時給圖片也設(shè)置一個樣式。.carousel.item{width:100%;使圖片自動縮放去填滿。} 3.要讓導(dǎo)航欄緊挨著滾動條,此時把body的padding-top設(shè)置成與滾動框一樣即可。就會緊貼著。 4.輪播圖上的字體大小和間距,.carousel-caption p{margin-bottom:20px;font-size:20px;line-height:1.8;}查看全部
-
container-fluid
查看全部 -
導(dǎo)航?
navbar-fixed-top固定頂部
navbar-inverse黑色
container默認(rèn)居中
container-flus
查看全部
舉報