收藏
批改狀態(tài)：未批改
老師批語：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../lib/css/bootstrap.css">
<title>bootstrap頭部</title>
<style>
li{
list-style-type: none;
}
ul{
padding:0;
}
.navbar{
margin-bottom: 0;
}
.navbar .navbar-nav > .right{
position: absolute;
right: 0;
}
.jumbotron{
background: url(1.png);
background: -webkit-gradient(linear,left bottom,right top,color-stop(0,#020031),color-stop(100%,#6d3353));
color:#fff;
}
.jumbotron h1{
font-size:100px;
margin-bottom: 20px;
}
.jumbotron > h2{
font-size:30px;
margin-bottom: 20px;
}
.jumbotron > a{
font-size:13px;
color:rgba(255,255,255,.5);
}
.jumbotron > a:hover{
color:#fff;
}
.cuo > h2{
font-size:42px;
}
.cuo > p{
margin:0 0 20px;
}
.cuo a{
text-decoration:none;
}
.cuo a > p{
font-size:17px;
color:#777;
}
.cuo ul li {
width:262px;
height:336px;
margin: 0 10px 20px 10px;
}
.cuo ul li > p{
font-size:14px;
}
</style>
</head>
<body style="height:3000px">
<div class="header">
<div class="top navbar-inverse">
<div class="container">
<nav class="navbar">
<ul class="nav navbar-nav">
<li><a href="#">bootstrap中文網(wǎng)</a></li>
<li><a href="#">Bootstrap2中文文檔</a></li>
<li><a href="#">Bootstrap4中文文檔</a></li>
<li><a href="#">Less 教程</a></li>
<li><a href="#">jQuery API</a></li>
<li><a href="#">網(wǎng)站實(shí)例</a></li>
<li class="right"><a href="#">關(guān)于</a></li>
</ul>
</nav>
</div>
</div>
<div class="jumbotron text-center">
<h1>Bootstrap</h1>
<h2>簡潔、直觀、強(qiáng)悍的前端開發(fā)框架，讓web開發(fā)更迅速、簡單。</h2>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Bootstrap2中文文檔(v3.3.7)</a></p>
<a href="#">Bootstrap2中文文檔(v2.3.2)</a>
</div>
<div class="container text-center cuo">
<h2>Bootstrap相關(guān)優(yōu)質(zhì)項(xiàng)目推薦</h2>
<p>這些項(xiàng)目或者是對Bootstrap進(jìn)行了有益的補(bǔ)充，或者是基于Bootstrap開發(fā)的</p>
<div class="row">
<ul style="margin-top:20px;">
<li class="col-sm-6 col-md-4 col-lg-3 thumbnail">
<a href="#">
<img src="2.png" alt="...">
<h3>優(yōu)站精選</h3>
<p>Bootstrap 網(wǎng)站實(shí)例</p>
</a>
<p>
Bootstrap 優(yōu)站精選頻道收集了眾多基于 Bootstrap 構(gòu)建、設(shè)計精美的、有創(chuàng)意的網(wǎng)站。
</p>
</li>
<li class="col-sm-6 col-md-4 col-lg-3 thumbnail">
<a href="#">
<img src="3.png" alt="...">
<h3>Webpack</h3>
<p>是前端資源模塊化管理和打包工具</p>
</a>
<p>
Webpack 是當(dāng)下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合***環(huán)境部署的前端資源。 </p>
</li>
<li class="col-sm-6 col-md-4 col-lg-3 thumbnail">
<a href="#">
<img src="4.png" alt="...">
<h3>React</h3>
<p>用于構(gòu)建用戶界面的 JavaScript 框架</p>
</a>
<p>
React 起源于 Facebook 的內(nèi)部項(xiàng)目，是一個用于構(gòu)建用戶界面的 JavaScript 庫。
</p>
</li>
<li class="col-sm-6 col-md-4 col-lg-3 thumbnail">
<a href="#">
<img src="5.png" alt="...">
<h3>TypeScript </h3>
<p>中文手冊</p>
</a>
<p>
TypeScript 是由微軟開源的編程語言。它是 JavaScript 的一個超集，而且本質(zhì)上向這個語言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊獭?nbsp; </p>
</li>
</ul>
</div>
</div>
</div>
<script src="../lib/js/jquery.js"></script>
<script src="../lib/js/bootstrap.js"></script>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
效果圖：
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號