Landy Blog
0%

發表於 更新於 分類於

這邊記錄一下，我的Bootstrap作品集中有用到的技巧，不然都忘到爆XDD
Bootstrap作品集

紀錄在index.html頁面中，使用的當滑入時，照片會從模糊變成清楚

你可以看到，這邊的範例，總由四個部分所組成

  1. 最外面的區塊 content
  2. 蓋在區塊上的薄膜 cover
  3. 區塊中的文字 text
  4. 區塊中的圖片 content_img

第一區塊 content

首先，我們最外面的區域我是故意用a連結使用，用意是模擬，
如果今天要點及這個區塊來連動其他頁面的時候，就需要a連結。

在這個a連結裡面我們先設定好它的寬度和高度。
接著，還為它設入overflow:hidden的特性，這個特性後面會說明為什麼要它。

第二區塊 cover

第一
這個區域是蓋在整體區塊上方的薄膜。
我們利用定位的效果加入position:absolute, top:0, right:0, bottom:0, left:0。
為得是要讓這個區塊能夠完全展開覆蓋住父元素.content。

第二，我們為它加z-index:1，因為，它要蓋在上方，並在文字下方，所以，設為1是ok的。
第三，加入filter:blur(5px);，讓它產生模糊的效果。
第四，我們為它加入transform:translateY(-400px)，為得是要讓它的區塊先位在整體區塊的-400px位置，
並在你滑入的時候，transform:translateY(0px)，會改成0px，所以，就有從上方往下方移入的效果。

閱讀全文 »

發表於 更新於

看一下github_pages來部屬靜態網頁

Github Pages沒有顯示出我專案的問題?

Ans:
我找到原因了，
首先我是在這篇文章的問答區找到以下的答案的
https://github.community/t/pages-user-site-not-published/10280/21
你搜尋一個叫wwyc的回答者的回答就有了。

用我原本的方式部屬上去是沒問題的，但是，你在你的那個repository的settings裡面，
有一個GitHub Pages
然後，在GitHub Pages裡面有一個選項Theme Chooser，
GitHub Pages改變主題
你要點Change Theme，任選一個主題，並儲存你選擇的主題後，
再次點擊你的Github Pages連結後，就可以顯示出你的網站囉。

Github pages顯示出來的網站並沒有吃到bootstrap的效果?

step1. 首先，它會跳出跟symlink相關的錯誤，
因為，檔名的副檔名是.md結尾的檔案是symlink檔案，代表它是一個虛擬的檔案，無法被實際引入。
那在bootstrap的docs資料夾裡面全部都是這類的檔案，你可以直接將這個docs資料夾直接刪除掉，
因為這裡面的md檔案都只是說明檔。

step2. 接著，它會說bootstrap的檔案中有一個index.html(注意~~這個不是你寫的那個，這是bootstrap自己內建的)，
然後，他會說這個index.html檔案不存在_include的路徑裡面，你就直接把這個index.html檔案剪下，移到
bootstrap的_include的資料夾裡面就ok了。

step3. 經過以上兩個步驟的處理，
你應該可以在你的github pages頁面上看到沒有bootstrap css樣式的奇怪網站XDD，
這時，你先對Github pages部屬出來的網站，打開它的開發者介面，
應該會發現Console有一堆Error發生，大部分都是讀不到相關檔案。

那大部分，它會讀不到檔案，是因為路徑不對
再你自己再撰寫專案的時候，本地端的路徑，是這樣
<link rel="stylesheet" href="/css/css/all.css">
你的href前面，有一個反斜線/，那多這個反斜線會導致github pages讀不到那個檔案，
所以，你只要將該反斜線拿掉就可以了。
就變成以下這樣
<link rel="stylesheet" href="css/css/all.css">

經過以上這些步驟，github pages就可以讀到你的css樣式，應該就可以正確在githubpages裡面，看到正確渲染的成果囉~~~

在Github Pages上的banner的背景圖片，Github一直讀不到它?

Ans:
首先，我把原本圖片的檔名改成全部小寫，也沒有任何的底線之類的東西。
即:
Banner_Background.jpg 改成bannerbackground.jpg。
第二，我本來是透過class的樣式來引入background-img的樣式。
我就直接用inline-style的方式來引入這個background-img的樣式，
像下面這樣，為這個區塊的inline-style直接加入background-image樣式。

1
2
3
4
5
6
7
<div class="banner" data-aos="fade-right" style="background-image: url('img/bannerbackground.jpg');">
    <h2 class="banner-solgan">
        想長肉--
        <br>
        <span>就是現在</span>
    </h2>
</div>

就可以成功在Github Pages裡面呈現這張照片囉~~~

選擇要部屬哪一個分支的網頁

在Settings這個頁面中的，會有一個Github Pages的主題，
然後，會有一個Source的選項，接著你就可以選擇你要在github pages中渲染出的網頁是哪一個分支的。

發表於 更新於 分類於

你要記得在bootstrap中的dropdown之間，
他是用區塊和區塊做區隔的，他並沒有用data-traget 和 id的關係，
去搭建觸發元件與被觸發區塊之間的關係。
所以，當.dropdown包著一組觸發元件和被觸發dropdown-menu，
當你又想要在另一個地方用另外一組dropdown的功能的時候，
你要再創一個.dropdown區塊，並將觸發元件和觸發區塊包在這個新的.dropdown區塊中，
如此一來，他們就不會互相干擾了。

發表於 更新於 分類於

不要把Modal按鈕和被觸發的區塊放在同一個區塊中

我發現觸發Modal的按鈕 和 被觸發的區塊不能放在同一個區塊中，
不然，你按下這個觸發鈕的時候，沒辦法，觸發相對應的Modal區塊。

故我把觸發區塊，放在整個專案的footer的後面的地方就沒問題了。

ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!--這一份html檔案，是整體layout的公版，保存了header和footer的部分版型-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="/img/favicon.png">
    <meta name='description' content='雕塑你我的美妙身材' />

    <link href="/img/favicon.png" rel="apple-touch-icon" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

    <link rel="stylesheet" href="/css/css/all.css">
    <link rel="stylesheet" href="/css/all.min.css">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <script src="/javascript/jquery-3.5.1.min.js"></script>
    
</head>
<body>
    <div class="container">
        <div class="header">
            <nav class="navbar navbar-expand-md navbar-light bg-yl">
                <button class="navbar-toggler rwd-hamburger-btn" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent"  aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                    <a href="#"><i class="fas fa-bars"></i></a>
                </button>

                <a class="navbar-brand" href="landing_page.html">
                    <img src="/img/protectionshield.svg" width="50" height="50" class="d-inline-block" alt="">
                    <span class="d-none d-md-inline-block">Berserker Fittness</span> 
                </a>
                
                <div class="collapse navbar-collapse" id="navbarText">
                   
                  
                  <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                      <a class="nav-link" href="landing_page.html">首頁</a>
                    </li>
                    <li class="nav-item ml-4">
                      <a class="nav-link" href="lecture_page.html">課程</a>
                    </li>
                    <li class="nav-item ml-4">
                      <a class="nav-link" href="register_page.html">登入</a>
                    </li>
                    <li class="nav-item ml-4">
                        <div class="dropdown">
                            <button class="btn btn-secondary cart_btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
                                <i class="fas fa-shopping-cart text-dark"></i>
                            </button>
                            <div class="dropdown-menu product_list_dropdown p-0" aria-labelledby="dropdownMenuButton">
                                <div class="card rounded-0">
                                    <h5 class="card-header">已選購商品</h5>
                                    <div class="card-body p-0">
                                        <table class="table productlist_table m-0">
                                            <tbody>
                                                <tr>
                                                    <th class="border-top-0" scope="row">
                                                        <a data-toggle="modal" data-target="#removeModal" data-whatever="金牌西裝" href="#">
                                                            <i class="fas fa-trash-alt"></i>
                                                        </a>
                                                    </th>
                                                    <td class="border-top-0 w-50">
                                                        <img src="/img/arm-train.jpg" class="bg-cover productlist_table_img" alt="">
                                                        <p class="m-0">手部訓練</p>
                                                    </td>
                                                    <td class="border-top-0" >x2</td>
                                                    <td class="border-top-0 w-25">NT$900</td>
                                                </tr>
                                              <tr>
                                                <th class="border-top-0" scope="row">
                                                    <a href="#">
                                                        <i class="fas fa-trash-alt"></i>
                                                    </a>
                                                    
                                                </th>
                                                <td class="border-top-0">
                                                    <img src="/img/back-train.jpg" class="bg-cover productlist_table_img" alt="">
                                                    <p class="m-0">背部訓練</p>
                                                </td>
                                                <td class="border-top-0">x3</td>
                                                <td class="border-top-0">NT$1350</td>
                                              </tr>
                                              
                                              
                                            </tbody>
                                            
                                        </table>
                                    </div>
                                    <div class="cart-footer">
                                        <a href="cart_page1.html" class="btn btn-yl btn-lg w-100 rounded-0 font-weight-bold">結帳去</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </li>
                  </ul>
                  
                </div>

                <div class="dropdown">
                    <button class="btn btn-secondary cart_btn rwd-cart-btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
                        <i class="fas fa-shopping-cart text-dark"></i>
                    </button>
                    <div class="dropdown-menu product_list_dropdown p-0" aria-labelledby="dropdownMenuButton">
                        <div class="card">
                            <h5 class="card-header">已選購商品</h5>
                            <div class="card-body p-0">
                                <table class="table productlist_table">
                                    <tbody>
                                        <tr>
                                            <th class="border-top-0" scope="row">
                                                <a href="#">
                                                    <i class="fas fa-trash-alt"></i>
                                                </a> 
                                            </th>
                                            <td class="border-top-0 w-50">
                                                <img src="/img/arm-train.jpg" class="bg-cover productlist_table_img" alt="">
                                                <p class="m-0">手部訓練</p>
                                            </td>
                                            <td class="border-top-0" >x2</td>
                                            <td class="border-top-0 w-25">NT$900</td>
                                        </tr>
                                      <tr>
                                        <th class="border-top-0" scope="row">
                                            <a href="#">
                                                <i class="fas fa-trash-alt"></i>
                                            </a>
                                            
                                        </th>
                                        <td class="border-top-0">
                                            <img src="/img/back-train.jpg" class="bg-cover productlist_table_img" alt="">
                                            <p class="m-0">背部訓練</p>
                                        </td>
                                        <td class="border-top-0">x3</td>
                                        <td class="border-top-0">NT$1350</td>
                                      </tr>
                                      
                                      
                                    </tbody>
                                </table>
                            </div>
                            <div class="cart-footer">
                                <a href="cart_page1.html" class="btn btn-yl btn-lg w-100 rounded-0 font-weight-bold">結帳去</a>
                            </div>
                        </div>
                    </div>
                </div>
                
            </nav>
            
            <div class="banner" data-aos="fade-right">
                <h2 class="banner-solgan">
                    想長肉--
                    <br>
                    <span>就是現在</span>
                </h2>
            </div>
        </div>
        <ul class="hide-nav list-unstyled collapse" id="navbarToggleExternalContent">
            <li class="p-2">
                <a href="landing_page.html">首頁</a>
            </li>
            <li class="p-2">
                <a href="lecture_page.html" >課程</a>
            </li>
            <li class="p-2">
                <a href="register_page.html">登入</a>
            </li>
        </ul>
        
    </div>    
    <!--客製化頁面開始-->
    
   
    
    
      

  
    <!--客製化頁面結束-->
    <footer>
        
    </footer>
	
    <!--Modal-->
    <div class="modal fade" data-backdrop="static" id="removeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">
            ...
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">否</button>
            <button type="button" class="btn btn-outline-danger px-5">是</button>
            </div>
        </div>
        </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
   
</body>
</html>

你可以看到以上的案例中，在.product_list_dropdown中的垃圾桶按鈕，他會觸發id為removeModal的區塊，
那你可以看到，我把removeModal的區塊放在<footer></footer>的後面，就可以正常觸發。
但是，如果我把removeModal的區塊放在放在跟.product_list_dropdown中的垃圾桶按鈕同一個區塊中，
也就是同一個<th></th>裡面的話，就無法觸發這個removeModal區塊了。

發表於 更新於 分類於

購物車按鈕

這邊購物車的按鈕，你只要看上面範例的navbar的購物車按鈕部分就好。

  1. 首先，我們在navbar裡面塞了一個購物車的按鈕，
    這個按鈕有套用dropdown的功能，我們就可以利用點選它跳出相對應的產品內容。

  2. 在購物車上方的數字，適用bootstrap中的badges元件所製作出來的。
    接著，我們需要將這個badge的位置樣式改成postion:absolute。
    並在他的外層加上position:relative。
    並在badge裡面設定相對的top和right來讓他在cart相對應的位置上。

  3. 購務車的dropdown的內容
    我們可以在dropdown-menu的內容中加入表格、按鈕或相關的內容

  1. 購物車點選出來的dropdown-menu內容超出頁面
    在bootstrap中有提到，當dropdown-menu的功能在navbar中使用的時候，
    官網的提示:
    Heads up!
    Dropdowns are positioned thanks to Popper (except when they are contained in a navbar).

它就不會自動去計算dropdown-menu的區塊大小是否有超出頁面囉。
首先，先為你的.dropdown-menu加入.dropdown-menu-end
接著，我們要自己寫css樣式來為.dropdown-menu-end調整
寫下以下的內容:
ex:

1
2
3
4
.dropdown-menu-end{
  right:0;
  left: auto;
}

此時，當我們點擊購物車按鈕，這個dropdown-menu就不會超出頁面囉。

jumbotron

當我們有大版面要用的話，就可以套入jumbotron元件囉。
那這邊就為這個jumbotron加入一張大圖，並利用
background-size:cover; 和 background-position: center center;
來讓這張圖辨變清楚，並且置中。
ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---HTML---
<div class="jumbotron jumbotron-fluid jumbotron_bg">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>

---CSS---
.jumbotron_bg{
 background-image: url("https://upload.cc/i1/2021/01/14/PMgNkr.jpg");
  background-size:cover;
  background-position: center center;
}

卡片式排版與 Grid System 整齊排版手法

我們可以利用格線系統，並在格線系統內加入card元件，
如此一來就可以在當某一行的card元素超過格線系統的佈局時，就換行，達成好看的排版。

card-body有自動延展的效果

我們在這邊會使用card元件是因為card-body會隨著內容的增加而延展他自己的高度，並不會去擠壓到在同一元件內，像是card-header和card-footer的高度，相當方便。
如果，你希望同一區域的card的高度都一樣的話，為card元件加上h-100這個className，這樣就可以讓各個card都對齊，儘管他們的內容多寡不同。

你可以看到右邊欄位的card的高度都一樣，儘管他們的card-body內容不一樣。
另外，就算上方的圖片大小不一樣，也一樣不會影響排版喔。

加上衣服尺寸的樣式使用btn-group

我們可以在上面的範例中的card-footer取代掉原本的按鈕，加入btn-group，來創出一個有sm, m, l大小的按鈕，
ex:

1
2
3
4
5
<div class="btn-group btn-group-sm">
      <a href="#" class="btn btn-outline-primary" aria-current="page">sm </a>
      <a href="#" class="btn btn-outline-primary disabled" >m</a>
      <a href="#" class="btn btn-outline-primary">L</a>
</div>

而其中，我們有為其中的m的class加上disabled，這可以讓該按鈕的樣式無法被點選，用來表示它賣完囉~

為card加上box-shadow的效果

ex:

1
2
3
4
5
6
7
8
---CSS---
.box-shadow{
	box-shadow:0 3px 5px rgba(0, 0, 0, 0.4);
	transition:box-shadow .3s;
}
.box-shadow:hover{
	box-shadow:0 3px 5px rgba(0, 0, 0, 0.24);
}

你為card加上這個box-show的class就有滑過去有陰影變換的效果囉。

利用list-group來變換頁面

ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

這段比較單純，你叫按照bootstrap的官網提供的內容貼到你的專案中，並更改相對應的id和href值，如此應可達成變換頁面的效果了。

btn-group用label和input所構成的樣式

ex:

1
2
3
4
5
6
7
8
9
10
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off" disabled>
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

上面這個範例，是用label和input所構成的btn-group。
其中有一個input被我們加入了disabled，表示該選項不能被選擇。

有disabled屬性的input造成radio為空值的問題

但是，當使用者點到這個被disabled的選項的時候，這個radio會呈現空值的狀態，
所以，要避免這種狀況的話，我們要對他的css樣式，加入以下的內容。
記得，這是在用input和label構成的input-group才會有的問題喔。
ex:

1
2
3
4
---CSS---
.btn .disabled{
	pointer-events: none;
}

接下來，你就為那個有disabled屬性的input欄位的className加入disabled，也就是你剛剛自己寫的部分，
如此，就可以避免點擊到disabled的input選項時，造成該radio為空值的問題囉。

使用 Alert 元件製作多步驟提示

以上這個範例我們是利用.form-row來做這個格線系統，並搭配alert元件來完成這個購買流程的效果。

收合購物車列表及表單排版技巧

在手機板的時候，防止客戶的選購產品太多會占頁面，故我們會用一個收合的效果，當他要開就打開，不要看就收起來，進而提升使用者體驗。

以上的範例，就是用card元件的版，套進collapse的效果，當你按下card-header中的按鈕時，就會顯示出你的商品，若不要看就收闔起來。

發表於 更新於 分類於

Modal是一個彈出的互動視窗

ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="demo">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch by id
  </button>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".exampleModal_class">
    Launch by className
  </button>
  
  <!-- Modal -->
  <div class="modal fade exampleModal_class" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</div>

data-toggle和data-target

以上這個範例可以看到button上面有綁定data-toggle="modal"和data-target="#exampleModal"
如此就可以看得出來該button要觸發的區塊是id為exampleModal，
接下來你只要為那個被觸發的區塊的id取上exampleModal，就可以實現Modal的功能囉。

data-target綁定的對象

data-target除了可以綁定id以外，也可以綁定className喔，
你可以看到上面Launch by className的按鈕，他的data-target就是去綁定對應區塊的className。

data-dismiss

這個功能是在跳出來的區塊中，右上方會有一個叉叉，當你按下這個叉叉後，就可以將這個跳出的區塊取消掉了。
那達成這個取消的功能，還有另一種方法，就是你按這個跳出的區塊以外的範圍就可以了。

Modal觸發區塊尺寸大小

ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="demo">
  <button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-1">Large modal</button>

  <div class="modal fade bd-example-modal-1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        ...
      </div>
    </div>
  </div>

  <!-- Small modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-2">Small modal</button>

  <div class="modal fade bd-example-modal-2" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        ...
      </div>
    </div>
  </div>
</div>

以上的範例你可以看到我們在彈出的區塊中的class名稱加入modal-lg 或 modal-sm，如此，就可以控制這個彈出視窗的大小囉。

Navbar 可以被隱藏起來

ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="demo">
  <nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
</div>

你可以看到在nav標籤裡面有一個navbar-expand-md的class名稱，你將後面的md改成sm或lg其他斷點的className，就可以自己決定在哪個斷點下，該navbar會被隱藏起來。

上面有講了怎麼讓該navbar的內容隱藏起來，接著，你要為相對的漢堡選單按鈕的data-target加入該被隱藏起來的區塊的id，如此一來，你就可以透過該漢堡選單來開闔這個被隱藏起來的選單。

漢堡選單按鈕加入data-toggle=”collapse”

另外，你也要為這個navbar的漢堡選單按鈕加上data-toggle="collapse"的內容喔，如此，他才會有收闔的功能。

如果你要在navbar中加入你的品牌，此時，就可以使用navbar-brand
ex:

1
2
3
4
5
6
7
<div class="demo">
  <nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">
      <img src="http://www.hexschool.com/images/logo.png" width="164" height="39" alt="">  
    </a>
  </nav>
</div>

他就會幫你這個品牌的區塊加上一些設定，讓他更協調。

分別有以下幾種定位方式

  1. fixed-top
  2. fixed-bottom
  3. sticky-top

    fixed-top

    ex:
    1
    2
    3
    4
    <div class="demo">
      <nav class="navbar navbar-light bg-light fixed-yop">
        <a class="navbar-brand" href="#">Fixed top</a>
      </nav>
    navbar會被固定在上方

    fixed-bottom

    ex:
    1
    2
    3
    4
    5
    <div class="demo">
      <nav class="navbar navbar-light bg-light fixed-bottom">
        <a class="navbar-brand" href="#">Fixed bottom</a>
      </nav>
     </div>
    navbar會被固定在下方

sticky-top

ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<div class="list-group">
  
    
      <a href="/components/alerts.html"  class="list-group-item  sticky-top" style="top="10px";">
        Alerts
      </a>
    
  
    
      <a href="/components/badge.html"  class="list-group-item">
        Badge
      </a>
    
  
    
      <a href="/components/breadcrumb.html"  class="list-group-item">
        Breadcrumb
      </a>
    
  
    
      <a href="/components/buttons.html"  class="list-group-item">
        Buttons
      </a>
    
  
    
      <a href="/components/button-group.html"  class="list-group-item">
        Button Group
      </a>
    
  
    
      <a href="/components/card.html"  class="list-group-item">
        Card
      </a>
    
  
    
      <a href="/components/carousel.html"  class="list-group-item">
        Carousel
      </a>
    
  
    
      <a href="/components/collapse.html"  class="list-group-item">
        Collapse
      </a>
    
  
    
      <a href="/components/dropdowns.html"  class="list-group-item">
        Dropdowns
      </a>
    
  
    
      <a href="/components/forms.html"  class="list-group-item">
        Forms
      </a>
    
  
    
      <a href="/components/input-group.html"  class="list-group-item">
        Input Group
      </a>
    
  
    
      <a href="/components/jumbotron.html"  class="list-group-item">
        Jumbotron
      </a>
    
  
    
      <a href="/components/list-group.html"  class="list-group-item">
        List Group
      </a>
    
  
    
      <a href="/components/modal.html"  class="list-group-item">
        Modal
      </a>
    
  
    
      <a href="/components/nav.html"  class="list-group-item">
        Nav
      </a>
    
  
    
      <a href="/components/navbar.html"  class="list-group-item active">
        Navbar
      </a>
    
  
    
      <a href="/components/pagination.html"  class="list-group-item">
        Pagination
      </a>
    
  
    
      <a href="/components/popovers.html"  class="list-group-item">
        Popovers
      </a>
    
  
    
      <a href="/components/progress.html"  class="list-group-item">
        Progress
      </a>
    
  
    
      <a href="/components/scrollspy.html"  class="list-group-item">
        Scrollspy
      </a>
    
  
    
      <a href="/components/tooltips.html"  class="list-group-item">
        Tooltip
      </a>
    
  
</div>

它會將被加入sticky-top的目標，當你的畫面往下捲，要捲超過該區塊的時候，這個區塊會被固定在畫面上方。
以上這個範例，你就可以看到最上面的alert的className被加上sticky-top，當你的畫面往下滑的時候，這個區塊會被凍結在最上方。

sticky-top小技巧

另外，你可以注意到該被加入sticky-top的選項，他的css樣式，有特別加入top:10px，
為的是要讓當該選項的sticky-top效果觸發時，該選項會和網頁最上方保留10px的空間，視覺上比較舒服。

進階 Modal 使用，動態傳入參數

教導怎麼跳出相對應的Modal內容 和 怎麼按下按鈕就刪除該選項的功能。

加入相對應的參數

在Bootstrap的文件的Modal文件中，有一段內容叫Varying modal content
他就是教你怎麼做出跳出相對應內容的Modal的。

首先，先建立一個按鈕，並且按下他可以跳出相對應的Modal內容。
接著，上面這個範例中，我們為這個按鈕加上一個data-title的屬性，並將其屬性值設為”快速下單”，
這邊的data-title的title部分，你可以自己命名，這是自訂義的。

接著，我們在JavaScript部分，
寫入一些JQ的內容，
ex:

1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){

  $('#exampleModal').on('shown.bs.modal', function (event) {
    let button = $(event.relatedTarget); // Button that triggered the modal
    let title = button.data('title');
    let modal = $(this);
    modal.find('.modal-title').text(title);
  })
  
})

這個內容就是說，當Modal被觸發時，找到是哪個按鈕觸發他的，並找到該btn的data-title的值，
將該值存到title裡面，並將變數title的內容，去替換掉modal的.modal-title的內容。

data-backdrop=”static”

當我們再輸入跳出來的modal內的資料時，如果，不小心按到modal以外的區域，會直接讓modal跳出來，
這樣一來剛剛辛苦輸入的內容就都不見了。
所以，要防止這樣的情況，我們就需要用data-backdrop="static"的屬性，來防止這種問題的發生，
像是上面的範例，我們就都有在兩個modal的區塊的div裡面加上data-backdrop="static"的程式碼內容囉。

發表於 更新於 分類於

箭頭函式 v.s 傳統函式

一般函式　－　傳統寫法 v.s 箭頭函式

ex: (傳統寫法)

1
2
3
4
var callSomeone = function(somebody){
    return somebody + '該吃飯囉';
}
console.log(callSomeone('小明')); // 小明該吃飯囉

改寫成 箭頭函式
ex: (箭頭函式)

1
2
3
4
var callSomeone = (somebody) => {
  return somebody + '該吃飯了'
}
console.log(callSomeone('小花')) // 小花該吃飯囉

箭頭函式 - 只有一行內容

像上面的範例，若箭頭函式中只有一行的話，你可以省略花括號　和　return。
ex:

1
var callSomeone = (somebody) => somebody + '該吃飯囉';

箭頭函式 - 如果只有傳入一個參數

如果傳入的參數只有一個的話，連那個參數的括號都可以省略。
ex:

1
var callSomeone = somebody => somebody + '該吃飯囉';

箭頭函式 - 如果沒有傳入參數

但是，你沒有要傳入任何參數的話，那個參數的括號是不能省略的喔，
ex:

1
2
var show = () => '展示一下' ;
console.log(show()); // 展示一下
閱讀全文 »

發表於 更新於 分類於

常用陣列方法(上)

陣列方法-forEach

ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const people = [
	{
		name: '小明',
		friends: 2
	},
	{
		name: '阿姨',
		friends: 999
	},
	{
		name: '邊緣人',
		friends: 0
	}
]
people.forEach(function(item, index, array){
	console.log(item);
});

forEach中的三個引數分別為:
item: 遍歷當下的元素
index: 當下在陣列的第幾個元素
array: 該陣列本身

閱讀全文 »

發表於 更新於 分類於

接續上一篇JavaScript ES6 課程筆記的內容，繼續記錄。

縮寫

物件縮寫

若新物件的屬性名稱跟被賦值的屬性名稱相同的話，就可以不用重複寫屬性名稱了。
ex: (傳統寫法)

1
2
3
4
5
6
7
8
9
10
let lee = '力宏';
let family = {
    ming: '小明',
    mom: '老媽'
}
let newObj = {
    family = family,
    lee = lee
}
console.log(newObj);

以上這個範例，可以看到newObj的屬性名稱，跟被賦予的內容名稱相同。
所以，我們可以省略其中一個，改寫成
ex:

1
2
3
4
5
6
7
8
9
10
let lee = '力宏';
let family = {
    ming: '小明',
    mom: '老媽'
}
let newObj = {
    family,
    lee
}
console.log(newObj);

只要寫該屬性名稱就可以囉，編譯器會自動為你賦予，跟你屬性名稱一樣的內容了。

在 Vue Cli 的情境中

ex:(傳統寫法)

1
2
3
4
5
6
7
8
9
10
import Vue from 'vue'
import App from './App'
import router from './router'
// 將套件由 './App' 路徑載入，並使用 App 這個變數名稱
new Vue({
  el: '#app',
  router:router,
  template: '<App/>',
  components: { App }
});

以上範例，我們利用 router 載入外部的東西，而 router 的名稱又剛好跟 Vue 物件中的
屬性 router 名稱一模一樣，所以，我們可以直接省略其中一個不寫，
改寫成下面這樣
ex:(縮寫寫法)

1
2
3
4
5
6
7
8
9
10
import Vue from 'vue'
import App from './App'
import router from './router'
// 將套件由 './App' 路徑載入，並使用 App 這個變數名稱
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
});
閱讀全文 »

發表於 更新於 分類於

使用let 與 const 宣告變數

ex: (var 宣告)

1
2
3
4
5
console.log(mom); // undefined
var mom = '老媽';
(function(){
    console.log(mom); // 老媽
})();

ex: (let 宣告)

1
2
3
4
5
console.log(mom);  // "ReferenceError: Cannot access 'ming' before initialization"
let mom = '老媽';
(function(){
    console.log(mom); // 老媽
})();

以上這兩個宣告方法的差異可以看出來，用let宣告是沒有Hoisting的特性，
所以，導致在let定義變數之前，就取用該變數的話，會跳出在初始化該變數之前無法調用該變數的錯誤，
而var宣告是有Hoisting的特性，
所以，在var定義變數之前，就取用該變數的話，只會跳出undefined的值。

var 與 let 作用域的不同

var的作用域是function scope
let的作用域是block

ex: (var 作用域)

1
2
3
4
5
6
7
8
function varMing() {
    var ming = '小明';
    if(true){
        var ming = '傑哥';
    }
    console.log(ming); // 傑哥
}
varMing()

以上範例可以看到，if判斷式的範圍跟外層的var ming = '小明'作用域範圍是相同的，
因為，它們都是存在同一個function scope裡面(即函式varMing裡面)，不要被if判斷式的花括號給誤導了，
所以，再重新定義一次變數ming是會影響最後變數ming的數值。

ex:(let 作用域)

1
2
3
4
5
6
7
8
function varMing(){
    let ming = '小明';
    if(true){
        let ming = '傑哥';
    }
    console.log(ming); // 小明
}
varMing()

以上這個範例可以看到，最終結果是小明，
原因是let的作用域是用block來區分，所以，if判斷式中的作用域跟外層的作用域是分開的，
所以，我們在if中再次對ming變數做定義，是不會影響到外層變數ming的值的。

閱讀全文 »