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

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

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

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

[code language=”html”]

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

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

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

[code language=”html”]

<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>
[/code]

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

[code language=”html”]

<div class="section main" id="main">
[/code]

4.在js檔上加上

[code language=”javascript”]
//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();
});
});
[/code]

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

5.最後記得加上這個

[code language=”html”]
<script src="js/bootstrap.min.js"></script>
[/code]

就完成了。

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

https://github.com/i314i/FreeTutorial

 

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

關於我:

我是沒一村,專長和興趣是程式、主動投資、科技商業模式。可以參考我的書單和比較熱門的文章:

分享:

This Post Has 3 Comments

  1. Anonymous

    寫得很清楚!!!感謝分享
    另外想請問一下
    $({function(){

    }
    });

    這一個function的為什麼不是寫在ready裡呢?

    1. 沒一村

      其實寫在ready裡面也是可以的喔,而且這樣子會比較好~~

      1. Anonymous

        好的!感謝!

Leave a Reply