<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Title Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- 下margin 顏色黑色 -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- 上下左右都有padding -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle='collapse' data-target='.navbar-ex1-collapse'>
<!-- 那個點很重要 -->
<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>
<!-- 刪除預設padding margin -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">目前頁面</a></li>
<li><a href="#">其他頁面</a></li>
<li><a href="#">其他頁面</a></li>
<li><a href="#">其他頁面</a></li>
</ul>
<!--上下margin左右padding / 被float right推過去 -->
<form class="navbar-form navbar-left" role="search">
<!-- 使用inline-block -->
<div class="form-group">
<!-- 文字欄位 -->
<input type="text" class="form-control" placeholder="請輸入關鍵字">
</div>
<!-- 顏色白色 -->
<button type="submit" class="btn btn-default">搜尋</button>
</form>
<!-- 被float right推過去 -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">會員 您好</a></li>
<li><a href="#">登出</a></li>
<li><a href="#">個人設定</a></li>
<!-- li裡面還有ul !!! -->
<!-- 按下後，增加class open -->
<li class="dropdown ">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">繁體中文 <b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">亞洲</li>
<li><a href="#">繁體中文</a></li>
<li><a href="#">日本語</a></li>
<li class="divider"></li>
<li class="dropdown-header">美洲</li>
<li><a href="#">English</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
全站熱搜
留言列表
伺服器架設 (1)
