程式設計雜筆

[程設雜筆] 用bootstrap開發卷軸下拉式網頁

在把我的組語、資結和verilog的作業寫完之後,我終於有時間寫個網站了。這次是要幫bee學長的家教app寫個宣傳網站。雖然這次只有寫前端的部分,但我覺得算是對我前端開發的一個驗證,也新學到了一個很重要的bootstrap技能——開發卷軸下拉式網頁(我不知道怎麼描述這個名詞QAQ)。

目前的網頁流行風格多半都是採不斷下拉,並逐步顯示資訊的方式。在網頁的最上方,會有一個navbar,方便使用者直接點擊,傳送到網頁上的該處。要開發這樣的網頁,用bootstrap的話,會非常的快。以下把一些筆記記錄一下。

1.可以偵測目前卷軸的位置,並在對應的navbar link做出相對應的強調,讓使用者知道目前是在網頁的哪一個部分。


<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

id代表body是這個網頁的最上方,根據這個id,我們可以直接將網頁拉到最上面。data-spy="scroll"代表的是偵測卷軸的捲動。data-target=.navbar-fixed-top“指的是這個navbar做相對應的變化。而相對應的變化,就只是在為各個<li>加上一個active的class而已。

2.加上id,讓我們的navbar知道要跳到哪裡去。然後也都要加上scroll-page的tag。



<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".main-navbar">
            <span class=icon-bar></span>
            <span class=icon-bar></span>
            <span class=icon-bar></span>
        </button>
        <a class="navbar-brand page-scroll logo-text" href="#page-top">Free家教網</a>
     </div>
  <div class="collapse navbar-collapse main-navbar">
      <ul class="nav navbar-nav nav-menu mavbar-menu">
        <li class="active"><a class="nav-link page-scroll" href="#main">簡介</a></li>
        <li><a class="nav-link page-scroll" href="#features">獨家特色</a></li>
        <li><a class="nav-link page-scroll" href="#instruction">使用說明</a></li>
        <li><a class="nav-link page-scroll" href="#download">下載</a></li>
        <li><a class="nav-link page-scroll" href="#contact">聯絡我們</a></li>
      </ul>
   </div>
 </div>
</nav>

3.要跳到的地方也要加上id



<div class="section main" id="main">

4.在js檔上加上

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

這邊的event.preventDefault();是要避免點擊的時候直接跳過去,因為我們是要用捲的方式捲過去。

5.最後記得加上這個

<script src="js/bootstrap.min.js"></script>

就完成了。

附上努力快10個小時的成果:
http://i314i.github.io/FreeTutorial/

https://github.com/i314i/FreeTutorial

 

開學了,事情變多了,有系上的事、工作的事、課業的事,覺得可以開心寫網頁,寫project的時間越來越少了,有機會就要好好把握給他做一下。

3 thoughts on “[程設雜筆] 用bootstrap開發卷軸下拉式網頁

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s