標籤：bootstrap 網站 模板
基於上一篇文章,覺得再這樣寫下去,意義不大,決定收手。還是直接做一個簡單的基礎模板吧
主要知識點包括柵格系統、響應式圖片、導航條(固定在頂部和底部)、搜尋方塊等等
具體每個知識點不再贅述,參考Bootstrap中文網
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>indexl.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"><link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet"><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script><style type="text/css">body {padding-top: 70px;padding-bottom: 70px;}.starter-template {padding: 40px 15px;text-align: center;}.address {background: #efb73e;color: #fff;padding: 10px 0;}</style></head><body><div class="navbar navbar-default navbar-fixed-top"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed"data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">內刊IT評論</a></div><div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">首頁</a></li><li><a href="#news">新聞</a></li><li><a href="#forum">論壇</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">知識庫<span class="caret"></span> </a><ul class="dropdown-menu" role="menu"><li><a href="#">Java</a></li><li><a href="#">C++</a></li><li><a href="#">PHP</a></li><li><a href="#">JavaScript</a></li><li><a href="#">JQuery</a></li><li><a href="#">Html5</a></li></ul></li></ul><div class="navbar-right"><form class="navbar-form navbar-left" role="search"><div class="input-group"><input type="text" class="form-control" placeholder="搜尋..."><span class="input-group-btn"><button class="btn btn-default" type="button">Go</button> </span></div></form><form class="navbar-form navbar-left" ><div class="input-group"><span class="input-group-btn"><button class="btn btn-default" type="button">登入</button> </span></div></form><form class="navbar-form navbar-left"><div class="input-group"><span class="input-group-btn"><button class="btn btn-default" type="button">註冊</button> </span></div></form></div></div><!--/.nav-collapse --></div></div><div class="container"><div class="row cvheader"><div class="col-md-6"><h1 class="text-primary">IT民工</h1><p><span class="glyphicon glyphicon-paperclip"></span> 攻城獅</p></div><div class="col-md-3"><div class="row"><div class="col-md-4"><p id="contact" class="address text-center">聯絡</p></div><div class="col-md-8"><p><span class="glyphicon glyphicon-envelope"></span>[email protected]</p><p><span class="glyphicon glyphicon-user"></span> 74955800(QQ群)</p><p><span class="glyphicon glyphicon-road"></span> 京城81號</p></div></div></div><div class="col-md-3"><p><!-- 這裡定義圖片為響應式，並且添加圓角效果，以便保證圖片在不同裝置上都可以完美顯示 //--><img data-toggle="tooltip" data-placement="left" id="avatar"title="hello" class="img-responsive img-rounded"src="img/flower.jpg" alt=""></p></div></div></div><div class="container"><div class="col-md-4"><h3>孩子們看到老式電腦後的反應</h3><img data-toggle="tooltip" data-placement="left" id="avatar"title="hello" class="img-responsive img-rounded"src="img/1.jpg" alt="">老式電腦，並不是指的曆史上第一台圖靈機電腦，也不是指第一台體積有幾間屋子大小的那台ENIAC電腦，也不是第一台IBMpc機，而是蘋果公司的Apple Monitor III。</div><div class="col-md-4"><h3>IT培訓師</h3><img data-toggle="tooltip" data-placement="left" id="avatar"title="hello" class="img-responsive img-rounded"src="img/2.jpg" alt="">小魚兒（註：PilotFish，本文主角的名字）的公司聘請了一個第三方公司為他們的使用者進行Window7培訓。但結果卻發現這個公司並不能很好的勝任這種工作。</div><div class="col-md-4"><h3>客戶是這樣描述他們的需求的</h3><img data-toggle="tooltip" data-placement="left" id="avatar"title="hello" class="img-responsive img-rounded"src="img/3.jpg" alt="">技術服務工程師小魚兒（註：PilotFish，本文主角的名字）接到一個任務，需要去外地的一個客戶那裡檢查他們的電腦裝置。那裡的客戶抱怨他們的電腦螢幕會時不時的顫動。</div><div class="col-md-4"><h3>我是如何打敗拖延症的</h3><img data-toggle="tooltip" data-placement="left" id="avatar"title="hello" class="img-responsive img-rounded"src="img/4.jpg" alt="">關於拖延症的話題我在HackerNews上不斷的看到有人提出來(你也讀了，不是嗎？)，感覺有必要將我是如何跟拖延症做鬥爭的方法分享給大家。然而，我這裡說的主要是針對程式員/美工，但其實任何人都可以使用。首先最重要的….</div><div class="col-md-4"><h3>程式員如何活得明白</h3><img data-toggle="tooltip" data-placement="left" id="avatar"title="hello" class="img-responsive img-rounded"src="img/5.jpg" alt="">可事實上問題不在於此。編程，就跟寫作、繪畫、作曲一樣，首先是一種創造性的活動，而不是一個種技術工作。當然，對一種技術或程式設計語言的不斷練習和保持熟悉很重要，這其實就是在學習使用工具和技法，但它並不會讓你本質上變成一名更優秀的程式員。</div><div class="col-md-4"><h3>Bash指令碼15分鐘進階教程 </h3><img data-toggle="tooltip" data-placement="left" id="avatar"title="hello" class="img-responsive img-rounded"src="img/6.jpg" alt="">這裡的Bash指令碼技術技巧最初是來自Google的“Testing on the Toilet” (TOTT)。這裡是一個修訂和擴增版本。</div></div><div class="navbar navbar-default navbar-fixed-bottom" style="padding-top: 5px;"><div class="footer text-center"><div class="container"></br><p class="text-muted">@著作權 翻版不究</p></div></div></div></body></html>
效果預覽：
建立一 html檔案 全部拷貝上面代碼覆蓋即可。若顯示圖片,可下載全部源碼：http://download.csdn.net/detail/itmyhome/7701407
歡迎加入JAVA技術交流群：74955800
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
