:::

23-1 index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BootStrap4練習</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/my.css">
</head>

<body>
    <div style="background-color:#185252;">
        <div class="container">
            <div class="row py-4 align-items-center">
                <div class="col-sm text-center text-lg-right">
                    <img src="images/logo.png" alt="logo">
                </div>
                <div class="col-sm-auto text-center">
                    <a href="#" class="btn btn-tools p-1 p-sm-2">
                        <i class="fa fa-search fa-2x fa-flip-horizontal" aria-hidden="true"></i>
                        <div>站內搜尋</div>
                    </a>
                    <a href="#" class="btn btn-tools p-1 p-sm-2">
                        <i class="fa fa-car fa-2x" aria-hidden="true"></i>
                        <div>交通路線</div>
                        </a>
                    <a href="#" class="btn btn-tools p-1 p-sm-2">
                        <i class="fa fa-file-o fa-2x" aria-hidden="true"></i>
                        <div>網站地圖</div>
                    </a>
                    <a href="#" class="btn btn-tools p-1 p-sm-2">
                        <i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>
                        <div>意見箱</div>
                    </a>
                    <a href="#" class="btn btn-tools p-1 p-sm-2">
                        <i class="fa fa-globe fa-2x" aria-hidden="true"></i>
                        <div>English</div>
                    </a>
                </div>
                <div class="col-sm text-center text-lg-left">
                    <a href="#" class="btn-tools"><span>考生</span></a>
                    <a href="#" class="btn-tools"><span>新生</span></a>
                    <a href="#" class="btn-tools"><span>學生</span></a>
                    <a href="#" class="btn-tools"><span>教師</span></a>
                    <a href="#" class="btn-tools"><span>職員</span></a>
                    <div class="d-inline d-lg-block"></div>
                    <a href="#" class="btn-tools"><span>家長</span></a>
                    <a href="#" class="btn-tools"><span>訪客</span></a>
                    <a href="#" class="btn-tools"><span>畢業生及校友</span></a>
                </div>
            </div>
        </div>
    </div>


    <nav class="navbar navbar-expand-md navbar-dark bg-green p-sm-0">
        <div class="container">
            <button class="navbar-toggler navbar-toggler-right" 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">
                    <!--此處加入選項-->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbar1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">選項1</a>
                        <div class="dropdown-menu" aria-labelledby="navbar1">
                            <a class="dropdown-item" href="#">子選項1</a>
                            <a class="dropdown-item" href="#">子選項2</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbar2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">選項1</a>
                        <div class="dropdown-menu" aria-labelledby="navbar2">
                            <a class="dropdown-item" href="#">子選項1</a>
                            <a class="dropdown-item" href="#">子選項2</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">選項</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

</html>

 


:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D32%26tbdsn%3D975

計數器

今天: 1712171217121712
昨天: 2596259625962596
總計: 7593160759316075931607593160759316075931607593160