Day20 Bootstrap 3 到 4 的改變? 靜態或動態網站的區別?

第 11 屆 iThome 鐵人賽

DAY 20

自我挑戰組

30天翻玩動態網站-會員需驗證才能看到部落格文章系列第 20 篇

11th鐵人賽

sean666

2019-10-06 03:02:59

2837 瀏覽

分享至

原本專案是用 Bootstrap3 製作的，到作者的官網看已經更新到 Bootstrap4 了，
所以我們今天就用新的 Bootstrap4 框架，來架一個咖啡廳網站。

玩轉 Bootstrap

Bootstrap4 咖啡店版型

下載連結:https://startbootstrap.com/themes/business-casual/

檔案目錄

用sublime開啟index.html，是不是有一種熟悉的感覺，但裡面多了很多新玩意。

聊聊 Bootstrap3 到 4 的改變

重點為CSS的應用，方法跟框架都改變了，舉個例子:

上圖這樣一個陽春的、兩個方塊的畫面，用 BS3 的想法寫可能需要寫：

// css file
.hello {
  text-align: center;
  background-color: var(--color-primary);
  color: var(--color-white);
  margin: 1.5rem;
  padding: 2rem;
}
.world {
  border: 2px solid var(--color-success);
  background-color: var(--color-primary);
  color: var(--color-success);
  margin-top: 1.5rem;
}
// document(HTML) file
<div class="hello">Hello!</div>
<div> class-"world">World!</div>

用 BS4 utilities class 寫需要寫幾行 css 呢？

<div class="m-3 p-4 bg-primary text-white text-center">
  Hello!
</div>
<div class=" mt-3 border border-success text-success text-center">
  World!
</div>

答案是： 0 行！Σ(*ﾟдﾟﾉ)ﾉ

當然，這樣一來 class 名稱會變得稍嫌冗長，對於不習慣的人可能需要一些陣痛期去適應，但是對於某些只需要改幾行 margin、padding 的元素來說，這些功能就變得相當實用，對於現代 scope CSS 盛行的框架來說，也不必為了區區一兩個元素的的一兩個 style 微調，就得新增一個 css 檔案，整體而言我認為是一個利大於弊的設計方式。

by 好用的 Bootstrap 4 utilities class

靜態與動態網站

首先看一下他們的區別:

靜態網頁

超文件標示語言 HyperText Markup Language，簡稱：HTML，HTML 是網站建置的基礎技術，常與 CSS 與Javascript 配合成一個適合觀看的網頁，讓瀏覽器去讀取，一般判斷方式為網頁副檔名為 html 或 htm 皆為靜態網頁，靜態網頁的優勢為容易為搜尋引擎所接受，所以很多動態網頁會將動態網頁轉變成靜態方式，就是所謂的【偽靜態網頁】來提高搜尋引擎的友善度達到排名優化的成效。

動態網頁

動態網頁主要是搭配伺服器與資料庫共同運作，主要是使用大量編譯的地方，如會員功能、購物車、討論區等等..，意思是指可以與網頁做互動編譯的網頁，動態網頁的內容隨著用戶的輸入和互動而有所不同有 Perl、PHP、ASP、JSP、ColdFusion 等編譯方式，從而對動態網頁的內容進行改變。

靜態網頁與動態的區別

靜態網頁與動態網頁是可以同時存在一個網站上的，二種語言各有其優勢，靜態網站主要是用於較於簡單，更新的不頻繁的網頁，反之動態網站較適合用於，資料內容較大，更新快速的網頁，讓維護人員可以更方便管理網站，也大幅降低維護成本。

by新視野網頁設計

問題: 我們今天架的是靜態的還是動態的網站呢?

javascript 動態變化

雖然這各版型不屬於動態網站，但透過 javascript，
也可以有依時間切換不同顯示網頁內容的功能，
算是一種偽動態，讓我聯想到偽春菜!

以下為程式碼

<script>
    $('.list-hours li').eq(new Date().getDay()).addClass('today');
</script>

另外我們來看一下偽春菜的例子!

[線上展示與程式碼]
- http://www.web3d.url.tw/ITHELP/JQUERY_20190929/

Q版角色用滑鼠點會跑出對話?
by ccutmis 的回答

改正體中文

<!DOCTYPE html>
<html lang="zh-TW">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery-ui draggable demo</title>
</head>

<body>
    <!-- 內容開始 -->
    <style>
        body {
            background: #999;
        }

        #doll:hover {
            animation: dollZoomIn .3s linear forwards;
        }

        @keyframes dollZoomIn {
            transform-origin: center center;

            0% {
                transform: scale(1);
                -webkit-filter: blur(0px);
                filter: blur(0px);
            }

            50% {
                transform: scale(1.1);
                -webkit-filter: blur(5px);
                filter: blur(5px);
            }

            100% {
                transform: scale(1.1);
                -webkit-filter: blur(0px);
                filter: blur(0px);
            }
        }
    </style>

    <div id="doll" class="itemhover mobilestyle ui-draggable ui-draggable-handle"
        style="position: fixed; left: 0px; bottom: 5px; z-index: 2; top: 0px;"><img alt="Q版黄金史莱喵.png"
            src="http://p8.qhimg.com/dr/378__/t01903d549d93936da6.png" width="378" height="378"
            data-file-name="Q版黄金史莱喵.png" data-file-width="378" data-file-height="378">
        <div class="qchartext iteminfo"
            style="position: absolute; min-width: 150px; left: 70%; bottom: 70%; max-width: 550px; width: fit-content; min-height: 30px; height: fit-content; z-index: 3; background-color: rgb(234, 236, 240); border: 1px solid rgb(204, 204, 204); border-radius: 10px; padding: 10px; display: none;">
            喲，我是黃金史萊喵，請多關照啦！</div>
    </div>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        const os = [
            '喲，我是黃金史萊喵，請多關照啦！', '如你所見，我也不是很擅長戰鬥哦。',
            '總之，戰鬥之外的事情就交給我吧！', '天氣不錯呢，要去走走嗎？',
            '不要把我當成小孩子來對待啦！', '出去冒險的話，我可以給您當嚮導哦～',
            '這就是所謂的“身體接觸”嗎？不討厭這種感覺就是了。', '我已經決定了，此生可以託付全部的，只有一個人啊。',
            '以前雖然沒有……不過現在有了需要變強的理由了哦～', '我回來啦，不會再讓你一個人啦~',
            '能夠和您相遇是我的榮幸。'
        ];
        $(function () {
            $('.iteminfo').text(os[0]);
            getXY('doll');
            $("#doll").draggable({
                cursor: 'move',
                stop: function (event, ui) {
                    getXY(this.id);
                }
            });

            $('#doll').on('click', function (e) {
                const osNum = Math.floor(Math.random() * os.length);
                $('.iteminfo').text(os[osNum]).css('display', 'block');
            });
            $('#doll').on('mouseover', function (e) {
                $('.iteminfo').css('display', 'block');
            });
            $('#doll').on('mouseout', function (e) {
                $('.iteminfo').css('display', 'none');
            });
        });

        function getXY(idName) {
            var position = $('#' + idName).position();
            $('#x').text(Math.floor(position.left) + 'px');
            $('#y').text(Math.floor(position.top) + 'px');
            console.log('getXY');
        }
    </script>
    <div id="x">0px</div>
    <div id="y">0px</div>

</body>

</html>