bootstrap知識小點

年末沒什麼項目作了，整理下最近作的網站使用到的bootstrap知識

1、導入bootstrap樣式和腳本

    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/bootstrap.min.js" type="text/javascript"></script>

2、導航條

<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>

View Code

一、.navbar class 添加 class .navbar-fixed-top：表示讓導航欄固定在頁面的頂部

二、.brand class: 以不一樣的方式顯示

三、.pull-left: 靠左對齊

四、爲了給導航欄添加響應式特性，您要摺疊的內容必須包裹在帶有 classes .collapse、.navbar-collapse 的 <div> 中。摺疊起來的導航欄其實是一個帶有 class .navbar-toggle 及兩個 data- 元素的按鈕。第一個是 data-toggle，用於告訴 JavaScript 須要對按鈕作什麼，第二個是 data-target，指示要切換到哪個元素。三個帶有 class .icon-bar 的 <span> 建立所謂的漢堡按鈕。這些會切換爲.nav-collapse <div> 中的元素。

3、佈局容器

<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">
                    </a>
            </h1> 
            <div class="span2" style="font-size:13px;"><img src="img/kefu1.jpg" />
                contact our customer service via Skype or email to place your order
            </div>
            <div class="span1" style="margin-top:50px;"><img src="img/Arrows.jpg" /></div>
            <div class="span2" style="font-size:13px;"><img src="img/wendong1.jpg" />
                upload your archived scene file including all materials and setups
            </div>
            <div class="span1" style="margin-top:50px;"><img src="img/Arrows.jpg" /></div>
            <div class="span2" style="font-size:13px;"><img src="img/times1.jpg" />
               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="margin-top:50px;"><img src="img/Arrows.jpg" /></div>
            <div class="span2" style="font-size:13px;"><img src="img/xiazai1.jpg" />
                after we received the payment we will send the files via dropbox or ftp
            </div>           
        </div>
      </div>

View Code

一、.container class: 用於固定寬度並支持響應式佈局的容器

二、.container-fluid: 用於 100% 寬度，佔據所有視口（viewport）的容器

三、1個row裏最多12個span

4、滾動監聽

一、引入js：<script src="js/bootstrap-scrollspy.js" type="text/javascript"></script>

二、（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);
    });