HackMD
Bootstrap SAP 排版應用
tags: Bootstrap
font awesome icon 圖片放大寫法fa-5x ※5表示放大多少，數字越大放的越大
可參考官網說明:
https://fontawesome.com/v4.7.0/examples/
https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons
小技巧:
用section區分區塊撰寫
背景圖片可以用container-fluid解決無法滿版的問題
練習的程式碼如下:
<!doctype html>
<html lang="tw">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- font awesome icon-->
<link rel="stylesheet" href="css/all.min.css"><!--load all styles -->
<!-- google Noto 字體 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400&family=Noto+Serif+TC&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Noto Sans TC', sans-serif;
}
.carousel-caption {
background-color: rgba(0, 0, 0, 0.5);
}
.carousel-caption h5{
font-size: 36px;
}
.bg-cover {
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
}
@media screen and (max-width: 768px) {
.bg-text-white{
color: #fff;
z-index: 1;
}
}
</style>
<title>形象官網</title>
</head>
<body>
<!-- facebook twitter -->
<section class="bg-secondary">
<div class="container text-white text-right pr-4">
<i class="fab fa-facebook-square"></i>
<i class="fab fa-twitter-square"></i>
</div>
</section>
<!-- navbar -->
<section class=" bg-dark">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark">
<img src="https://hahow.in/static/media/logo-black.23fa8b87.svg" alt="" width="100px">
<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="#">關於我們 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
所有課程
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<button class="btn btn-outline-primary my-2 my-sm-0 mx-2" type="submit">登入</button>
<button class="btn btn-primary my-2 my-sm-0" type="submit">註冊</button>
</form>
</div>
</nav>
</div>
</section>
<!-- carousel -->
<section>
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item bg-cover active" style="background-image: url(YIBO-NIKE-Web/image/YIBO/airmax-2090-storytelling-cn-326.jpg); height: 360px;">
<div class="carousel-caption d-none d-md-block">
<h5>關於我們</h5>
<p>創造一個不受限與適才適性的環境，讓大家更輕鬆快樂地累積知識技能，推動社會持續進步。</p>
</div>
</div>
<div class="carousel-item bg-cover" style="background-image: url(YIBO-NIKE-Web/image/YIBO/airmax-2090-storytelling-cn-326.jpg); height: 360px;">
<div class="carousel-caption d-none d-md-block">
<h5>學那些，學校不會教的事</h5>
<p>Hahow 「ㄏㄚˇㄏㄠ」，取自台語「學校」(ha̍k-hāu) 的發音，是最有趣的線上課程平台，亞洲領先的跨領域募資學習網站。</p>
</div>
</div>
<div class="carousel-item bg-cover" style="background-image: url(YIBO-NIKE-Web/image/YIBO/airmax-2090-storytelling-cn-326.jpg); height: 360px;">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>2015 年 01 月由 4 個 7 年級生創立，期望從自身經歷，散播我們的學習哲學。不管你在自己的學校中學到了什麼，都會渴望認識新的事物，學那些學校不會教的事，就是豐富人生的秘密！</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!-- 經營理念 -->
<section class="bg-info">
<div class="container">
<div class="row text-white">
<div class="col-md-4 py-3 text-center">
<i class="fab fa-angellist fa-7x pb-2"></i>
<h5>購買後登入網站，課程無限次觀看</h5>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti ipsum totam laboriosam dolor hic labore perferendis similique atque adipisci..</p>
</div>
<div class="col-md-4 py-3 text-center">
<i class="fab fas fa-child fa-7x pb-2"></i>
<h5>知識有價，超過 261,880 購課次數</h5>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti ipsum totam laboriosam dolor hic labore
perferendis similique atque adipisci..</p>
</div>
<div class="col-md-4 py-3 text-center">
<i class="fas fa-book fa-7x pb-2"></i>
<h5>超過 411 位老師分享深藏的技能</h5>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti ipsum totam laboriosam dolor hic labore
perferendis similique atque adipisci..</p>
</div>
</div>
</div>
</section>
<!-- 詳細服務說明 -->
<section class="bg-light" style="position: relative;">
<div class="container-fluid"><!-- 解決手機板畫面圖片無法滿版的問題 -->
<div class="row">
<div class="col-md-5 bg-cover" style="background-image: url('image/YIBO/7.jpg'); position: absolute; top: 0; bottom: 0;"></div>
</div>
<div class="container">
<div class="row justify-content-end bg-text-white p-3">
<div class="col-md-7">
<h3>Hahow 的特色</h3>
<p> 購買後登入網站，課程無限次觀看 共享教育，人人都能是老師或學生 超過 270,000 名註冊會員 知識有價，超過 261,880 購課次數 超過 411 位老師分享深藏的技能 會員遍佈全台灣、香港及全世界</p>
<button class="btn btn-info">查看更多</button>
<div class="row pt-3">
<div class="col-md-6">
<h3>權限長度讀數字增強</h3>
<p>內部隊員她說傳說以為你是鮮花名稱開口一個月工廠保存卻是觀察應，較大數據庫推薦有一種試題露出，大約學生個性我和女子地圖熱門登錄每，劇情站長內。</p>
</div>
<div class="col-md-6">
<h3>權限長度讀數字增強</h3>
<p>內部隊員她說傳說以為你是鮮花名稱開口一個月工廠保存卻是觀察應，較大數據庫推薦有一種試題露出，大約學生個性我和女子地圖熱門登錄每，劇情站長內。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 4格介紹 -->
<section>
<div class="container">
<h2 class="text-center font-weight-bold p-3">作業網際特徵郵箱監控。</h2>
<div class="row">
<div class="col-md-6">
<div class="d-flex"> <!-- 這裡寫d-flex讓icon跟文字可以左右並排 -->
<i class="fas fa-child fa-5x"></i>
<div>
<h5>1.之中事項引導好像我國出去優惠</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, fugit, ipsa! Inventore tempore vitae debitis laboriosam ut quod, at aperiam.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex">
<i class="fas fa-child fa-5x"></i>
<div>
<h5>1.之中事項引導好像我國出去優惠</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, fugit, ipsa! Inventore tempore vitae debitis laboriosam ut quod, at aperiam.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex">
<i class="fas fa-child fa-5x"></i>
<div>
<h5>1.之中事項引導好像我國出去優惠</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, fugit, ipsa! Inventore tempore vitae debitis laboriosam ut quod, at aperiam.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex">
<i class="fas fa-child fa-5x"></i>
<div>
<h5>1.之中事項引導好像我國出去優惠</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, fugit, ipsa! Inventore tempore vitae debitis laboriosam ut quod, at aperiam.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 詳細服務說明-左右相反 -->
<section class="bg-white" style="position: relative;">
<div class="container-fluid"><!-- 解決手機板畫面圖片無法滿版的問題 -->
<div class="container">
<div class="row">
<div class="col-md-7 bg-text-white pt-3">
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
</div>
</div>
</div>
<div class="row justify-content-end">
<div class="col-md-5 bg-cover" style="background-image: url('image/YIBO/3.jpg'); top: 0;bottom: 0; position: absolute;">
</div>
</div>
</div>
</section>
<!-- map -->
<section class="bg-light py-4">
<div class="container">
<div class="row">
<div class="col-md-6">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14560.365550356555!2d120.60847195!3d24.16852755!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x447746cee675e89f!2z5rW35rSL5LqS6IGv56eR5oqA6IKh5Lu95pyJ6ZmQ5YWs5Y-4!5e0!3m2!1szh-TW!2stw!4v1587019143468!5m2!1szh-TW!2stw" width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
<div class="col-md-6">
<form>
<div class="form-group">
<label for="name">姓名</label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label for="phone">電話</label>
<input type="text" class="form-control" id="phone">
</div>
<div class="form-group">
<label for="email1">Email</label>
<input type="email" class="form-control" id="email1" aria-describedby="emailHelp">
</div>
<div class="text-right">
<button type="submit" class="btn btn-outline-primary">取消</button>
<button type="submit" class="btn btn-primary">送出</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- footer 介紹 -->
<section>
<div class="row">
<div class="col-md-6 bg-cover text-white" style="background-image: url('image/YIBO/airmax-2090-storytelling-cn-326 (4).jpg');">
<div class="row">
<div class="col-sm-9 m-3">
<small class="form-text text-light">We'll never share your email with anyone else.</small>
<h5>卻是素質無聊價值利潤影片下來大哥</h5>
<p>均為不想演唱留言板也許有，收藏理論很久負責第二次均為下去同事創新準備系統是，跟我本類財富當然經常項目減。</p>
<button class="btn btn-outline-danger">詳情</button>
</div>
<div class="col-sm-3"></div>
</div>
</div>
<div class="col-md-6 bg-cover text-white" style="background-image: url('image/YIBO/72451143001_6144309172001_6144304496001-vs.jpg');">
<div class="row">
<div class="col-sm-9 m-3">
<small class="form-text text-light">We'll never share your email with anyone else.</small>
<h5>卻是素質無聊價值利潤影片下來大哥</h5>
<p>均為不想演唱留言板也許有，收藏理論很久負責第二次均為下去同事創新準備系統是，跟我本類財富當然經常項目減。</p>
<button class="btn btn-outline-danger">詳情</button>
</div>
<div class="col-sm-3"></div>
</div>
</div>
</div>
</section>
<!-- footer -->
<section>
<nav class="nav justify-content-center">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
