-
滾動廣告 carousel
carousel-example-generic
點點導航:
? ? carousel-indicators
輪播組件的內容:
? ? .carousel-inner? role:listbox
????.carousel-caption
分頁按鈕:
? ? .carousel-example-generic? ?data-slide="prev"
????左右按鈕:glyphicon??glyphicon-chevron-left、right
查看全部 -
厲害了躡手躡腳睡覺睡覺睡覺忘記額幾哈
查看全部 -
很有用查看全部
-
v3.3查看全部
-
導航欄添加分割線Bootstrap中<li class="divider"></li>可以添加分割線
在 Bootstrap中,任何下拉菜單中均可通過添加標題來標明一組動作,添加方式為:<li class="dropdown-header">標題名稱</li>。
查看全部 -
導航條是在應用或網站中作為導航頁頭的響應式基礎組件。
它在移動設備上可以折疊(并且可開可關),且在視口(viewport)寬度增加時逐漸變為水平展開模式。
響應式導航條在移動設備上默認折疊。
查看全部 -
導航條navabar
1、添加類【navbar-fixed-top】可以讓導航條固定在頂部
2、可以包含一個類為【container】或者類【container-fluid】的容器,從而讓導航條居中或者自適應顯示
3、通過添加類【navbar-inverse】可以改變導航條的外觀,變成黑底顯示
4、添加類【navbar-fixed-top】可以讓導航條固定在頂部,固定的導航條會遮住頁面上的其他內容,除非給<body>元素設置padding。導航條的默認高度為“50px”,比如設置body{padding-top:70px};
查看全部 -
Bootstrap工作原理
①行必須包含在container這個容器中
② 使用行在行中組建一組列,內容放置在列中
③通過設置padding控制列之間間距,為第一列與最后一列設置負值的magin
????來抵消padding的影響④列是通過1~·12來控制跨越范圍
查看全部 -
Bootstrap中的JS插件依賴于Jquery。因此Jquery要在Bootstrap之前引用
?
查看全部 -
打開標簽頁
查看全部 -
彈出框代碼
查看全部 -
滾動廣告:
查看全部 -
下拉菜單代碼
查看全部 -
導航條基本代碼
查看全部 -
案例效果:瀏覽器博物館
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" >
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<title>Hello World</title>
</head>
<body>
? ? <div class="container nav-main" >
? ? ? ? <h1 class="web-title">Hello World!</h1>
? ? ? ? <button type="button" class="btn btn-lg btn-primary">我是按鈕,按我一下!</button>
? ? </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>
查看全部 -
bootstrap
html5shiv主要解決HTML5提出的新的元素不被IE6-8識別,這些新元素不能作為父節點包裹子元素,并且不能應用CSS樣式。讓CSS 樣式應用在未知元素上只需執行 document.createElement(elementName) 即可實現。html5shiv就是根據這個原理創建的。
查看全部 -
下拉菜單!
查看全部 -
Bootstrap是Twitter推出的一個開源的用于前端開發的工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發,是一個CSS/HTML框架
查看全部 -
Bootstrap
查看全部 -
<!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 = "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查看全部
-
Tooltip 浮動提示框效果
data-toggle="tooltip"
data-placement="left" 代表位置
查看全部
舉報