记录-Bootstrap编写个人网站主页
生活随笔
收集整理的這篇文章主要介紹了
记录-Bootstrap编写个人网站主页
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這次做的是個人簡介的一個網站，但只是一個靜態的HTML頁面。使用到的框架是bootstrap，歷時一天半。
一、效果預覽
二、代碼解析
<!DOCTYPE html> <html> <head><title>changtutu個人網站開發</title><link rel="stylesheet" href="bs/css/bootstrap.min.css"><script src="bs/js/jquery-3.2.1.min.js"></script><script src="bs/js/bootstrap.min.js"></script> </head>src=”bs/js/jquery-3.2.1.min.js”和src=”bs/js/bootstrap.min.js
分別引入了jquery框架和bootstrap框架（網上搜得到）。
下載bootstrap框架官方網站：http://v3.bootcss.com/css/
整體的body容器為container容器，container 類用于固定寬度并支持響應式布局的容器。所謂響應式，即頁面會隨著顯示屏幕尺寸的縮放，進行相應的調整。
<nav class="navbar navbar-inverse"><div class="container"><div class="navbar-header"><div class="navbar-brand">ChangTutu個人網站</div><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#divNav"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div>navbar為導航條屬性，表示在頁面最上方添加一個導航條，即圖中黑色部分。
navbar-inverse：表示為黑色導航條。
navbar-brand：其中一個屬性，可以在導航條上面添加文字等（上圖導航條中的Changtutu個人網站）
navbar的解析參考博客：http://blog.csdn.net/mafan121/article/details/47836453
摘要：1、navbar-header。該類是導航欄文字看起來小一點，而且是在小屏幕上唯一能顯示的內容
2、navbar-toggle。botton按鈕定義3根橫杠的東西。其樣式class=“navbar-toggle”是必不可少的。
3、data-toggle=“collapse”表明這個button是一個折疊控件，其折疊的內容指向data-target=”#divNav”，即是id為divNav的內容。
上述div的id為divNav，即上一個代碼片段中button所指向的那個div。1、class=”collapse navbar-collapse”：其中的nvabar-collapse是導航欄的折疊樣式，collapse這是表示初始時是折疊的，若沒有collapse樣式，那么縮放后導航欄元素將是展開的。
2、data-toggle=”modal” data-target=”#divModal”：彈出id為divModal的模態框。
上述片段描述了一個模態框的樣式。
class=”modal fade”：表示模態框淡入效果。
data-backdrop=”true”：點擊瀏覽器頁面模態框會關閉
data-keyboard=”false”：點擊esc鍵模態框不會關閉
data-dismiss=”modal”：點擊該地方模態框也會關閉
class=”modal-title”>Print Resume、class=”modal-body”>
Print Preview Or Print Config、class=”modal-footer”>：分別表示模態框的頭身腳三部分
data-toggle=”tooltip”
data-placement=”bottom”
(function?()?{(‘[data-toggle=”tooltip”]’).tooltip();
})：表示在Download按鈕下方顯示一小行的提示信息
class=”row”：柵格系統
關于柵格系統見博客：http://www.cnblogs.com/JerryTao/p/5476027.html
簡單理解的柵格系統，即使把該div分為十二個小格，開發者可以指定某一個控件在里面所占的格數。
class=”col-sm-3”：表示該div占據3格的柵格系統
class=”panel panel-default”
class=”panel-heading”>Personal Info：在3格div中創建一個面板，樣式為default，heading為標題
calss=”panel-body”
<img src="resource/xy.jpg" class="img-responsive img-rounded img-thumbnail" alt="Me">
該img組件打開一個路徑為“resource/xy.jpg”的圖片，img-responsive可以讓圖片對響應式布局更好的響應，本質是為圖片賦予了max-width: 100%;和height: auto;屬性，可以讓圖片按比例縮放，不超過其父元素的尺寸。img-rounded：可以添加 border-radius:6px屬性在其后面獲得圓角圖片。如：.img-rounded{border-radius:6px;}。img-thumbnail：讓圖片顯示時候縮小一點，即添加了圖片的內邊距。
參考博客：http://blog.csdn.net/u012897547/article/details/16948723
glyphicon 即添加一個圖標。
圖標官網：http://v3.bootcss.com/components/#thumbnails
第二個面板，顯示個人技能的進度條。progress表示該div是進度條， progress-bar-striped表示進度條為斜體，active為動態進度條。style=”width:60%”即進度為60%。
<div class="panel panel-primary"> <div class="panel-heading">Contact Me</div><div calss="panel-body"><form class="form-horizontal"><div class="form-group"><label for="email" class="col-sm-2 control-label">Email</label><div class="col-sm-10"><input type="email" id="email" class="form-control" placeholder="Email">這一段為第三個面板，放置了聯系信息，可以讓訪問者聯系到網站作者。
<div class="col-sm-9"> <div class="jumbotron"><p >Personal Details</p> </div> <div class="panel-group" id="accordion"><div class="panel panel-default"><div class="panel-heading"><div class="panel-title"><a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">Work Experence</a></div></div> <div id="collapseOne" class="panel-collapse collapse"><div class="panel-body"><ul class="list-group"><li class="list-group-item list-group-item-success"><div class="row"><div class="col-sm-4">2014年 - 至今</div><div class="col-sm-4">xxx 學校</div><div class="col-sm-4">軟件工程師</div>由class=”col-sm-9”可以看出這段為柵格系統的右半部份，占據9個柵格。
<div class="jumbotron">表示放置一個大的廣告框。
<a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">Work Experence</a>a鏈接指向collapseOne，data-toggle=”collapse”表示該控件可以折疊。后面部分均為柵格系統，顯示了三部分的個人經歷。
三、源代碼（代碼縮進方面請自行調整）
<!DOCTYPE html> <html> <head><meta http-equiv="Content-type" content="text/html;charset=gbk"><meta name="viewport" content="width=device-width,initial-scale=1"><title>changtutu個人網站開發</title><link rel="stylesheet" href="bs/css/bootstrap.min.css"><script src="bs/js/jquery-3.2.1.min.js"></script><script src="bs/js/bootstrap.min.js"></script> </head> <body calss="container"><header><nav class="navbar navbar-inverse"><div class="container"><div class="navbar-header"><div class="navbar-brand">ChangTutu個人網站</div><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#divNav"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div> <div id="divNav" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-right"><li><button type="button" class="btn btn-success navbar-btn" data-toggle="modal" data-target="#divModal" title="Print">Print</button><div class="modal fade" id="divModal" data-backdrop="true" data-keyboard="false"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span>×</span></button><h4 class="modal-title">Print Resume</h4></div><div class="modal-body">Print Preview Or Print Config</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">closed</button><button type="button" class="btn btn-primary">Print</button></div></div></div></div><button type="button" class="btn btn-info navbar-btn" data-toggle="tooltip" data-placement="bottom" title="Download">Download</button><script type="text/javascript">$(function () {$('[data-toggle="tooltip"]').tooltip();})</script></li></ul></div></div></nav></header><div class="row"><div class="col-sm-3"><div class="panel panel-default"><div class="panel-heading">Personal Info</div><div calss="panel-body"><img src="resource/xy.jpg" class="img-responsive img-rounded img-thumbnail" alt="Me"> <p class="text-center text-primary">Derek</p><address><strong>Taren,Inc.</strong><br><span class="glyphicon glyphicon-home" title="Address"> 廣東省北京市</span><br><span class="glyphicon glyphicon-file" title="PostalCode"> 520642</span><br><span class="glyphicon glyphicon-phone" title="Mobile"> 18819259282</span><br><span class="glyphicon glyphicon-envelope" title="Email"> Changtutu220@gmail.com</span></address></div></div><div class="panel panel-info"><div class="panel-heading">Personal Skill</div><div calss="panel-body"><div class="row"><div class="col-sm-3"><span class="text-muted">HTML5</span></div><div class="col-sm-9"><div class="progress"><div class="progress-bar progress-bar-striped active" style="width:60%"></div></div></div></div><div class="row"><div class="col-sm-3"><span class="text-success">Java</span></div><div class="col-sm-9"><div class="progress"><div class="progress-bar progress-bar-striped progress-bar-success active" style="width:80%"></div></div></div></div><div class="row"><div class="col-sm-3"><span class="text-info">Jquery</span></div><div class="col-sm-9"><div class="progress"><div class="progress-bar progress-bar-striped progress-bar-info active" style="width:50%"></div></div></div></div><div class="row"><div class="col-sm-3"><span class="text-warning">Bootstrap</span></div><div class="col-sm-9"><div class="progress"><div class="progress-bar progress-bar-striped progress-bar-warning active" style="width:80%"></div></div></div></div><div class="row"><div class="col-sm-3"><span class="text-danger">C</span></div><div class="col-sm-9"><div class="progress"><div class="progress-bar progress-bar-striped progress-bar-danger active" style="width:85%"></div></div></div></div></div> </div><div class="panel panel-primary"><div class="panel-heading">Contact Me</div><div calss="panel-body"><form class="form-horizontal"><div class="form-group"><label for="email" class="col-sm-2 control-label">Email</label><div class="col-sm-10"><input type="email" id="email" class="form-control" placeholder="Email"></div></div><div class="form-group"><label for="name" class="col-sm-2 control-label">Name</label><div class="col-sm-10"><input type="text" id="name" class="form-control" placeholder="name"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-primary pull-right">Send</button><div class="clearfix"></div></div></div></form></div> </div> </div><div class="col-sm-9"><div class="jumbotron"><p >Personal Details</p></div><div class="panel-group" id="accordion"><div class="panel panel-default"><div class="panel-heading"><div class="panel-title"><a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">Work Experence</a></div></div><div id="collapseOne" class="panel-collapse collapse"><div class="panel-body"><ul class="list-group"><li class="list-group-item list-group-item-success"><div class="row"><div class="col-sm-4">2014年 - 至今</div><div class="col-sm-4">xxx 學校</div><div class="col-sm-4">軟件工程師</div></div></li></ul></div></div></div><div class="panel panel-default"><div class="panel-heading"><div class="panel-title"><a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">Education</a></div></div><div id="collapseTwo" class="panel-collapse collapse"><div class="panel-body"><ul class="list-group"><li class="list-group-item list-group-item-success"><div class="row"><div class="col-sm-4">2014年 - 至今</div><div class="col-sm-4">xxx 學校</div><div class="col-sm-4">軟件工程師</div></div></li></ul></div></div></div><div class="panel panel-default"><div class="panel-heading"><div class="panel-title"><a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">Project</a></div><div id="collapseThree" class="panel-collapase collapse"><div class="panel-body"><div id="divCarousel" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#divCarousel" data-slide-to="0" class="active"></li><li data-target="#divCarousel" data-slide-to="1"></li><li data-target="#divCarousel" data-slide-to="2"></li></ol><div class="carousel-inner"><div class="item active"><img src="resource/a.jpg" alt="..." class="img-responsive img-rounded"><div class="carousel-caption">...</div></div><div class="item"><img src="resource/b.jpg" alt="..." class="img-responsive img-rounded"><div class="carousel-caption">...</div></div><div class="item"><img src="resource/c.jpg" alt="..." class="img-responsive img-rounded"><div class="carousel-caption">...</div></div></div><a href="#divCarousel" class="left carousel-control" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a href="#divCarousel" class="right carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a></div></div></div></div></div></div></div></div><footer class="navbar-default navbar-fixed-bottom text-center"><p>©:Copyright by changtutu</p></footer> </body> <script></script></html>總結
以上是生活随笔為你收集整理的记录-Bootstrap编写个人网站主页的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 我推荐支持
- 下一篇： 高压输电线路杆塔接地电阻在线监测装置