Bootstrap做簡單的網站首頁
阿新 • • 發佈：2018-04-13
Bootstrap 簡單網站首頁 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>網站首頁</title>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
.jumbotron {
background:url(./images/mous.jpg);
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">網站名稱</a>
</div>
<div class="collapse navbar-collapse" id="menu1">
<ul class="nav navbar-nav nav-tabs">
<li><a href="#">首頁</a></li>
<li><a href="#">公司簡介</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">
產品目錄
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">產品1</a></li>
<li><a href="#">產品2</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" name="q" placeholder="請輸入關鍵字" />
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 註冊</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登錄</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron masthead bg-info" >
<div class="cotainer text-center">
<h1 style="color: white;font-size: 80px">歡迎來到XXX公司</h1>
<h3 style="color: white">細節決定成敗，科技創造未來，大膽假設，刻苦鉆研，是我們公司的宗旨，編不下去了。</h3>
<br/><br/>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>網站首頁</title>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
.jumbotron {
background:url(./images/mous.jpg);
}
</style></head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collasped" data-toggle="collapse" data-target="#menu1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">網站名稱</a>
</div>
<div class="collapse navbar-collapse" id="menu1">
<ul class="nav navbar-nav nav-tabs">
<li><a href="#">首頁</a></li>
<li><a href="#">公司簡介</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">
產品目錄
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">產品1</a></li>
<li><a href="#">產品2</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" name="q" placeholder="請輸入關鍵字" />
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 註冊</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登錄</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron masthead bg-info" >
<div class="cotainer text-center">
<h1 style="color: white;font-size: 80px">歡迎來到XXX公司</h1>
<h3 style="color: white">細節決定成敗，科技創造未來，大膽假設，刻苦鉆研，是我們公司的宗旨，編不下去了。</h3>
<br/><br/>
<button type="button" class="btn btn-default btn-primary btn-lg">點擊下載XXX</button> <br/>
<h5><a href="#" style="color: black">XXX通道</a></h5>
<br/><br/>
</div>
</div>
<div class="container">
<div class="row text-center">
<a href="#" style="color: gray;font-size: 15px">XXX公司問答社區 | </a>
<a href="#" style="color: gray;font-size: 15px">新浪微博：@XXX公司微博</a><br/><br/>
</div>
<div class="row text-center">
<h1>XXX公司相關產品推薦</h1>
<h5>這些產品性能良好，價格便宜，物美價廉，我編不下去了</h5>
</div>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<div style="background-color:#9370D8;width: 100%;height: 100px" class="text-center">
<h2 style="color:white;">產品1</h2>
</div>
<h3 class="text-primary text-center"><a href="#" style="text-decoration: none">產品1</a></h3>
<h5 class="text-center"><a href="#" style="color:gray;text-decoration: none">by @product</a></h5>
<p class="text-center">該產品，想能良好，物美價廉，我編不下去了</p>
<br/><br/><br/><br/>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<div style="background-color:#9370D8;width: 100%;height: 100px" class="text-center">
<h2 style="color:white;">產品2</h2>
</div>
<h3 class="text-primary text-center"><a href="#" style="text-decoration: none">產品2</a></h3>
<h5 class="text-center"><a href="#" style="color:gray;text-decoration: none">by @product</a></h5>
<p class="text-center">該產品，想能良好，物美價廉，我編不下去了</p>
<br/><br/><br/><br/>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<div style="background-color:#9370D8;width: 100%;height: 100px" class="text-center">
<h2 style="color:white;">產品3</h2>
</div>
<h3 class="text-primary text-center"><a href="#" style="text-decoration: none">產品3</a></h3>
<h5 class="text-center"><a href="#" style="color:gray;text-decoration: none">by @product</a></h5>
<p class="text-center">該產品，想能良好，物美價廉，我編不下去了</p>
<br/><br/><br/><br/>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<div style="background-color:#9370D8;width: 100%;height: 100px" class="text-center">
<h2 style="color:white;">產品4</h2>
</div>
<h3 class="text-primary text-center"><a href="#" style="text-decoration: none">產品4</a></h3>
<h5 class="text-center"><a href="#" style="color:gray;text-decoration: none">by @product</a></h5>
<p class="text-center">該產品，想能良好，物美價廉，我編不下去了</p>
<br/><br/><br/><br/>
</div>
</div>
</div>
</div></body>
</html>
結果展示：
Bootstrap做簡單的網站首頁