溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BootStrap網(wǎng)站首頁(yè)</title>
<link rel="stylesheet" type="text/css" href="js/bootstrap.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<style type="text/css">
body{
text-align: center;
}
#nav{
margin-bottom: 0;
}
#brand{
width:100%;
height:500px;
margin-top:0;
padding-top: 0;
background-color:indigo;
}
#bts1{
padding-top:90px;
font-size:100px;
font-weight: bold;
color:#ffffff;
}
#bts2{
padding-top:15px;
font-size:30px;
font-weight: bold;
color:#ffffff;
}
#bts3{
padding-top:30px;
color:#ffffff;
}
#a1{
padding-top:10px;
width: 100%;
height:50px;
}
#item{
padding-top:90px;
font-size:40px;
color:#000000;
}
.a2{
color:#269ABC;
font-size:25px;
}
.a3{
color:#5E5E5E;
font-size:18px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top" id="nav">
<div class="container">
<div class="navber-header">
<a href="#" class="navbar-brand">Bootstrap中文網(wǎng)</a>
</div>
<ul class="nav navbar-nav">
<li><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="#">jQueryAPI</a></li>
<li><a href="#">網(wǎng)站實(shí)例<button type="button" class="btn btn-danger btn-circle btn-xs"></button></a></li>
</ul>
<div class="nav navbar-nav navbar-right">
<a href="#" class="text-info">關(guān)于</a>
</div>
</div>
</nav>
<div class="container" id="brand">
<div id="bts1">
Bootstrap
</div>
<div id="bts2">
簡(jiǎn)潔、直觀、強(qiáng)悍的前端開發(fā)框架，讓web開發(fā)更迅速、簡(jiǎn)單。
</div>
<div id="bts3">
<button type="button" class="btn btn-lg btn-primary">Bootstrap3中文文檔（v3.3.7）</button>
<br/>
<br/>
Bootstrap2中文文檔（v2.3.2）
</div>
</div>
<div class="container" id="a1">
<p class="text-muted">
<a href="#">Bootstrap問答社區(qū)</a> |
<a href="#">新浪微博:@Bootstrap中文網(wǎng)</a>
</p>
</div>
<div class="container" >
<span id="item">
BootStrap相關(guān)優(yōu)質(zhì)項(xiàng)目推薦
</span>
<br />
<p >這些項(xiàng)目或者是對(duì)Bootstrap進(jìn)行了有益補(bǔ)充,或者是基于Bootstrap開發(fā)的</p>
<hr >
</div>
<div class="container" id="tuijian">
<div class="row">
<div class="col-lg-3" >
<ul class="nav nav-stacked">
<li><a href="#"><img src="img/www_assets_img_expo.png" width="100%"/></a></li>
<li class="a2"><a href="#">優(yōu)站精選</a></li>
<li class="a3"><a href="#">Bootstrap網(wǎng)站實(shí)例</a></li>
</ul>
<p>
Bootstrap優(yōu)站精選頻道收集了眾多基于Bootstrap構(gòu)建、設(shè)計(jì)精美的、有創(chuàng)意的網(wǎng)站。
</p>
</div>
<div class="col-lg-3" >
<ul class="nav nav-stacked">
<li><a href="#"><img src="img/www_assets_img_kaikeba.jpg" width="100%"/></a></li>
<li class="a2"><a href="#">【W(wǎng)eb全棧架構(gòu)師】</a></li>
<li class="a3"><a href="#">by開課吧</a></li>
</ul>
<p>
廖雪峰最新打磨的前端進(jìn)階課程，國(guó)內(nèi)頂級(jí)的前段內(nèi)容體系，是1-3年前端開發(fā)經(jīng)驗(yàn)的程序員學(xué)習(xí)提升的必備課程。
</p>
</div>
<div class="col-lg-3" >
<ul class="nav nav-stacked">
<li><a href="#"><img src="img/www_assets_img_luffycity.png" width="100%"/></a></li>
<li class="a2"><a href="#">7天入門Python全棧</a></li>
<li class="a3"><a href="#">路飛學(xué)城贊助</a></li>
</ul>
<p>
7天Python+實(shí)戰(zhàn)訓(xùn)練,帶你輕松入門PythonWeb全棧開發(fā)。7.25前參加可免費(fèi)獲得《Python全棧開發(fā)實(shí)戰(zhàn)》
</p>
</div>
<div class="col-lg-3" >
<ul class="nav nav-stacked">
<li><a href="#"><img src="img/www_assets_img_webpack.png" width="100%"/></a></li>
<li class="a2"><a href="#">Webpack</a></li>
<li class="a3"><a href="#">前端模塊化管理和打包工具</a></li>
</ul>
<p>
Webpack是當(dāng)下最熱門的前端資源模塊化的管理和打包工具.可將許多的松散的模塊打包成符合生產(chǎn)環(huán)境部署的前端資源。
</p>
</div>
</div>
<div class="row">
<div class="col-lg-3" >
<ul class="nav nav-stacked">
<li><a href="#"><img src="img/www_assets_img_bootstrap-datetimepicker.png" width="100%"/></a></li>
<li class="a2"><a href="#">DateTimePicker</a></li>
<li class="a3"><a href="#">日期時(shí)間選擇器</a></li>
</ul>
<p>
Bootstrap 日期時(shí)間選擇器是一個(gè) Bootstrap 組件，能夠簡(jiǎn)化頁(yè)面上日期、時(shí)間的輸入。
</p>
</div>
<div class="col-lg-3" >
<ul class="nav nav-stacked">
<li><a href="#"><img src="img/www_assets_img_nodejs.png" width="100%"/></a></li>
<li class="a2"><a href="#">Node.js</a></li>
<li class="a3"><a href="#">中文文檔/手冊(cè)</a></li>
</ul>
<p>
TypeScript 是由微軟開源的編程語(yǔ)言。是 JS 的一個(gè)超集，本質(zhì)上向該語(yǔ)言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊獭? </p>
</div>
<div class="col-lg-3" >
<ul class="nav nav-stacked">
<li><a href="#"><img src="img/www_assets_img_yarn.png" width="100%"/></a></li>
<li class="a2"><a href="#">Yarn</a></li>
<li class="a3"><a href="#">中文手冊(cè)</a></li>
</ul>
<p>
Yarn 是一個(gè)快速、可靠、安全的依賴管理工具。是 NPM 的替代品。<br /><br />
</p>
</div>
<div class="col-lg-3" >
<ul class="nav nav-stacked">
<li><a href="#"><img src="img/www_assets_img_babeljs.png" width="100%"/></a></li>
<li class="a2"><a href="#">Babel</a></li>
<li class="a3"><a href="#">一個(gè)JavaScript編譯器</a></li>
</ul>
<p>
Babel 是一個(gè) JavaScript 編譯器。Babel 通過語(yǔ)法轉(zhuǎn)換器支持最新版本的 JavaScript 語(yǔ)法。
</p>
</div>
</div>
<div class="row">
<div class="col-lg-3" >
<ul class="nav nav-stacked">
<li><a href="#"><img src="img/www_assets_img_react.png" width="100%"/></a></li>
<li class="a2"><a href="#">React</a></li>
<li class="a3"><a href="#">構(gòu)建用戶界面的JS框架</a></li>
</ul>
<p>
React 起源于 Facebook 的內(nèi)部項(xiàng)目，是一個(gè)用于構(gòu)建用戶界面的 JavaScript 庫(kù)。<br /><br />
</p>
</div>
<div class="col-lg-3" >
<ul class="nav nav-stacked">
<li><a href="#"><img src="img/www_assets_img_bootstrap-docs.png" width="100%"/></a></li>
<li class="a2"><a href="#">BootStrap Docs</a></li>
<li class="a3"><a href="#">Bootstrap 文檔全集</a></li>
</ul>
<p>
收集了 Bootstrap 從 V1.0.0 版本到現(xiàn)在整個(gè)文檔的歷史。Bootstrap 是一個(gè)傳奇，這些文檔是傳奇的見證！
</p>
</div>
<div class="col-lg-3" >
<ul class="nav nav-stacked">
<li><a href="#"><img src="img/www_assets_img_bootstrap-form-builder.png" width="100%"/></a></li>
<li class="a2"><a href="#">Bootstrap Form Builder</a></li>
<li class="a3"><a href="#">在線表單構(gòu)造器</a></li>
</ul>
<p>
能夠以鼠標(biāo)拖拽的方式迅速生成一個(gè)基于 Bootstrap 的完整表單，減輕了各位碼農(nóng)手寫HTML代碼的勞動(dòng)。
</p>
</div>
<div class="col-lg-3" >
<ul class="nav nav-stacked">
<li><a href="#"><img src="img/www_assets_img_bootstrap-wysiwyg.png" width="100%"/></a></li>
<li class="a2"><a href="#">bootstrap-wysiwyg</a></li>
<li class="a3"><a href="#">為bootstrap定制可視編輯器</a></li>
</ul>
<p>
bootstrap-wysiwyg 是一個(gè) jQuery Bootstrap 插件可以將任何一個(gè) div 轉(zhuǎn)變成一個(gè) WYSIWYG 富文本編輯器。
</p>
</div>
</div>
<div class="row">
<div class="col-lg-3" >
<ul class="nav nav-stacked">
<li><a href="#"><img src="img/www_assets_img_buttons.png" width="100%"/></a></li>
<li class="a2"><a href="#">Buttons</a></li>
<li class="a3"><a href="#">CSS按鈕樣式庫(kù)</a></li>
</ul>
<p>
基于 Sass 和 Compass 構(gòu)建的CSS按鈕樣式庫(kù)，圖標(biāo)采用的是Font Awesome，可和 Bootstrap 融合使用。
</p>
</div>
<div class="col-lg-3" >
<ul class="nav nav-stacked">
<li><a href="#"><img src="img/www_assets_img_flat-ui.png" width="100%"/></a></li>
<li class="a2"><a href="#">Flat UI</a></li>
<li class="a3"><a href="#">Metro風(fēng)格的Bootstrap</a></li>
</ul>
<p>
基于 Bootstrap 做的 Metro 化改造，F(xiàn)lat UI包含了很多Bootstrap提供的組件，但是外觀更加漂亮。在此強(qiáng)烈推薦！
</p>
</div>
<div class="col-lg-3" >
<ul class="nav nav-stacked">
<li><a href="#"><img src="img/www_assets_img_chartjs.png" width="100%"/></a></li>
<li class="a2"><a href="#">Chart.js</a></li>
<li class="a3"><a href="#">開源的HTML5圖表工具</a></li>
</ul>
<p>
Chart.js 是為設(shè)計(jì)和開發(fā)人員準(zhǔn)備的簡(jiǎn)單、靈活的 JavaScript 圖表工具。<br /><br />
</p>
</div>
<div class="col-lg-3" >
<ul class="nav nav-stacked">
<li><a href="#"><img src="img/www_assets_img_gulpjs.png" width="100%"/></a></li>
<li class="a2"><a href="#">gulp.js</a></li>
<li class="a3"><a href="#">基于流的自動(dòng)化構(gòu)建工具</a></li>
</ul>
<p>
gulp.js - 基于流(stream)的自動(dòng)化構(gòu)建工具。Grunt 采用配置文件的方式執(zhí)行任務(wù)，而 Gulp 一切都通過代碼實(shí)現(xiàn)。
</p>
</div>
</div>
</div>
<hr >
<div class="container" >
<div class="row">
<div class="col-lg-6" >
<img src="img/www_assets_img_logo.png"/><br/>
<p >我們一直致力于為廣大開發(fā)者提供更多的優(yōu)質(zhì)技術(shù)文檔和輔助開發(fā)工具!</p>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-3">
關(guān)于
<ul class="nav nav-stacked">
<li><a href="#">關(guān)于我們</a></li>
<li><a href="#">廣告合作</a></li>
<li><a href="#">友情鏈接</a></li>
<li><a href="#">招聘</a></li>
</ul>
</div>
<div class="col-lg-3">
聯(lián)系方式
<ul class="nav nav-stacked">
<li><a href="#">新浪微博</a></li>
<li><a href="#">電子郵件</a></li>
</ul>
</div>
<div class="col-lg-3">
旗下網(wǎng)站
<ul class="nav nav-stacked">
<li><a href="#">Laravel中文網(wǎng)</a></li>
<li><a href="#">Ghost中國(guó)</a></li>
<li><a href="#">BootCDN</a></li>
<li><a href="#">Packagist中國(guó)鏡像</a></li>
<li><a href="#">燃騰教育</a></li>
</ul>
</div>
<div class="col-lg-3">
贊助商
<ul class="nav nav-stacked nav-">
<li><a href="#">京東云</a></li>
<li><a href="#">又拍云</a></li>
</ul>
</div>
</div>
</div>
</div>
<hr>
</div>
</body>
</html>
效果截圖:
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼