###### tags: `程式`

# Bootstrap Code

# 前端畫面

## 關鍵字靜態搜尋

Tips：利用關鍵字靜態搜尋 (尚未連資料庫時)

[關鍵字靜態搜尋](https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/242700/)
[搜尋功能](https://www.796t.com/post/MXUyM28=.html)

## 表單(Forms)

Tip：表單提交給後台系統，讓資料庫可以新增會員資料

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Ex：


[表單](https://bootstrap.hexschool.com/docs/4.2/components/forms/)

## 登入跳轉

<div class="container">
  <h2>Modal Login Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header" style="padding:35px 50px;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
        </div>
        <div class="modal-body" style="padding:40px 50px;">
          <form role="form">
            <div class="form-group">
              <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
              <input type="text" class="form-control" id="usrname" placeholder="Enter email">
            </div>
            <div class="form-group">
              <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
              <input type="text" class="form-control" id="psw" placeholder="Enter password">
            </div>
            <div class="checkbox">
              <label><input type="checkbox" value="" checked>Remember me</label>
            </div>
              <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
          </form>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
          <p>Not a member? <a href="#">Sign Up</a></p>
          <p>Forgot <a href="#">Password?</a></p>
        </div>
      </div>
      
    </div>
  </div> 
</div>

[登入跳轉](https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp)

<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
</script>

## 圖片預設

Tips：放置預設圖片

`<img src="..." class="img-fluid" alt="...">`

[圖片](https://getbootstrap.com/docs/5.0/content/images/)

## 輪播/熱門活動(Carousel)

Tips：利用輪播功能展示現在的熱門活動

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://i.imgur.com/JGG56fB.png" class="d-block w-100" alt="First Slide">
          </div>
          <div class="carousel-item">
            <img src="https://i.imgur.com/JGG56fB.png" class="d-block w-100" alt="Second Slide">
          </div>
          <div class="carousel-item">
            <img src="https://i.imgur.com/JGG56fB.png" class="d-block w-100" alt="Third Slide">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>

圖例


[輪播](https://bootstrap.hexschool.com/docs/4.2/components/carousel/)

## 按鈕樣式

Tips：用於做不同按鈕的樣式

<!-- 標準的按鈕 -->
<button type="button" class="btn btn-default">默認按鈕</button>
<!-- 提供額外的視覺效果，標示一組按鈕中的原始動作 -->
<button type="button" class="btn btn-primary">原始按鈕</button>
<!-- 表是一個成功的或積極的動作 -->
<button type="button" class="btn btn-success">成功按鈕</button>
<!-- 信息警告消息的上下文按鈕 -->
<button type="button" class="btn btn-info">信息按鈕</button>
<!-- 表示應謹慎採取的動作 -->
<button type="button" class="btn btn-warning">警告按鈕</button>
<!-- 表示一個危險的或潛在的負面動作 -->
<button type="button" class="btn btn-danger">危險按鈕</button>
<!-- 並不強調是一個按鈕，看起來像一個連接，但同時保持按鈕的行為 -->
<button type="button" class="btn btn-link">鏈接按鈕</button>


[按鈕樣式](https://www.runoob.com/bootstrap/bootstrap-buttons.html)

## 彈跳互動視窗 (Model)

Tips：用於彈跳視窗作互動用

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Ex：


[互動視窗](https://bootstrap.hexschool.com/docs/4.2/components/modal/)

## 卡片 (Card)

Tips：用來簡化活動預覽，顯示活動。

<div class="card" style="width: 18rem;"> --設置一個卡片功能
  <img src="..." class="card-img-top" alt="..."> --圖片放置區
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>


* card-body (卡片內部的填充內容)

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>


[Card](https://getbootstrap.com/docs/5.0/components/card/)

---

# 後台顯示頁

## 跑馬燈

Tips：用於資料顯示

<div class="container">
    <div class="row">
        <div class="alert alert-danger alert-dismissible" role="alert">
            <button type="button" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" class="close" data-dismiss="alert">
                <span aria-hidden="true">×</span>
                <span class="sr-only">Close</span></button>
            <strong>
                <i class="fa fa-warning"></i>Danger!</strong>
            <marquee>
                <p style="font-family: Impact; font-size: 18pt">Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor!</p></marquee>
        </div>
    </div>
</div>

EX:


[跑馬燈](https://www.itread01.com/content/1540995963.html)

## 選單 (漢堡)

[漢堡](https://ithelp.ithome.com.tw/articles/10223475)
[選單](https://ithelp.ithome.com.tw/articles/10192870)

## 後台的按鈕顯示

Tips：後台顯示的警示

<button type="button" class="btn btn-primary">
  Profile <span class="badge bg-secondary">9</span>
  <span class="visually-hidden">unread messages</span></button> 

EX：


顏色

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>


[按鈕功能](https://getbootstrap.com/docs/5.0/components/badge/)

## 清單

<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
	<div class="container-fluid"> 
		<div class="navbar-header">
			<button class="navbar-toggle" type="button" data-toggle="collapse" 
					data-target=".bs-js-navbar-scrollspy">
				<span class="sr-only">切换导航</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">教程名称</a>
		</div>
		<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
			<ul class="nav navbar-nav">
				<li><a href="#ios">iOS</a></li>
				<li><a href="#svn">SVN</a></li>
				<li class="dropdown">
					<a href="#" id="navbarDrop1" class="dropdown-toggle" 
					   data-toggle="dropdown">Java
						<b class="caret"></b>
					</a>
					<ul class="dropdown-menu" role="menu" 
						aria-labelledby="navbarDrop1">
						<li><a href="#jmeter" tabindex="-1">jmeter</a></li>
						<li><a href="#ejb" tabindex="-1">ejb</a></li>
						<li class="divider"></li>
						<li><a href="#spring" tabindex="-1">spring</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div> 
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0" 
	 style="height:200px;overflow:auto; position: relative;">
	<h4 id="ios">iOS</h4>
	<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 
		TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
	</p>
	<h4 id="svn">SVN</h4>
	<p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。
	</p>
	<h4 id="jmeter">jMeter</h4>
	<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。
	</p>
	<h4 id="ejb">EJB</h4>
	<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
	</p>
	<h4 id="spring">Spring</h4>
	<p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。
	</p>
	<p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。
	</p>
</div>


---