利用Bootstrap快速搭建我的響應式主頁（附演示+源碼）
1.前言javascript
咱們每一個程序員都渴望搭建本身的技術博客平臺與他人進行交流分享,但使用別人的博客模板沒有創意。作網站後臺的開發人員可能瞭解前端，但是本身寫一個不錯的前端仍是很費事的。幸虧咱們有Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。我之後端程序員的角度講一下前端設計（好彆扭），網站的顏色搭配不那麼理想。你能夠本身改css樣式，達到本身的目的。css
下面是我本身用Bootstrap搭建的首頁地址：共享gis：http://test.sharegis.cn/訪問一下吧（手機電腦都試一下，體會一下響應式頁面:-D，只作了首頁）。html
廢話很少說，開始講解：前端
2.實現java
（1）基本模板搭建 參考Bootstrap中文網 http://v3.bootcss.com/getting-started/，起步—>基本模板jquery
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <!--不支持老版本IE--> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <!--device-width自適應移動端寬度，initial-scale=1不進行縮放--> 8 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ --> 10 <title>Bootstrap 101 Template</title> 11 <!-- Bootstrap 核心樣式文件 --> 12 <link href="CSS/bootstrap.min.css" rel="stylesheet"> 13 </head> 14 <body> 15 <h1>你好，世界！</h1> 16 <!-- jQuery CDN加速 --> 17 <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> 18 <!---bootstrap的核心JS文件必須放在jQuery文件以後，由於bootstrap基於jQuery --> 19 <script src="js/bootstrap.min.js"></script> 20 </body> 21 </html>
（2）導航條 參考Bootstrap中文網 http://v3.bootcss.com/components/#navbar，組件—>導航條程序員
1 <!-----------------------------------------導航條設計開始---------------------------------> 2 <!--黑色導航條樣式爲navbar-inverse，白色樣式爲default ， .navbar-fixed-top導航條固定在頂端--> 3 <nav class="navbar navbar-inverse navbar-fixed-top"> 4 <div class="container-fluid"> 5 <!-- Brand and toggle get grouped for better mobile display --> 6 <div class="navbar-header"> 7 <!------button爲實現響應式佈局，若是在手機上查看，點擊button就能夠彈出菜單----> 8 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 9 <span class="sr-only">Toggle navigation</span> 10 <span class="icon-bar"></span> 11 <span class="icon-bar"></span> 12 <span class="icon-bar"></span> 13 </button> 14 <a class="navbar-brand" href="#">ShareGIS</a><!---方log的地方--> 15 </div> 16 17 <!-- 當瀏覽器小於某個值時，點擊button圖標顯示導航條的內容（注意這裏的id與button 的id對應）—> 18 19 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 20 <!--具體菜單項--> 21 <ul class="nav navbar-nav"> 22 <li class="active"><a href="#">首頁 <span class="sr-only">(current)</span></a></li><!--普通菜單--> 23 <li class="dropdown"><!--下拉菜單--> 24 <a class="dropdown-toggle" href="#" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 25 技術博客 26 <span class="caret"></span> 27 </a> 28 <ul class="dropdown-menu dropdowncolor" aria-labelledby="dropdownMenu1"> 29 <li><a href="#">GIS</a></li><!--下拉菜單項--> 30 <li><a href="#">.NET基礎</a></li> 31 <li><a href="#">Asp .NET MVC</a></li> 32 <li><a href="#">前端</a></li> 33 </ul> 34 </li> 35 <li><a href="#">個人生活</a></li> 36 <li><a href="#">教程</a></li> 37 <li><a href="#">電腦小知識</a></li> 38 <li><a href="#">留言板</a></li> 39 <li><a href="#">關於我</a></li> 40 </ul> 41 <!--搜索表單--> 42 <form class="navbar-form navbar-left" role="search"> 43 <div class="form-group"> 44 <input type="text" class="form-control" placeholder="Search"> 45 </div> 46 <button type="submit" class="btn navbar-btn">搜索</button> 47 </form> 48 <!--導航欄右部，通常的登陸 註冊--> 49 <ul class="nav navbar-nav navbar-right"> 50 <li><a href="#">登陸</a></li> 51 <li><a href="#">註冊</a></li> 52 </ul> 53 </div><!-- /.navbar-collapse --> 54 </div><!-- /.container-fluid --> 55 </nav> 56 <!------------------------------------------導航條結束-------------------------------->
全景圖片：web
響應式圖片：數據庫
（3）輪播 參考Bootstrap中文網 http://v3.bootcss.com/css/#grid Javascript插件—>Carousel編程
1 <!--------------------------------------------------輪播開始--------------------------------------------> 2 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 3 <!-- ol指示器 ol標籤與ul標籤不一樣 ol爲是有序列表 ul爲是無序列表 --> 4 <ol class="carousel-indicators"> 5 <!-- 指示器 --> 6 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 7 <li data-target="#carousel-example-generic" data-slide-to="1"></li> 8 <li data-target="#carousel-example-generic" data-slide-to="2"></li> 9 <li data-target="#carousel-example-generic" data-slide-to="3"></li> 10 </ol> 11 12 <!-- 包裝的輪播圖片--> 13 <div class="carousel-inner" role="listbox"> 14 <!--圖片--> 15 <div class="item active"> 16 <img src="/Images/1.jpg" alt="風景1"> 17 <div class="carousel-caption"> 18 <!--h4中的內容顯示到圖片上面，--> 19 <h4>真正的才智是剛毅的志向。 —— 拿破崙</h4> 20 </div> 21 </div> 22 <div class="item"> 23 <img src="/Images/2.jpg" alt="風景2"> 24 <div class="carousel-caption"> 25 <h4>志向不過是記憶的奴隸，生氣勃勃地降生，但卻很難成長。 —— 莎士比亞</h4> 26 </div> 27 </div> 28 <div class="item"> 29 <img src="/Images/3.jpg" alt="風景3"> 30 <div class="carousel-caption"> 31 <h4>志向和熱愛是偉大行爲的雙翼。 —— 歌德</h4> 32 </div> 33 </div> 34 <div class="item"> 35 <img src="/Images/4.jpg" alt="風景4"> 36 <div class="carousel-caption"> 37 <h4>生活有度，人生添壽。 —— 書摘</h4> 38 </div> 39 </div> 40 </div> 41 42 <!-- Controls --> 43 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 44 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 45 <span class="sr-only">Previous</span> 46 </a> 47 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 48 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 49 <span class="sr-only">Next</span> 50 </a> 51 </div> 52 <!--------------------------------------------------輪播結束-------------------------------------------->
全景圖
（4）內容佈局
a.柵格系統 參考Bootstrap中文網 http://v3.bootcss.com/css/#grid全局CSS樣式—>柵格系統
Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。它包含了易於使用的預約義類，還有強大的mixin 用於生成更具語義的佈局。
柵格系統的具體簡介請參考幫助，這裏我把個人理解說一下：Bootstrap把頁面等分爲12列，你能夠將你的內容放入任意行中；好比能夠（4：4：4）也能夠（4：：3：2）總之相加不要超過12，當屏幕變小後原來一行4：4：4；變爲了三行，每行佔滿屏幕，例如：全景圖
響應式圖
下面咱們利用柵格系統搭建佈局頁面（對圖片中的三維模型設計感興趣的，能夠參考個人博客開拓思惟，如何用編程思想進行三維建模（1））
1 <!---------主體------------------> 2 <div class="container"> 3 <!--聲明行--> 4 <div class="row"> 5 <!--爲3的柵格系統，相對於一行放四個--> 6 <div class="col-sm-3"> 7 <!--img-thumbnail 方形加外邊框--> 8 <img src="/Images/八鏡臺.jpg" class="img-thumbnail" alt="八鏡臺"/> 9 <h3>八鏡臺</h3> 10 <p>八境臺坐落在江西省贛州市北八境公園內，章江和貢江在這裏匯合，爲省級重點風景名勝區。</p> 11 <p><a href="#" class="btn btn-success" role="button">詳細</a></p> 12 </div> 13 <div class="col-sm-3"> 14 <img src="/Images/標建2.jpg" class="img-thumbnail" alt="標建" /> 15 <h3>商場</h3> 16 <p>贛州第一條真正意義上的步行街。餐飲，購物都挺多商戶的。惋惜沒有什麼大的品牌進駐，購物羣體也可能是學生什麼的.</p> 17 <p><a href="#" class="btn btn-success" role="button">詳細</a></p> 18 </div> 19 <div class="col-sm-3"> 20 <img src="/Images/標建4.jpg" class="img-thumbnail" alt="標建2"/> 21 <h3>仿古建築</h3> 22 <p>如佛所謂「贛州文清路，模特滿大街，豪車如流水，摩人擠掉鞋」。正是今天贛州文清路極盡繁華的真實寫照。</p> 23 <p><a href="#" class="btn btn-success" role="button">詳細</a></p> 24 </div> 25 <div class="col-sm-3"> 26 <img src="/Images/城牆2.jpg" class="img-thumbnail" alt="標建2"/> 27 <h3>古城牆</h3> 28 <p>贛州古城牆，始建於漢代，距今已有二千年的歷史，後來通過南宋、元、明、清、民國，歷時900多年的不斷修繕、加固</p> 29 <p><a href="#" class="btn btn-success" role="button">詳細</a></p> 30 </div> 31 </div> 32 <div class="row"> 33 <div class="col-sm-3"> 34 <!--img-cricle 圓形圖框--> 35 <img src="/Images/鬱孤臺.jpg" class="img-circle" alt="八鏡臺"/> 36 <h3>鬱孤臺</h3> 37 <p>鬱孤臺位於贛州城區西北部賀蘭山頂，海拔131米，是城區的制高點，贛州宋代古城牆自臺下逶迤而過，市級文物保護單位</p> 38 <p><a href="#" class="btn btn-success" role="button">詳細</a></p> 39 </div> 40 <div class="col-sm-3"> 41 <img src="/Images/高層2.jpg" class="img-circle" alt="標建" /> 42 <h3>高層建築</h3> 43 <p>高層建築，建築高度大於27米的住宅和建築高度大於24m的非單層廠房、倉庫和其餘民用建築。</p> 44 <p><a href="#" class="btn btn-success" role="button">詳細</a></p> 45 </div> 46 <div class="col-sm-3"> 47 <img src="/Images/公園.jpg" class="img-circle" alt="標建2"/> 48 <h3>贛州公園</h3> 49 <p>贛州公園是贛州城區最先的一個綜合性公園，總面積2.97公頃。公園位於贛州市老城區文清路64號。</p> 50 <p><a href="#" class="btn btn-success" role="button">詳細</a></p> 51 </div> 52 <div class="col-sm-3"> 53 <img src="/Images/蔣經國故居.jpg" class="img-circle" alt="標建2"/> 54 <h3>蔣經國故居</h3> 55 <p>現保存較好的主要是在章江古城牆處，故居是1940年蔣經國主持興建的仿俄式磚木結構建築，面積爲170多平方米。</p> 56 <p><a href="#" class="btn btn-success" role="button">詳細</a></p> 57 </div> 58 </div> 59 </div>
（5）標籤頁 參考Bootstrap中文網 http://v3.bootcss.com/css/#grid Javascript插件—>標籤頁
1 <!-------------------------標籤頁開始-----------------------------> 2 <div> 3 <div class="row"> 4 <h2>技術分類</h2> 5 </div> 6 <!-- Nav tabs頁籤 --> 7 <ul class="nav nav-tabs" role="tablist"> 8 <!--注意這裏的#home與下面的div role="tabpanel" class="tab-pane active" id="home" 的id對應實現頁籤--> 9 <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">GIS基礎</a></li> 10 <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">.NET基礎</a></li> 11 <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Asp.net MVC</a></li> 12 <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Web GIS</a></li> 13 </ul> 14 15 <!-- Tab panes --> 16 <div class="tab-content"> 17 <!--active當前選中項--> 18 <div role="tabpanel" class="tab-pane active" id="home"> 19 <div class="row"> 20 <div class="col-sm-8"> 21 <h3>GIS基礎介紹</h3> 22 <p style="font-size:14px">地理信息系統（Geographic Information System或 Geo－Information system，GIS）有時又稱爲「地學信息系統」。它是一種特定的十分重要的空間信息系統。它是在計算機硬、軟件系統支持下， 23 對整個或部分地球表層（包括大氣層）空間中的有關地理分佈數據進行採集、儲存、管理、運算、分析、顯示和描述的技術系統。</p> 24 <p>位置與地理信息既是LBS的核心，也是LBS的基礎。一個單純的經緯度座標只有置於特定的地理信息中，表明爲某個地點、標誌、方位後，纔會被用戶認識和理解。用戶在經過相關技 25 術獲取到位置信息以後，還須要瞭解所處的地理環境，查詢和分析環境信息，從而爲用戶活動提供信息支持與服務。</p> 26 <p><a href="#" class="btn btn-success" role="button">詳細瞭解</a></p> 27 </div> 28 <div class="col-sm-4"> 29 <img src="/Images/gis.jpg" class="img-thumbnail" alt="GIS基礎"/> 30 </div> 31 </div> 32 </div> 33 <div role="tabpanel" class="tab-pane" id="profile"> 34 <div class="row"> 35 <div class="col-sm-8"> 36 <h3>.Net基礎介紹</h3> 37 <p style="font-size:14px">.NET是 Microsoft XML Web services 平臺。XML Web services 容許應用程序經過 Internet 進行通信和共享數據，而無論所採用的是哪一種操做 38 系統、設備或編程語言。Microsoft .NET 平臺提供建立 XML Web services 並將這些服務集成在一塊兒之所需。對我的用戶的好處是無縫的、吸引人的體驗。</p> 39 <p><a href="#" class="btn btn-success" role="button">詳細瞭解</a></p> 40 </div> 41 <div class="col-sm-4"> 42 <img src="/Images/.Net.jpg" class="img-thumbnail" alt=".net"/> 43 </div> 44 </div> 45 </div> 46 <div role="tabpanel" class="tab-pane" id="messages"> 47 <div class="row"> 48 <div class="col-sm-8"> 49 <h3>Asp .net MVC介紹</h3> 50 <p style="font-size:14px">ASP.NET MVC 4已經正式發佈，並內置於Visual Studio 2012， 51 新版本ASP.NET MVC版本新增了手機模版、單頁應用程序，Web API等模版，更新了一些 javascript 庫，其中示例頁面也使用了jquery的AJAX登陸， 52 並增長了OAuth認證/Entity Framework5的支持。同時也加強了對HTML五、AsyncController等的支持。</p> 53 <p><a href="#" class="btn btn-success" role="button">詳細瞭解</a></p> 54 </div> 55 <div class="col-sm-4"> 56 <img src="/Images/MVC.jpg" class="img-thumbnail" alt="MVC"/> 57 </div> 58 </div> 59 </div> 60 <div role="tabpanel" class="tab-pane" id="settings"> 61 <div class="row"> 62 <div class="col-sm-8"> 63 <h3>Web GIS基礎介紹</h3> 64 <p style="font-size:14px">Web GIS是Internet技術應用於GIS開發的產物，是現代GIS技術的重要組成部分。常見的Web GIS開發軟件有超擎圖形。 65 是一個交互式的、分佈式的、動態的地理信息系統，是由多個主機、多個數據庫的無線終端，並由客戶機與服務器（HTTP服務器及應用服務器）相連所組成的。 66 GIS經過WWW功能得以擴展，真正成爲一種大衆使用的工具。 67 從WWW的任意一個節點，Internet用戶能夠瀏覽WebGIS站點中的空間數據、製做專題圖，以及進行各類空間檢索和空間分析，從而使GIS進入千家萬戶。</p> 68 <p><a href="#" class="btn btn-success" role="button">詳細瞭解</a></p> 69 </div> 70 <div class="col-sm-4"> 71 <img src="/Images/webgis.jpg" class="img-thumbnail" alt="GIS基礎"/> 72 </div> 73 </div> 74 </div> 75 </div> 76 77 </div> 78 <!-------------------------標籤頁結束----------------------------->
(6)版權信息
1 <div id="copyright"> 2 <p style="margin-top:10px">2016@共享gis All Rights Reserved. </p> 3 <p> 工信部備案號： 晉ICP備16002450號-1 </p> 4 <p> 聯繫方式：qq:1300776935 郵箱：hhy@sharegis.cn </p> 5 </div>
3展望
今天只是作了我的網站的響應式主頁，後面我會用Asp .net MVC+Bootstrap等搭建一個本身的技術分享網站。我會把我網站的搭建過程以博客的形式記錄，源碼與你們共享。歡迎你們關注我，一同進步…………
本次源碼地址：Share GIS
相關文章
- 1. bootstrap響應式網頁
- 2. 使用Bootstrap設計響應式頁面
- 3. 如何快速搭建我的博客，內附源碼（springBoot+mybatis-plus）
- 4. rancher快速部署應用演示
- 5. 利用Hexo搭建Github的我的主頁
- 6. 用Tale快速搭建我的博客
- 7. 如何利用github page快速搭建我的博客
- 8. 利用 GitHub Pages 快速搭建我的博客
- 9. bootstrap響應式前端頁面
- 10. Bootstrap頁面響應式設計
- 更多相關文章...
- • SQL 快速參考 - SQL 教程
- • Eclipse 快速修復 - Eclipse 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
