![](/img/trans.png)
[英]How to make a Twitter Bootstrap 2.x navbar using scrollspy
[英]How to make 2 (frame?) using twitter bootstrap?
這是我開始在twitter引導程序中創建的內容。.我是新使用此功能..您能幫我在html內制作一個2拆分頁面嗎,向下滾動時標題中的菜單不會消失..我在下面制作了html代碼謝謝!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Teacher</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">`
/* CSS used here will be applied after bootstrap.css */
body{
margin-top: 1px;
}
.divide-nav{
height: 80px;
background-color: #428bca;
}
.divide-text{
color:#fff;
line-height: 20px;
font-size:20px;
padding: 15px 0;
}
.affix {
top: 1px;
width:100%;
}
.filler{
min-height: 2000px;
}
.navbar-form {
padding-left: 0;
}
.navbar-collapse{
padding-left:0;
}
#footer {
height: 60px;
background-color: #f5f5f5;
}
</style>
<style type="text/css"></style>
</head>
<!-- HTML code from Bootply.com editor -->
<body>
<div class="divide-nav">
<div class="container">
<p class="divide-text"><img src ="musar-logo.png"></p>
</div>
</div>
<nav class="navbar navbar-default navbar-lower affix-top" role="navigation">
<div class="container">
<div class="collapse navbar-collapse collapse-buttons">
<form class="navbar-form navbar-left" role="search">
<button class="btn btn-success">Button</button>
<button class="btn btn-default">Button</button>
<button class="btn btn-default">Button</button>
<button class="btn btn-default">Button</button>
</form>
</div>
</div>
</nav>
<frameset cols="25%,*,25%">
<frame src="1.html">
<frame src="it.html">
<frame src="it.html">
</frameset>
<div class="container">
<div class="row">
<div class="filler"></div>
</div>
</div>
<div class="modal-body row">
<div class="col-md-6">
<!-- Your first column here -->
</div>
<div class="col-md-6">
<!-- Your second column here -->
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- JavaScript jQuery code from Bootply.com editor -->
<script type="text/javascript">
$(document).ready(function() {
$('.navbar-lower').affix({
offset: {top: 50}
});
});
</script>
<div id="footer">
<div class="container">
<p class="text-muted credit">Footer Trial</a></p>
</div>
</div>
</body>
</html>
在上述答案的基礎上,我提出了一個小提琴。 http://jsfiddle.net/w7s2o90e/1/
<title>Teacher</title>
<!-- HTML code from Bootply.com editor -->
<body>
<div class="divide-nav">
<div class="container">
<p class="divide-text"><img src ="musar-logo.png"></p>
</div>
</div>
<nav class="navbar navbar-default navbar-lower affix-top" role="navigation">
<div class="container">
<div class="collapse navbar-collapse collapse-buttons">
<form class="navbar-form navbar-left" role="search">
<button class="btn btn-success">Button</button>
<button class="btn btn-default">Button</button>
<button class="btn btn-default">Button</button>
<button class="btn btn-default">Button</button>
</form>
</div>
</div>
</nav>
<frameset cols="25%,*,25%">
<frame src="1.html">
<frame src="it.html">
<frame src="it.html">
</frameset>
<div class="row-fluid">
<div id="left" class="col-sm-4">
<div id="allYourContent" class= "col-sm-12">
</div>
</div>
<div id="right" class="col-sm-8">
<!--Body content-->
</div>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted credit">Footer Trial</a></p>
</div>
</div>
</body>
如果您想要固定尺寸,並且左側滾動使用
overflow:scroll
在你的CSS。
上面的兩列有效,但是直到您向它們添加內容或大小之前,它們都不會顯示(請參見小提琴)。 我用了
class="col-sm-4" & class="col-sm-8"
而不是“ span”,但應該相似。
我沒有編輯所有代碼,但是總體上看起來像是您要實現的代碼。
您可以進行兩個網格布局以實現此目的。 您可以在http://getbootstrap.com/2.3.2/scaffolding.html上找到更多文檔。
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.