用Bootstrap知識寫簡易版Bootstrap官方網站首頁
阿新 • • 發佈：2018-07-19
鏈接 最新版 padding 廣告 語法 types 通過 fff art
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BootStrap網站首頁</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中文網</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="#">網站實例<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">關於</a>
</div>
</div>
</nav>
<div class="container" id="brand">
<div id="bts1">
Bootstrap
</div>
<div id="bts2">
簡潔、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。
</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問答社區</a> |
<a href="#">新浪微博:@Bootstrap中文網</a>
</p>
</div>
<div class="container" >
<span id="item">
BootStrap相關優質項目推薦
</span>
<br />
<p style="font-size:15px">這些項目或者是對Bootstrap進行了有益補充,或者是基於Bootstrap開發的</p>
<hr style="width:60%">
</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="#">優站精選</a></li>
<li class="a3"><a href="#">Bootstrap網站實例</a></li>
</ul>
<p>
Bootstrap優站精選頻道收集了眾多基於Bootstrap構建、設計精美的、有創意的網站。
</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="#">【Web全棧架構師】</a></li>
<li class="a3"><a href="#">by開課吧</a></li>
</ul>
<p>
廖雪峰最新打磨的前端進階課程，國內頂級的前段內容體系，是1-3年前端開發經驗的程序員學習提升的必備課程。
</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="#">路飛學城贊助</a></li>
</ul>
<p>
7天Python+實戰訓練,帶你輕松入門PythonWeb全棧開發。7.25前參加可免費獲得《Python全棧開發實戰》
</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是當下最熱門的前端資源模塊化的管理和打包工具.可將許多的松散的模塊打包成符合生產環境部署的前端資源。
</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="#">日期時間選擇器</a></li>
</ul>
<p>
Bootstrap 日期時間選擇器是一個 Bootstrap 組件，能夠簡化頁面上日期、時間的輸入。
</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="#">中文文檔/手冊</a></li>
</ul>
<p>
TypeScript 是由微軟開源的編程語言。是 JS 的一個超集，本質上向該語言添加了可選的靜態類型和基於類的面向對象編程。
</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="#">中文手冊</a></li>
</ul>
<p>
Yarn 是一個快速、可靠、安全的依賴管理工具。是 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="#">一個JavaScript編譯器</a></li>
</ul>
<p>
Babel 是一個 JavaScript 編譯器。Babel 通過語法轉換器支持最新版本的 JavaScript 語法。
</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="#">構建用戶界面的JS框架</a></li>
</ul>
<p>
React 起源於 Facebook 的內部項目，是一個用於構建用戶界面的 JavaScript 庫。<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 版本到現在整個文檔的歷史。Bootstrap 是一個傳奇，這些文檔是傳奇的見證！
</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="#">在線表單構造器</a></li>
</ul>
<p>
能夠以鼠標拖拽的方式迅速生成一個基於 Bootstrap 的完整表單，減輕了各位碼農手寫HTML代碼的勞動。
</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 是一個 jQuery Bootstrap 插件可以將任何一個 div 轉變成一個 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按鈕樣式庫</a></li>
</ul>
<p>
基於 Sass 和 Compass 構建的CSS按鈕樣式庫，圖標采用的是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風格的Bootstrap</a></li>
</ul>
<p>
基於 Bootstrap 做的 Metro 化改造，Flat UI包含了很多Bootstrap提供的組件，但是外觀更加漂亮。在此強烈推薦！
</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 是為設計和開發人員準備的簡單、靈活的 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="#">基於流的自動化構建工具</a></li>
</ul>
<p>
gulp.js - 基於流(stream)的自動化構建工具。Grunt 采用配置文件的方式執行任務，而 Gulp 一切都通過代碼實現。
</p>
</div>
</div>
</div>
<hr style="margin-top: 70px">
<div class="container" style="text-align: left;margin-top:35px ">
<div class="row">
<div class="col-lg-6" >
<img src="img/www_assets_img_logo.png"/><br/>
<p style="margin-top:20px">我們一直致力於為廣大開發者提供更多的優質技術文檔和輔助開發工具!</p>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-3">
關於
<ul class="nav nav-stacked">
<li><a href="#">關於我們</a></li>
<li><a href="#">廣告合作</a></li>
<li><a href="#">友情鏈接</a></li>
<li><a href="#">招聘</a></li>
</ul>
</div>
<div class="col-lg-3">
聯系方式
<ul class="nav nav-stacked">
<li><a href="#">新浪微博</a></li>
<li><a href="#">電子郵件</a></li>
</ul>
</div>
<div class="col-lg-3">
旗下網站
<ul class="nav nav-stacked">
<li><a href="#">Laravel中文網</a></li>
<li><a href="#">Ghost中國</a></li>
<li><a href="#">BootCDN</a></li>
<li><a href="#">Packagist中國鏡像</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>
效果截圖:
用Bootstrap知識寫簡易版Bootstrap官方網站首頁