建立boiler樣板(上)-引入Bootstrap

Posted on April 4, 2019

建立boiler樣板(上)-引入Bootstrap

創建資料夾結構

先新增一個資料夾

再用vscode開啟該資料夾，並建立起資料夾結構
1
2
3
4
5
boiler
|_index.html
|_img
|_css
|_style.css

將index.html與style.css檔做連結

引入bootstrap

CSS

進入bootstrap網站「Get Start」頁面，將CSS stylesheet連結放在<head>的中，放置於所有stylesheet的最上方

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

JS

進入bootstrap網站「Get Start」頁面，將JS的plugin 放在</body>結束前

1
2

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

jQuery

進入jQuery頁面，將最新版本的minified複製放在</body>結束前

<script
  src="http://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

Font Awesome-使用免費icon

Posted on April 4, 2019

Font Awesome-使用免費icon

引入Font Awesome

參考文章：建立boiler樣板-(下)引入Font Awesome
使用icon

在fontawesome的gaooery找到適合的icon
將<i>整段複製到要使用的html檔中
調整為不同尺寸(optional)
調整為不同顏色(optional)

實作

<i class="fas fa-eye"></i>
<i class="fas fa-eye-slash"></i>
<i class="fas fa-thumbs-up fa-3x"></i>
<i class="fas fa-thumbs-down fa-3x"></i>
<i class="fab fa-gratipay fa-3x"></i>
<i class="fas fa-comment fa-3x"></i>
<i class="fab fa-youtube fa-5x"  style="color:#FF0000"></i>
<i class="fab fa-line fa-5x" style="color:#00c300"></i>
<i class="fab fa-facebook-square fa-5x" style="color:#3b5998"></i>
<i class="fab fa-facebook-messenger fa-5x" style="color:#0884F9"></i>
<i class="fab fa-instagram fa-5x" style="color:#BB2C8A"></i>

Slick-快速打造一個carousel

Posted on April 4, 2019

Slick-快速打造一個carousel

Slick是什麼？

提供多種輪播樣式，以多組圖片輪播切換的套件，可應用於更多張圖片的展示。附上原始碼，複製貼上，即可使用現成的sliders樣式。

操作流程

引入slick cdn

CSS
搜尋slick cdn，找到slick-carousel cdn資源，將slick.css及slick-theme.css主題樣式複製到<head>中

1
2

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />

JS
再將slick.js複製到</body>結束前且jquery後

1	<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>

先在html建立好carousel的內容結構，並在外層給予一個class作為標記

<div class="slider">
    <div>slide 1</div>
    <div>slide 2</div>
    <div>slide 3</div>
    <div>slide 4</div>
    <div>slide 5</div>
</div>
``` 
4. 進入[slick](http://kenwheeler.github.io/slick/)，選擇sliders樣式，複製下方的語法到`<body><script>`中
![](https://i.imgur.com/3VT5R1U.png)


### optional控制元素
* **arrows**: (boolean值)是否顯示左右箭頭功能
* **dots**:(boolean值)是否顯示下方小圓點功能
* **autoplay**：(boolean值)是否自動播放
* **autoplaySpeed**:(毫秒值)自動播放的速度
* **slidesToShow**:(數量值)一次主要顯現幾個slides
* **slidesToScroll**:(數量值)每次滑動幾張slides
* **fade**:(boolean值)是否採用淡出/淡入效果
* **infinite**：(boolean值)滑到最後一張，是否繼續從回到一開始同向循環(4>1>2>3>...)，或是逆轉向循環(4>3>2>...)
* **centerMode**:(boolean值)是否同時顯現前後兩張slide的部分內容
* **centerPadding**:(px值)搭配`centerMode:true`使用，表示前後兩張slide要顯現多少範圍
* **responsive**:(陣列)針對不同尺寸做額外設定
    * **breakpoint**:(螢幕尺寸)
    * **settings**:({物件})包含各種設定
### 實作
```htmlmixed=
 <div class="container">
    <div class="slider">
        <div class="slide-1"></div>
        <div class="slide-2"></div>
        <div class="slide-3"></div>
        <div class="slide-4"></div>
    </div>
</div>

 <script>
    $('.slider').slick({
        centerMode:true,
        centerPadding: '100px',
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplaySpeed: 2000,  
        dots: true,
        arrows: true,
    });
            
</script>

成果

My Project-LonelyPlanet-About page

CSS-常見display屬性的值

Posted on April 4, 2019

CSS-常見display屬性的值

display: none

display設為none這個東西就不見了，不佔空間。
補充：visibility:hidden是隱形看不見，不過還是有佔空間。

display: inline

display : inline 的元素連在一起會在同一行，「不會換行」。
要讓 display : inline 元素水平置中的方式是在此元素的父元素加上 text-align : center。
<a>、<span>、<b>、<i>、<iframe>、<img>這幾個 HTML 元素預設的 display 屬性是 inline
可以針對左右做縮排(margin-left 、 margin-right 、 padding-left 、 padding-right「有效」)
上下縮排會失效，且寬高為內容本身寬高，無法自定義寬高。 (margin-top 、 margin-bottom 、 padding-top 、 padding-bottom 、 width 、 height 、 background-image 皆「無效」)

display: block

不論前後元素為何，display:block 元素會直接「換行」開始。
<div>、<p>、<h1>、<h2>、<iframe>、<img>這幾個 HTML 元素預設的 display 屬性是 block
可以自定義寬高或縮排(margin 、 padding 、 width 、 height 、 background-image 皆「有效」)

display: inline-block

內部元素水平排列，而且不需要額外設定clear，也不會讓接著的元素疊上來。
可以理解為：外面是inline，裡面是block。所以元素「不會換行」，但是又可以設定元素的padding-top 、 padding-bottom 、 width 、 height 、 background-image 。

Bootstrap-排版Grid system

Posted on April 4, 2019

Bootstrap-排版Grid system

概念

Bootstrap的排版是使用css flexbox
結構上要分為兩層：
- 外層為row：
- 內層為一到多個col-
row容器就是一個flexbox
Bootstrap的概念是將row容器中，一行分成12等分
col-後面接的數字，就是在一行中，佔有幾個「1/12的空間」。例：col-3就代表佔了3/12的寬度空間
針對不同尺寸螢幕，可以定義各種尺寸的佔有空間。例：col-lg-3, col-sm-6會在lg size時佔有3/12，而在sm size時佔有6/12

如果一行中有兩欄，其加總空間未滿12/12，可以用offset製造空欄的效果。

<div class="row">
    <div class="col-lg-3 col-sm-4">col-lg-3 col-sm-4</div>
    <div class="col-lg-5 col-sm-4">col-lg-5 col-sm-4</div>
    <div class="col-lg-2 col-lg-offset col-sm-4">col-lg-2 col-lg-offset col-sm-4</div>           
</div>

實作

Large時，一排四個
Medium時，一排兩個

Extra small時，一排一個

<div class="row">
    <div class="col-lg-3 col-md-6">
    <div class="col-lg-3 col-md-6">
    <div class="col-lg-3 col-md-6">
    <div class="col-lg-3 col-md-6">
    <div class="col-lg-3 col-md-6">
    <div class="col-lg-3 col-md-6">
</div>

成果

My Project-LonelyPlanet-Author section

Bootstrap-展開Collapse & Accordion

Posted on April 3, 2019

Bootstrap-展開Collapse & Accordion

概念

給予一個button
在collapse-content(事件作用目標物)上面給予一個id
在button標籤中，用bootstrap自訂屬性data-toggle定義觸發事件，以及與data-target定義作用的目標物

Collapse實作

預設值為關閉collapse狀態，若要預設為展開開狀態，可以添加show

<div class="card">
    <button data-toggle="collapse" data-target="#collapse1"> 
        Button 1 
    </button>
    <div id="collapse1" class="collapse"
        Collapse-content-1
    </div>
</div>

Accordion

<div id="accordion">
    <div class="card">
        <div class="card-header">
            <div href='#collapse1' data-toggle="collapse" data-parent="#accordion">
                  Button 1 
            </div>
        </div>
        <div id="collapse1" class="collapse show">
            <div class="card-body">
                Collapse-content-1
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <div href='#collapse1' data-toggle="collapse" data-parent="#accordion">
                  Button 2 
            </div>
        </div>
        <div id="collapse2" class="collapse">
            <div class="card-body">
                Collapse-content-2
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <div href='#collapse3' data-toggle="collapse" data-parent="#accordion">
                  Button 3 
            </div>
        </div>
        <div id="collapse1" class="collapse">
            <div class="card-body">
                Collapse-content-3
            </div>
        </div>
    </div>

成果

My Project-LonelyPlanet-Mission section

CSS-用hover選擇器增加滑鼠互動效果

Posted on April 3, 2019

CSS-用hover選擇器增加滑鼠互動效果

原理

先設定元件的初始樣式
再用css選擇器，添加:hover，並定義滑鼠移過的樣式

實作

.card{
    color: #6C757D ;
    background-color: #ffffff;
}
.card:hover{
    color: #fff;
    background-color: #f2ac34;
}

成果

My Project-LonelyPlanet-Author section

補充

hover經常被用在<a>標籤上

1
2
3

a:hover{ 
    background-color:yellow;
}

其他a標籤的連結效果

a:link    {color:blue;}
a:visited {color:blue;}
a:hover   {color:red;}
a:active  {color:yellow;}

Html-一頁式網頁使用href滑頁

Posted on April 3, 2019

Html-一頁式網頁使用href滑頁

原理

在每個區塊div設定id，讓
在menu的項目中設定每個項目的href目的位置為區塊div的id
用jquery增加scroller效果

實作

menu中的item使用<a>標籤，並將href設定為目標section的#id

<ul class="navbar-nav">
    <li>
        <a href="#section1">item 1</a>
    </li>
    <li>
        <a href="#section2">item 2</a>
    </li>
    <li>
        <a href="#section3" >item 3</a>
    </li>
</ul>

1
2
3

<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>

在body標籤中新增id

1	<body data-spy="scroll" data-target="#main-nav" id="home">

用jQuery初始化scrollspy

1	$('body').scrollspy({ target:'#mail-nav'});

添加Smooth Scrolling

所有在#main-nav中的<a>被click，就會執行函式

$('#main-nav a').on('click',function(event){
<!--check for a hash value -->
    if(this.hash !==""){
    
<!--    prevent default behavior -->
        event.preventDefault();
        
<!--    Store hash -->
        const hash = this.hash;
        $('html,body').animate({
            scrollTop: $(hash).offset().top
        }, 800, function(){
<!--        Add hush to URL after scroll -->
            window.location.hash = hash;
        })
    }
})

成果

My Project-LonelyPlanet

Bootstrap-自定義重新設定Sass

Posted on April 3, 2019

Bootstrap-自定義重新設定Sass

用koala設定

在專案資料夾中新增scss資料夾，以及style.scss檔案
進入Bootstrap-download，下載Source files
下載解壓縮後，將所有下載的scss資料夾中的所有檔案複製到自己專案的scss資料夾中
下載koala
用koala打開專案資料夾，取消不必被compile的項目
將bootstrap.scss重新輸出路徑到專案的css資料夾中，並且再回到koala執行Compile。Compile之後，就可以看到bootstrap.css出現在專案中

style.scss也重複上述動作，輸出路徑可以覆蓋原先css中的style.css檔案，一樣再執行Compile
用vscode打開專案，將舊的「bootstrap.css」與「style.css」刪除
在index.html中，重新設定bootstrap的引入設定，指定為專案中的bootstrap.css
在scss檔案中即可修改設定

Bootstrap-自適應navbar

Posted on April 3, 2019

概念

透過navbar-expand定義在何種尺寸，menu項目的呈現會改為「漢堡折疊」樣式效果
使用bootstrap自定義的data-toggle及data-target，決定按鈕點下之後，menu的div要以collapse方式展開
實作
首先class套用navbar，預設讓它是一個dispaly:flex的彈性盒子，且內部item會水平置中對齊(可以參考bootstrap的原始碼查看css設定)
navbar-expand-sm則是決定當螢幕尺寸小於sm時，會改為以「折疊漢堡」顯示menu項目;若從頭到尾都希望以「折疊漢堡」顯示，則不要在class使用任何navbar-expand
如果希望navbar不會受瀏覽頁面捲動而消失，會一直顯示在最上方，則在class加上fixed-top
button就是畫面中的「漢堡折疊」，需套用navbar-toggler類。基本上就會被navbar-expand-sm的定義影響在什麼螢幕尺寸顯示，什麼尺寸隱藏(可以參考bootstrap的原始碼查看css設定)
data-toggle是bootstrap自訂的屬性data-toggle="collapse"，意思是當點擊它按鈕時，會觸發了”collapse”事件
data-target也是bootstrap自訂的屬性，當”collapse”事件觸發，它的目標是#navbarCollapse，所以下面的#navbarCollapse這個div就會展開。
#navbarCollapse這個div的class需套用collapse、navbar-collapse，基本上也就是會被navbar-expand-sm的定義影響在什麼螢幕尺寸顯示，什麼尺寸隱藏。

<nav id="main-nav" class="navbar navbar-expand-sm navbar-dark fixed-top" style="background-color:#24243c;">
    <div class="container">
        <a href="index.html" class="navbar-brand">LonelyPlanet</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navbarCollapse" class="collapse navbar-collapse" >
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a href="#home-section" class="nav-link">Home</a>
                </li>
                <li class="nav-item">
                    <a href="#explore-head-section" class="nav-link">Explore</a>
                </li>
                <li class="nav-item">
                    <a href="#author-head-section" class="nav-link">Author</a>
                </li>
                <li class="nav-item">
                    <a href="#mission-head-section" class="nav-link">Mission</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

參考bootstrap部分原始碼

navbar
navbar-expand-sm
narvar-collapse
narvar-toggler

成果

My Project-LonelyPlanet-Menu

建立boiler樣板(上)-引入Bootstrap

創建資料夾結構

引入bootstrap

Font Awesome-使用免費icon

引入Font Awesome

使用icon

實作

Slick-快速打造一個carousel

Slick是什麼？

操作流程

成果

CSS-常見display屬性的值

display: none

display: inline

display: block

display: inline-block

Bootstrap-排版Grid system

概念

實作

成果

Bootstrap-展開Collapse & Accordion

概念

Collapse實作

Accordion

成果

CSS-用hover選擇器增加滑鼠互動效果

原理

實作

成果

補充

Html-一頁式網頁使用href滑頁

原理

實作

成果

Bootstrap-自定義重新設定Sass

用koala設定

Bootstrap-自適應navbar

概念

實作

參考bootstrap部分原始碼

成果