收藏
批改狀態(tài)：合格
老師批語：
以下代碼是仿造的代碼：
<!doctype html>
<html>
<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/dist/css/bootstrap.css">
<title>Document</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top ">
<div>
<!-- Brand and toggle get grouped for better mobile display -->
<div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true">
<span>Toggle navigation</span>
<span></span>
<span></span>
<span></span>
</button>
<a class="navbar-brand hidden-sm" href="#">Bootstrap中文網(wǎng)</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="hidden-sm hidden-md"><a href="#">Bootstrap2中文文檔 </a></li>
<li><a href="#">Bootstrap3中文文檔</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)站實例</a></li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-sm">
<li><a href="">關(guān)于</a></li>
</ul>
</div>
</div>
</div>
<div>
<div>
<div style="padding: 0">
<div class="jumbotron masthead" style="background-color: #361942FF;border-radius: 0; height: 500px;margin-bottom: 0 ">
<div>
<br><br><br>
<h1 style="font-size: 100px;color:white;font-weight: bolder">Bootstrap</h1>
<h2 style="font-size: 30px;color:white;">簡潔、直觀、強悍的前端開發(fā)框架，讓web開發(fā)更迅速、簡單。</h2>
<br>
<p>
<button type="button" class="btn btn-primary btn-lg btn-shadow center-block">Bootstrap3中文文檔(v3.3.7)</button>
</p>
<p class="masthead-links text-center">
<a href="" style="font-size: 14px;color:lightgrey;">Bootstrap2中文文檔(v2.3.2)</a>
</p>
</div>
</div>
<div style="width: 100%; background-color: rgb(245,245,245);line-height: 50px;padding: aotu;box-shadow: 0.8px 0.8px 0.8px lightgrey">
<a href="" style="color: rgb(85,85,85);"><i class="glyphicon glyphicon-cloud"></i> Bootstrap問答社區(qū)</a> |
<a href="" style="color:rgb(85,85,85);"><i class="glyphicon glyphicon-leaf"></i> 新浪微博：@Bootstrap中文網(wǎng)</a>
</div>
<br><br>
<div class="container projects">
<div class="projects-header page-header text-center">
<h1>Bootstrap相關(guān)優(yōu)質(zhì)項目推薦</h1>
<p>這些項目或者是對Bootstrap進行了有益的補充，或者是基于Bootstrap開發(fā)的</p>
</div>
<br><br>
<div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div>
<a href=""><img src="./images/1.png"></a>
<div class="caption text-center">
<h3><a href="" style="text-decoration-line: none;">優(yōu)站精選<br><small> Bootstrap 網(wǎng)站實例</small></a></h3>
<p>Bootstrap 優(yōu)站精選頻道收集了眾多基于 Bootstrap 構(gòu)建、設(shè)計精美的、有創(chuàng)意的網(wǎng)站。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div>
<a href=""><img src="./images/2.png"></a>
<div class="caption text-center">
<h3><a href="" style="text-decoration-line: none;">Webpack<br><small>是前端資源模塊化管理和打包工具</small></a></h3>
<p>Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合***環(huán)境部署的前端資源。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div>
<a href=""><img src="./images/3.png"></a>
<div class="caption text-center">
<h3><a href="" style="text-decoration-line: none;">React<br><small>用于構(gòu)建用戶界面的 JavaScript 框架</small></a></h3>
<p>React 起源于 Facebook 的內(nèi)部項目，是一個用于構(gòu)建用戶界面的 JavaScript 庫。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div>
<a href=""><img src="./images/4.png"></a>
<div class="caption text-center">
<h3><a href="" style="text-decoration-line: none;">TypeScript <br><small>中文手冊</small></a></h3>
<p>TypeScript 是由微軟開源的編程語言。它是 JavaScript 的一個超集，而且本質(zhì)上向這個語言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊獭?lt;/p>
</div>
</div>
</div>
</div>
<div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div>
<a href=""><img src="./images/5.png"></a>
<div class="caption text-center">
<h3><a href="" style="text-decoration-line: none;">jQuery API <br><small>中文手冊</small></a></h3>
<p>根據(jù)最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div>
<a href=""><img src="./images/6.png"></a>
<div class="caption text-center">
<h3><a href="" style="text-decoration-line: none;">w3schools<br><small>原版國內(nèi)鏡像</small></a></h3>
<p>w3schools.com 是最受歡迎的前端技術(shù)教程網(wǎng)站，但是國內(nèi)用戶一直不能訪問，并且國內(nèi)的中文翻譯版本十分陳舊。因此做了個鏡像，希望英文好的同學直接去看原版教程吧！</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div>
<a href=""><img src="./images/7.png"></a>
<div class="caption text-center">
<h3><a href="" style="text-decoration-line: none;">Preact<br><small>React 輕量替代方案。</small></a></h3>
<p>Preact - 一個只有 3kB 大小的 React 替代品，擁有與 React 相同的 API、組件和虛擬 DOM。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div>
<a href=""><img src="./images/8.png"></a>
<div class="caption text-center">
<h3><a href="" style="text-decoration-line: none;">Node.js<br><small>中文文檔 / 手冊</small></a></h3>
<p>Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環(huán)境。Node.js 使用了一個事件驅(qū)動、非阻塞式 I/O 的模型，使其輕量又高效。</p>
</div>
</div>
</div>
</div>
</div>
</div>
<style type="text/css">
.thumbnail {
min-height: 350px;">
}
</style>
<script src="../lib/jquery.js"></script>
<script src="../lib/dist/js/bootstrap.js"></script>
</body>
</html>說明：以上的案例主要是對bootstrap更深一步的理解，但是還是使用了很多css樣式來控制頁面布局，其中我認為難點在于如何把每行的縮略圖的高度統(tǒng)一顯示，最后我是通過給他們設(shè)置統(tǒng)一的css樣式高度來達到控制的效果，實際它和官網(wǎng)上所展示的效果是一樣的。
總結(jié)：使用bootstrap后，頁面不僅變得更加的簡潔美觀、而且效率也是提高了很多，是前端開中必不可少的一項技術(shù)，我覺得其中最重要的對各種類的設(shè)置，，今天所使用到的導航條只需給div設(shè)置類樣式class="navbar navbar-inverse navbar-fixed-top"就好了，其中navbar-inverse代表反色，就是導航條把顏色變成黑色；巨幕是需要把類樣式設(shè)置為class="jumbotron masthead"；而縮略圖則需要把類樣式設(shè)置為class="thumbnail"即可實現(xiàn)。
微信掃碼
關(guān)注PHP中文網(wǎng)服務號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號