網路程式設計

BootStrap 3

Bootstrap 3 快速入門

參考資料：旅程開始· Bootstrap 3 中文手冊- KKBruce

格線系統(https://kkbruce.tw/bs3/CSS#grid)

w3schools教學（http://www.w3schools.com/bootstrap/）

 

BootStrap on board 

  • 連結BootStrap CDN（或安裝）
  • 設定HTML5 文件類型

Designed by Freepik

  • (選) responsive設定

Bootstrap 3 設定CDN (1/4) 

<head>
<!-- 最新編譯和最佳化的 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- 選擇性佈景主題 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

<!-- 最新編譯和最佳化的 JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
  • 使用Bootstrap 3線上版

在需要BS 3的頁面<head></head>內加入下列三行

Bootstrap 3 HTML5 doctype (2/4) 

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

<head>
<!-- 最新編譯和最佳化的 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- 選擇性佈景主題 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

<!-- 最新編譯和最佳化的 JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
  
<body>

</body>
</html>
  • 設定 HTML5 doctype

檢視該文件最前面是否為 <!DOCTYPE html>

文件編碼：lang屬性可設定為zh（中文）-Hant（繁體）

Bootstrap 3 Responsive (3/4) 

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

<head>
<!-- 最新編譯和最佳化的 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- 選擇性佈景主題 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

<!-- 最新編譯和最佳化的 JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
  
<body>

</body>
</html>
  • 響應式（responsive）設計

在<head></head>加入<meta>設定

Bootstrap 3 範例 (4/4) 

<!DOCTYPE html>
<html lang="zh-Hant">
    <head>
        <!-- 最新編譯和最佳化的 CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

        <!-- 選擇性佈景主題 -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

        <!-- 最新編譯和最佳化的 JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    ...

    </body>
</html>

完整範例

範例 (1/2) 

<!DOCTYPE html>
<html lang="zh-Hant">
    <head>
        <!-- 最新編譯和最佳化的 CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

        <!-- 選擇性佈景主題 -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

        <!-- 最新編譯和最佳化的 JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="container-fluid">
            <form role="form" action="calculator.php" method="POST">
                <div class="form-group form-inline">
                    <label for="exampleInputEmail1">投資期間:</label>
                    <input type="number" class="form-control" name='year' placeholder="輸入投資期間">
                    <span>年</span>
                </div>
                <div class="form-group form-inline">
                    <label for="exampleInputEmail1">未來股利</label>
                    <input type="number" class="form-control" name='dividend' placeholder="輸入股利幾元">
                    <span>元/每股</span>
                </div>
                <div class="form-group form-inline">
                    <label for="exampleInputEmail1">預期投資報酬率</label>
                    <input type="number" class="form-control" name='interest' placeholder="輸入百分比數字">
                    <span>%</span>
                </div>
                <div class="form-group form-inline">
                    <label for="exampleInputEmail1">賣出價格</label>
                    <input type="number" class="form-control" name='price' placeholder="預計幾元賣出">
                    <span>元</span>
                </div>

                <button type="submit" class="btn btn-default">送出</button>
                <button type="reset" class="btn btn-default">取消</button>
            </form>
        </div>
    </body>
</html>

範例 (1/2) 

<!DOCTYPE html>
<html lang="zh-Hant">
    <head>
        <!-- 最新編譯和最佳化的 CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

        <!-- 選擇性佈景主題 -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

        <!-- 最新編譯和最佳化的 JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <?php

        function value($year, $div, $interest, $price) {
            $val = 100 / pow((1 + $interest / 100), $year);
            for ($i = 1; $i <= $year; $i++) {
                $temp = $div / pow((1 + $interest / 100), $i);
                $val += $temp;
            }
            return $val;
        }

        if (isset($_POST['year']) &&
                isset($_POST['dividend']) &&
                isset($_POST['interest']) &&
                isset($_POST['price'])) {
            $year = $_POST['year'];
            $div = $_POST['dividend'];
            $interest = $_POST['interest'];
            $price = $_POST['price'];

            $value = value($year, $div, $interest, $price);
            ?>
            <p>股票價值為<?= $value ?></p>
            <?php
        } else {
            ?>
            <p>數據提供不完整</p>
            <?php
        }
        ?>
        <a href="dividend.php" class="btn btn-primary btn-lg active" role="button">再算一次</a>
    </body>
</html>

Bootstrap 3 格線系統

BS 3 格線系統

  • 提供CSS class設定
  • 由行(row, 橫向)，列(column, 直向)組成
    • 固定12列
  • 行列設定必須放在container內
<div class='container'>
    <div class='row'>
        <div class='col-xs-4'>第一行第一列</div>    
        <!-- col-*-* : 第一個*為解析度 -->
        <div class='col-xs-4'>第一行第一列</div>    
        <!-- 第二個*為數字，為該列所佔比例 -->
    </div>
</div>

格線系統

https://kkbruce.tw/bs3/CSS#grid-options

xs

sm

md

lg

自適應網頁

格線系統

其他重要範例

使用BootStrap佈景主題

3 Col Portfolio版型

下載-解壓縮-複製

開新專案

或

加入現有專案

To Do

  • index.html需改名為.php檔
  • 加入include 'db.inc.php'
  • 於適當位置加入php程式碼

 

必須先了解index.html結構！

了解index.html結構(1/6)

搜尋下列文字

<title> 網站標題

了解index.html結構(2/6)

搜尋下列文字

網頁上顯示的網站名稱
選單

了解index.html結構(3/6) 

網頁標題
3 rows
<!-- Page Header -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">Page Heading
                    <small>Secondary Text</small>
                </h1>
            </div>
        </div>
<!-- /.row -->

<!-- Projects Row -->
        <div class="row">
            <div class="col-md-4 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-4 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-4 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
        </div>
3 columns in each row

了解index.html結構(4/6) 

<!-- Pagination -->
        <div class="row text-center">
            <div class="col-lg-12">
                <ul class="pagination">
                    <li>
                        <a href="#">«</a>
                    </li>
                    <li class="active">
                        <a href="#">1</a>
                    </li>
                    <li>
                        <a href="#">2</a>
                    </li>
                    <li>
                        <a href="#">3</a>
                    </li>
                    <li>
                        <a href="#">4</a>
                    </li>
                    <li>
                        <a href="#">5</a>
                    </li>
                    <li>
                        <a href="#">»</a>
                    </li>
                </ul>
            </div>
        </div>
<!-- /.row -->

分頁

了解index.html結構(5/6) 

<!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright © Your Website 2014</p>
                </div>
            </div>
            <!-- /.row -->
</footer>

頁尾

了解index.html結構(6/6) 

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>3 Col Portfolio - Start Bootstrap Template</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/3-col-portfolio.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Start Bootstrap</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Services</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Page Content -->
    <div class="container">

        <!-- Page Header -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">Page Heading
                    <small>Secondary Text</small>
                </h1>
            </div>
        </div>
        <!-- /.row -->

        <!-- Projects Row -->
        <div class="row">
            <div class="col-md-4 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-4 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-4 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
        </div>
        <!-- /.row -->

        <!-- Projects Row -->
        <div class="row">
            <div class="col-md-4 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-4 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-4 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
        </div>

        <!-- Projects Row -->
        <div class="row">
            <div class="col-md-4 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-4 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-4 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
        </div>
        <!-- /.row -->

        <hr>

        <!-- Pagination -->
        <div class="row text-center">
            <div class="col-lg-12">
                <ul class="pagination">
                    <li>
                        <a href="#">«</a>
                    </li>
                    <li class="active">
                        <a href="#">1</a>
                    </li>
                    <li>
                        <a href="#">2</a>
                    </li>
                    <li>
                        <a href="#">3</a>
                    </li>
                    <li>
                        <a href="#">4</a>
                    </li>
                    <li>
                        <a href="#">5</a>
                    </li>
                    <li>
                        <a href="#">»</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- /.row -->

        <hr>

        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright © Your Website 2014</p>
                </div>
            </div>
            <!-- /.row -->
        </footer>

    </div>
    <!-- /.container -->

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

</body>

</html>

<title> 網站標題

Start Bootstrap  網站名稱

About Services Contact  選單項目
    收合式選單（手機畫面會收起來）

Page Heading 頁面標題

Secondary Text 頁面副標

<!-- Project Row -->  一橫行

<div class="col-md-4 portfolio-item">

<!-- Pagination -->  分頁

<!-- Footer -->  頁尾

搜尋下列文字

加入php程式碼

嘗試改用for迴圈產生3 columns 

        <!-- Projects Row -->
        <div class="row">
            <div class="col-md-4 portfolio-item"> <!--第一格 -->
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <!--第二格, 格式同上-->
            <!--第三格, 格式同上-->           
        </div>
        <!-- /.row -->
        <!-- Projects Row -->
        <div class="row">
        <?php
        for($i=1; $i <= 3; $i++) {  // 三格 
        ?>
            <div class="col-md-4 portfolio-item"> 
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
         <?php
         }
         ?>         
        </div>
        <!-- /.row -->

修改後

修改前

隨資料筆數產生row, col

      <?php
            $count = 3;
            for ($i = 0; $i < $count; $i++) {
                if ($i % 3 == 0) {    // 每一行
                    ?>
                    <div class="row">
                        <?php
                    }
                    ?>
                    <div class="col-md-4 portfolio-item">
                        <a href="#">
                            <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                        </a>
                        <h3>
                            <a href="#">Project Name</a>
                        </h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
                    </div>
                    <?php
                    if ($i % 3 == 2) {
                        ?>
                    </div>
                    <?php
                }
            }
if($count%3 !=2) {
    echo '</div>';
}
            ?>

此處為3筆

$count 可改其他數字

結合資料庫

<?php
include 'db.inc.php';
$limit = 3; // 每一頁筆數上限
$count = $database->count("student"); // 查詢總筆數
$pagination = ($count % $limit) ? floor($count / $limit) + 1 : floor($count / $limit);  // 幾個分頁
if (!isset($_GET['page'])) {
    $page = 1;
} else {
    $page = $_GET['page'];
}
?>
           <?php
            $size = ($page == $pagination) ? ($count - $limit * ($page - 1)) : $limit;
            $where = ['LIMIT' => [($page - 1) * $limit, $size]];
            $data = $database->select('student', '*', $where);

            for ($i = 0; $i < $size; $i++) {
                if ($i % 3 == 0) {    // 每一行
                    ?>
                    <div class="row">
                        <?php
                    }
                    ?>
            .....
$count 資料庫內筆數
$page 現在分頁號

$limit 每頁顯示幾筆
$pagination 分頁總數

$where 查詢條件
['LIMIT' => [開始位置,讀取筆數]]

結合資料庫分頁(Pagination) 

                   <ul class="pagination">
                        <li>
                            <a href="#">«</a>
                        </li>
                        <?php
                        for ($i = 1; $i <= $pagination; $i++) {
                            if ($i == $page) {
                                echo '<li class="active">';
                            } else {
                                echo '<li>';
                            }
                            ?>
                            <a href="product.php?page=<?= $i ?>"><?= $i ?></a>
                            </li>
                            <?php
                        }
                        ?>
                        <li>
                            <a href="#">»</a>
                        </li>
                    </ul>

Practice

  • Student資料表加入圖片檔名欄位
  • 套用3 Col Portfolio顯示Student資料表

其他好用工具