PIXNET Logo登入

Bug倉庫 // 程式日記

跳到主文

Bug倉庫 // 程式日記已經搬家到 https://bugswarehouse.blogspot.tw/ 了喔

部落格全站分類：數位生活

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 9月 23 週六 201710:26

  • bootstrap，上拉式選單，深底導覽列


<!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-bottom" 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="dropup">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">繁體中文 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">繁體中文</a></li>
<li><a href="#">English</a></li>
<li><a href="#">日本語</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>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(459)

  • 個人分類：Bootstrap
▲top
  • 9月 23 週六 201710:26

  • bootstrap，上拉式選單，深底導覽列


<!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-bottom" 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="dropup">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">繁體中文 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">繁體中文</a></li>
<li><a href="#">English</a></li>
<li><a href="#">日本語</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>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：Bootstrap
▲top
  • 9月 23 週六 201710:21

  • bootstrap，固定在上方與下方的導覽列


<!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]-->
<style type="text/css">
body{
height: 300vh;
}
</style>
</head>
<body>
<!-- 下margin 顏色灰色 -->
<nav class="navbar navbar-default 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">
<li><a href="#">繁體中文</a></li>
<li><a href="#">English</a></li>
<li><a href="#">日本語</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-default navbar-fixed-bottom" 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">
<li><a href="#">繁體中文</a></li>
<li><a href="#">English</a></li>
<li><a href="#">日本語</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>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：Bootstrap
▲top
  • 9月 23 週六 201710:21

  • bootstrap，固定在上方與下方的導覽列


<!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]-->
<style type="text/css">
body{
height: 300vh;
}
</style>
</head>
<body>
<!-- 下margin 顏色灰色 -->
<nav class="navbar navbar-default 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">
<li><a href="#">繁體中文</a></li>
<li><a href="#">English</a></li>
<li><a href="#">日本語</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-default navbar-fixed-bottom" 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">
<li><a href="#">繁體中文</a></li>
<li><a href="#">English</a></li>
<li><a href="#">日本語</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>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(5,724)

  • 個人分類：Bootstrap
▲top
  • 9月 23 週六 201710:16

  • bootstrap圖示庫，glyphicon


<!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]-->
<style type="text/css">
i{
margin: 0 10px;
}
</style>
</head>
<body>
<ul class="navbar-nav nav">
<li><a href="#"><i class="glyphicon glyphicon-th"></i>關於我們</a></li>
<li><a href="#"><i class="glyphicon glyphicon-list-alt"></i>資訊列表</a></li>
<li><a href="#"><i class="glyphicon glyphicon-map-marker"></i>位置資訊</a></li>
</ul>
<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>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：Bootstrap
▲top
  • 9月 23 週六 201710:16

  • bootstrap圖示庫，glyphicon


<!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]-->
<style type="text/css">
i{
margin: 0 10px;
}
</style>
</head>
<body>
<ul class="navbar-nav nav">
<li><a href="#"><i class="glyphicon glyphicon-th"></i>關於我們</a></li>
<li><a href="#"><i class="glyphicon glyphicon-list-alt"></i>資訊列表</a></li>
<li><a href="#"><i class="glyphicon glyphicon-map-marker"></i>位置資訊</a></li>
</ul>
<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>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(302)

  • 個人分類：Bootstrap
▲top
  • 9月 23 週六 201701:29

  • bootstrap導覽列，頁面選擇、搜尋表單、會員登入登出、語言選擇


<!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-default" 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">
<li><a href="#">繁體中文</a></li>
<li><a href="#">English</a></li>
<li><a href="#">日本語</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>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(3,447)

  • 個人分類：Bootstrap
▲top
  • 9月 23 週六 201701:29

  • bootstrap導覽列，頁面選擇、搜尋表單、會員登入登出、語言選擇


<!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-default" 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">
<li><a href="#">繁體中文</a></li>
<li><a href="#">English</a></li>
<li><a href="#">日本語</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>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：Bootstrap
▲top
  • 9月 23 週六 201701:13

  • bootstrap的縮圖組件、圓角圖形、圓形、文繞圖


<!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>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3">
<a href="#" class="thumbnail">
<img src="https://api.fnkr.net/testimg/500x500/00a/FFF/?text=A">
<h3>標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita at doloremque, optio sit excepturi eaque quaerat. Nobis, qui, officia. Velit!</p>
</a>
</div>
<div class="col-xs-12 col-sm-3">
<a href="#" class="thumbnail">
<img src="https://api.fnkr.net/testimg/500x500/00a/FFF/?text=A">
<h3>標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil maiores laboriosam, quia repellendus necessitatibus quod perspiciatis dignissimos obcaecati nulla voluptatem.</p>
</a>
</div>
<div class="col-xs-12 col-sm-3">
<a href="#" class="thumbnail">
<img src="https://api.fnkr.net/testimg/500x500/00a/FFF/?text=A">
<h3>標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt reiciendis porro, tenetur, ut similique alias. Ipsum enim autem, neque exercitationem.</p>
</a>
</div>
<div class="col-xs-12 col-sm-3">
<a href="#" class="thumbnail">
<img src="https://api.fnkr.net/testimg/500x500/00a/FFF/?text=A">
<h3>標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quisquam inventore magnam dolore cumque vero beatae sed aliquid odio maxime?</p>
</a>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3">
<a href="#" class="thumbnail">
<img src="https://api.fnkr.net/testimg/500x500/0a0/FFF/?text=B">
<div class="caption">
<h3>標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita at doloremque, optio sit excepturi eaque quaerat. Nobis, qui, officia. Velit!</p>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-3">
<a href="#" class="thumbnail">
<img src="https://api.fnkr.net/testimg/500x500/0a0/FFF/?text=B">
<div class="caption">
<h3>標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil maiores laboriosam, quia repellendus necessitatibus quod perspiciatis dignissimos obcaecati nulla voluptatem.</p>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-3">
<a href="#" class="thumbnail">
<img src="https://api.fnkr.net/testimg/500x500/0a0/FFF/?text=B">
<div class="caption">
<h3>標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt reiciendis porro, tenetur, ut similique alias. Ipsum enim autem, neque exercitationem.</p>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-3">
<a href="#" class="thumbnail">
<img src="https://api.fnkr.net/testimg/500x500/0a0/FFF/?text=B">
<div class="caption">
<h3>標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quisquam inventore magnam dolore cumque vero beatae sed aliquid odio maxime?</p>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3">
<a href="#" class="thumbnail">
<img class="img-rounded" src="https://api.fnkr.net/testimg/500x500/a00/FFF/?text=C">
<div class="caption">
<h3>標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita at doloremque, optio sit excepturi eaque quaerat. Nobis, qui, officia. Velit!</p>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-3">
<a href="#" class="thumbnail">
<img class="img-rounded" src="https://api.fnkr.net/testimg/500x500/a00/FFF/?text=C">
<div class="caption">
<h3>標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil maiores laboriosam, quia repellendus necessitatibus quod perspiciatis dignissimos obcaecati nulla voluptatem.</p>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-3">
<a href="#" class="thumbnail">
<img class="img-circle" src="https://api.fnkr.net/testimg/500x500/a00/FFF/?text=C">
<div class="caption">
<h3>標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt reiciendis porro, tenetur, ut similique alias. Ipsum enim autem, neque exercitationem.</p>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-3">
<a href="#" class="thumbnail">
<img class="img-circle" src="https://api.fnkr.net/testimg/500x500/a00/FFF/?text=C">
<div class="caption">
<h3>標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quisquam inventore magnam dolore cumque vero beatae sed aliquid odio maxime?</p>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<h3>標題</h3>
<img class="pull-left img-responsive" src="https://api.fnkr.net/testimg/200x200/a0A/FFF/?text=D">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita at doloremque, optio sit excepturi eaque quaerat. Nobis, qui, officia. Velit!</p>
<div class="clearfix"></div>
</div>
<div class="col-xs-12 col-sm-4">
<h3>標題</h3>
<img class="pull-right img-responsive" src="https://api.fnkr.net/testimg/200x200/a0A/FFF/?text=D">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil maiores laboriosam, quia repellendus necessitatibus quod perspiciatis dignissimos obcaecati nulla voluptatem.</p>
<div class="clearfix"></div>
</div>
<div class="col-xs-12 col-sm-4">
<h3>標題</h3>
<img class="center-block img-responsive" src="https://api.fnkr.net/testimg/200x200/a0A/FFF/?text=D">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil maiores laboriosam, quia repellendus necessitatibus quod perspiciatis dignissimos obcaecati nulla voluptatem.</p>
<div class="clearfix"></div>
</div>
</div>
<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>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：Bootstrap
▲top
  • 9月 23 週六 201701:13

  • bootstrap的縮圖組件、圓角圖形、圓形、文繞圖


<!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>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3">
<a href="#" class="thumbnail">
<img src="https://api.fnkr.net/testimg/500x500/00a/FFF/?text=A">
<h3>標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita at doloremque, optio sit excepturi eaque quaerat. Nobis, qui, officia. Velit!</p>
</a>
</div>
<div class="col-xs-12 col-sm-3">
<a href="#" class="thumbnail">
<img src="https://api.fnkr.net/testimg/500x500/00a/FFF/?text=A">
<h3>標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil maiores laboriosam, quia repellendus necessitatibus quod perspiciatis dignissimos obcaecati nulla voluptatem.</p>
</a>
</div>
<div class="col-xs-12 col-sm-3">
<a href="#" class="thumbnail">
<img src="https://api.fnkr.net/testimg/500x500/00a/FFF/?text=A">
<h3>標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt reiciendis porro, tenetur, ut similique alias. Ipsum enim autem, neque exercitationem.</p>
</a>
</div>
<div class="col-xs-12 col-sm-3">
<a href="#" class="thumbnail">
<img src="https://api.fnkr.net/testimg/500x500/00a/FFF/?text=A">
<h3>標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quisquam inventore magnam dolore cumque vero beatae sed aliquid odio maxime?</p>
</a>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3">
<a href="#" class="thumbnail">
<img src="https://api.fnkr.net/testimg/500x500/0a0/FFF/?text=B">
<div class="caption">
<h3>標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita at doloremque, optio sit excepturi eaque quaerat. Nobis, qui, officia. Velit!</p>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-3">
<a href="#" class="thumbnail">
<img src="https://api.fnkr.net/testimg/500x500/0a0/FFF/?text=B">
<div class="caption">
<h3>標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil maiores laboriosam, quia repellendus necessitatibus quod perspiciatis dignissimos obcaecati nulla voluptatem.</p>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-3">
<a href="#" class="thumbnail">
<img src="https://api.fnkr.net/testimg/500x500/0a0/FFF/?text=B">
<div class="caption">
<h3>標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt reiciendis porro, tenetur, ut similique alias. Ipsum enim autem, neque exercitationem.</p>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-3">
<a href="#" class="thumbnail">
<img src="https://api.fnkr.net/testimg/500x500/0a0/FFF/?text=B">
<div class="caption">
<h3>標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quisquam inventore magnam dolore cumque vero beatae sed aliquid odio maxime?</p>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3">
<a href="#" class="thumbnail">
<img class="img-rounded" src="https://api.fnkr.net/testimg/500x500/a00/FFF/?text=C">
<div class="caption">
<h3>標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita at doloremque, optio sit excepturi eaque quaerat. Nobis, qui, officia. Velit!</p>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-3">
<a href="#" class="thumbnail">
<img class="img-rounded" src="https://api.fnkr.net/testimg/500x500/a00/FFF/?text=C">
<div class="caption">
<h3>標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil maiores laboriosam, quia repellendus necessitatibus quod perspiciatis dignissimos obcaecati nulla voluptatem.</p>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-3">
<a href="#" class="thumbnail">
<img class="img-circle" src="https://api.fnkr.net/testimg/500x500/a00/FFF/?text=C">
<div class="caption">
<h3>標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt reiciendis porro, tenetur, ut similique alias. Ipsum enim autem, neque exercitationem.</p>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-3">
<a href="#" class="thumbnail">
<img class="img-circle" src="https://api.fnkr.net/testimg/500x500/a00/FFF/?text=C">
<div class="caption">
<h3>標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quisquam inventore magnam dolore cumque vero beatae sed aliquid odio maxime?</p>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<h3>標題</h3>
<img class="pull-left img-responsive" src="https://api.fnkr.net/testimg/200x200/a0A/FFF/?text=D">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita at doloremque, optio sit excepturi eaque quaerat. Nobis, qui, officia. Velit!</p>
<div class="clearfix"></div>
</div>
<div class="col-xs-12 col-sm-4">
<h3>標題</h3>
<img class="pull-right img-responsive" src="https://api.fnkr.net/testimg/200x200/a0A/FFF/?text=D">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil maiores laboriosam, quia repellendus necessitatibus quod perspiciatis dignissimos obcaecati nulla voluptatem.</p>
<div class="clearfix"></div>
</div>
<div class="col-xs-12 col-sm-4">
<h3>標題</h3>
<img class="center-block img-responsive" src="https://api.fnkr.net/testimg/200x200/a0A/FFF/?text=D">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil maiores laboriosam, quia repellendus necessitatibus quod perspiciatis dignissimos obcaecati nulla voluptatem.</p>
<div class="clearfix"></div>
</div>
</div>
<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>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(684)

  • 個人分類：Bootstrap
▲top
«1...9101137»

文章搜尋

文章搜尋

文章分類

toggle 伺服器架設 (1)
  • AWS (2)
toggle 伺服器架設 (1)
  • AWS (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle 後端框架 (1)
  • Laravel (26)
toggle 後端框架 (1)
  • Laravel (26)
  • 自學資源 (1)
  • 自學資源 (1)
  • 未分類文章 (1)

文章分類

toggle 伺服器架設 (1)
  • AWS (2)
toggle 伺服器架設 (1)
  • AWS (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle 後端框架 (1)
  • Laravel (26)
toggle 後端框架 (1)
  • Laravel (26)
  • 自學資源 (1)
  • 自學資源 (1)
  • 未分類文章 (1)

最新文章

  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 使用laravel內建的vue componet
  • 使用laravel內建的vue componet
  • Vuetify
  • Vuetify
  • VS code安裝後相關
  • VS code安裝後相關

最新文章

  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 使用laravel內建的vue componet
  • 使用laravel內建的vue componet
  • Vuetify
  • Vuetify
  • VS code安裝後相關
  • VS code安裝後相關

個人資訊

Jerry
暱稱：
Jerry
分類：
數位生活
好友：
累積中
地區：

個人資訊

Jerry
暱稱：
Jerry
分類：
數位生活
好友：
累積中
地區：

文章精選

文章精選

熱門文章

  • (1,572)用vue寫購物車（小計、總計、數量計算）
  • (474)用js寫一個時鐘，用Date物件
  • (388)Autoprefixer CSS 自動加前綴工具（以符合各瀏覽器）
  • (44)過濾器，排列方式依據名稱字首，1與-1切換升冪與降冪
  • (43)createElement、createTextNode、appendChild，動態新增元素組合技
  • (13)Laravel，view視圖
  • (9)面試會考：寫出5的倍數的乘法表
  • (7)childNode和nodeValue，我的html是一棵樹，啊哩啊紮都是節點
  • (7)counter-increment與counter-rest，文章分段可用
  • (3)on綁定傳入四個參數，事件物件的type和data.自定義

熱門文章

  • (1,572)用vue寫購物車（小計、總計、數量計算）
  • (474)用js寫一個時鐘，用Date物件
  • (388)Autoprefixer CSS 自動加前綴工具（以符合各瀏覽器）
  • (44)過濾器，排列方式依據名稱字首，1與-1切換升冪與降冪
  • (43)createElement、createTextNode、appendChild，動態新增元素組合技
  • (13)Laravel，view視圖
  • (9)面試會考：寫出5的倍數的乘法表
  • (7)childNode和nodeValue，我的html是一棵樹，啊哩啊紮都是節點
  • (7)counter-increment與counter-rest，文章分段可用
  • (3)on綁定傳入四個參數，事件物件的type和data.自定義

最新留言

    最新留言

      動態訂閱

      動態訂閱

      誰來我家

      誰來我家

      參觀人氣

      • 本日人氣：
      • 累積人氣：

      參觀人氣

      • 本日人氣：
      • 累積人氣：