年底没什么项目做了，整理下最近做的网站使用到的bootstrap知识
一、导入bootstrap样式和脚本
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="js/bootstrap.min.js" type="text/javascript"></script>
二、导航条
<div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand pull-left" href="#">RenderKa </a> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="nav-collapse collapse"> <div class="icon_home"><a href="Index.aspx" target="_blank">CN</a>/EN</div> <ul id="nav-list" class="nav pull-right"> <li><a href="#price">Price</a></li> <li><a href="#support">Support</a></li> <li><a href="#workflow">Workflow</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> </div> </div>
1、.navbar class 添加 class .navbar-fixed-top：表示让导航栏固定在页面的顶部
2、.brand class: 以不同的方式显示
3、.pull-left: 靠左对齐
4、为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的
三、布局容器
<div class="container container-fluid"> <div class="row-fluid" id="workflow"> <h1 class="page-title" >Workflow <a href="#price" class="arrow-top"> <img src="img/arrow-top.png" alt="bootstrap知识小点_html/css_WEB-ITnose" > </a> </h1> <div class="span2" style="max-width:90%"><img src="img/kefu1.jpg" / alt="bootstrap知识小点_html/css_WEB-ITnose" > contact our customer service via Skype or email to place your order </div> <div class="span1" style="max-width:90%"><img src="img/Arrows.jpg" / alt="bootstrap知识小点_html/css_WEB-ITnose" ></div> <div class="span2" style="max-width:90%"><img src="img/wendong1.jpg" / alt="bootstrap知识小点_html/css_WEB-ITnose" > upload your archived scene file including all materials and setups </div> <div class="span1" style="max-width:90%"><img src="img/Arrows.jpg" / alt="bootstrap知识小点_html/css_WEB-ITnose" ></div> <div class="span2" style="max-width:90%"><img src="img/times1.jpg" / alt="bootstrap知识小点_html/css_WEB-ITnose" > we will send testframes to confirm that everything works fine at our end after your confirmation we will proceed start rendering </div> <div class="span1" style="max-width:90%"><img src="img/Arrows.jpg" / alt="bootstrap知识小点_html/css_WEB-ITnose" ></div> <div class="span2" style="max-width:90%"><img src="img/xiazai1.jpg" / alt="bootstrap知识小点_html/css_WEB-ITnose" > after we received the payment we will send the files via dropbox or ftp </div> </div> </div>
1、.container class: 用于固定宽度并支持响应式布局的容器
2、.container-fluid: 用于 100% 宽度，占据全部视口（viewport）的容器
3、1个row里最多12个span
四、滚动监听
1、引入js：
2、（1）向您想要监听的元素（通常是 body）添加 data-spy="scroll"，然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target
（2）
$("#nav-list li, #scroll_up").click(function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: $($(this).children("a").attr("href")).offset().top },1500); });
