透過 SCSS 客製化 Boostrap 4 樣式

Ref : https://www.youtube.com/watch?v=GxcMdtdelTM&feature=youtu.be

How to Install Let’s Encrypt SSL Certificate to Secure Apache on RHEL/CentOS 7/6

Ref : https://www.tecmint.com/install-lets-encrypt-ssl-certificate-to-secure-apache-on-rhel-centos/

css transition

css :



.status{

position:absolute;
top:0;
height:100%;
opacity:0;
-webkit-transition:opacity 1s ease-in;
moz-transition:opacity 1s ease-in;
o-transition:opacity 1s ease-in;
transition:opacity 1s ease-in;
}
.status h2{
margin-top:130px;
padding: 15px 0px;
width:100%;
background-color:rgb(168,68,163);
color : white;
text-align:center;
}

.status:hover{
opacity:.8;
}

html:

<div class="imageboxes" style="margin-left: 20px;">

    

    <p>The Mechanic</p>

    <img width="300" height="456" alt="mechanic" src="2016/mechanic.jpg">

    <div class="status">

<h2> Released july 15</h2>

    </div>

</div>

css 進階語法

css:

section.links

表示本身   ->   <section class="links"> </section>

css:
section   .links (沒有連在一起)

表示子元素   ->   <section > <div class="links"></div> </section>


css:
section  >  .links (沒有連在一起)

表示只看下面一層 孫子輩不看

Using geolocation

Ref : https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation


Ref : https://developer.mozilla.org/en-US/Apps/Fundamentals/gather_and_modify_data/Plotting_yourself_on_the_map

<p><button onclick="geoFindMe()">Show my location</button></p>
<div id="out"></div>

function geoFindMe() {
  var output = document.getElementById("out");

  if (!navigator.geolocation){
    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
    return;
  }

  function success(position) {
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;

    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';

    var img = new Image();
    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";

    output.appendChild(img);
  }

  function error() {
    output.innerHTML = "Unable to retrieve your location";
  }

  output.innerHTML = "<p>Locating…</p>";

  navigator.geolocation.getCurrentPosition(success, error);
}

bootstrap v4 的介紹

Ｒef : http://muki.tw/tech/bootstrap4-grid-introduce/

垂直對齊

前面跟大家提過 Bootstrap 4 有使用 Flexbox 語法，所以我們可以利用 Flexbox 的特性，輕易的將 Column 置頂、置中，與置底對齊。

• align-items-start：置頂
• align-items-center：置中
• align-items-end：置底

▼ 直接在row裡面寫上align-items-*的 CLASS 即可。

Markup

<div class="row align-items-start">
  <div class="col">A<br />A</div>
  <div class="col">B</div>
  <div class="col">C</div>
</div>
<div class="row align-items-center">
  <div class="col">A</div>
  <div class="col">B<br />B</div>
  <div class="col">C</div>
</div>
<div class="row align-items-end">
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">C<br />C</div>
</div>

另外我們也可以改用align-self-*在col裡面單獨針對 Column 做對齊的動作

• align-self-start：置頂
• align-self-center：置中
• align-self-end：置底

Markup

<div class="row">
  <div class="col align-self-start">A</div>
  <div class="col align-self-center">B</div>
  <div class="col align-self-end">C</div>
</div>

透過範例可以發現 A, B, C 三個 column 不會相互影響，A 的欄位如果有多行文字不會影響到 B 跟 C。另外以置中為例，輸入多行文字後，他真的就是從中間平均的往上下展開唷！

水平對齊

有垂直對齊就一定會有水平對齊(廢話XD)，所以 Bootstrap 4 一樣利用了 Flexbox 的特性實現水平對齊。

• justify-content-start：靠左對齊
• justify-content-center：置中對齊
• justify-content-end：靠右對齊
• justify-content-around：分散對齊(含左右)
• justify-content-between：分散對齊(不含左右)

Markup

<div class="row justify-content-start">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>
<div class="row justify-content-center">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>
<div class="row justify-content-end">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>
<div class="row justify-content-around">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>
<div class="row justify-content-between">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>

移除 gutter

Bootstrap 的row跟column分別有使用margin以及padding當作 gutter，讓每個 column 之間有呼吸的空間。

但有時候因為版面的設計需求，我們希望 column 是緊密黏在一起的，所以 V4 新增了no-gutters這個 class，可以讓我們移除 gutter

Markup

<div class="row no-gutters">
  <div class="col">A</div>
  <div class="col">B</div>
</div>

直接將no-gutters放在row就可以囉，因為語法跟效果很直覺，所以就不上 codepen 範例惹

Column 排序

以前如果要將排序會用pull跟push在那邊推來推去的，現在一樣因為使用了 Flexbox 的關係，在使用上也更方便了！

• flex-unordered：不排序
• flex-first：第一個
• flex-last：最後一個

Markup

<div class="row">
  <div class="col flex-unordered">
    我應該是第一個，但我不排序
  </div>
  <div class="col flex-last">
    我應該是第二個，但我會排在最後
  </div>
  <div class="col flex-first">
    我應該是第三個，但我會排在最前面
  </div>
</div>  

這邊要特別注意的是，如果使用 flex 排序，寬度縮小時也會持續這個排序模式，column 的寬度不會變回 100%。

如果你希望縮小到特定寬度可以變回 100%，還是可以使用 V3 的push以及pull，不過在 V4 的寫法有一點調整，將前綴位置放到後面(原本是col-md-push-*)：

Markup

<div class="row">
  <div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
  <div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
</div>

☞補充：offset也一樣將前綴往後放，但使用方法相同所以就不特別介紹了。