记录-Bootstrap编写个人网站主页
這次做的是個(gè)人簡(jiǎn)介的一個(gè)網(wǎng)站，但只是一個(gè)靜態(tài)的HTML頁(yè)面。使用到的框架是bootstrap，歷時(shí)一天半。
一、效果預(yù)覽
二、代碼解析
<!DOCTYPE html> <html> <head><title>changtutu個(gè)人網(wǎng)站開發(fā)</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框架（網(wǎng)上搜得到）。
下載bootstrap框架官方網(wǎng)站：http://v3.bootcss.com/css/
整體的body容器為container容器，container 類用于固定寬度并支持響應(yīng)式布局的容器。所謂響應(yīng)式，即頁(yè)面會(huì)隨著顯示屏幕尺寸的縮放，進(jìn)行相應(yīng)的調(diào)整。
<nav class="navbar navbar-inverse"><div class="container"><div class="navbar-header"><div class="navbar-brand">ChangTutu個(gè)人網(wǎng)站</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為導(dǎo)航條屬性，表示在頁(yè)面最上方添加一個(gè)導(dǎo)航條，即圖中黑色部分。
navbar-inverse：表示為黑色導(dǎo)航條。
navbar-brand：其中一個(gè)屬性，可以在導(dǎo)航條上面添加文字等（上圖導(dǎo)航條中的Changtutu個(gè)人網(wǎng)站）
navbar的解析參考博客：http://blog.csdn.net/mafan121/article/details/47836453
摘要：1、navbar-header。該類是導(dǎo)航欄文字看起來(lái)小一點(diǎn)，而且是在小屏幕上唯一能顯示的內(nèi)容
2、navbar-toggle。botton按鈕定義3根橫杠的東西。其樣式class=“navbar-toggle”是必不可少的。
3、data-toggle=“collapse”表明這個(gè)button是一個(gè)折疊控件，其折疊的內(nèi)容指向data-target=”#divNav”，即是id為divNav的內(nèi)容。
上述div的id為divNav，即上一個(gè)代碼片段中button所指向的那個(gè)div。1、class=”collapse navbar-collapse”：其中的nvabar-collapse是導(dǎo)航欄的折疊樣式，collapse這是表示初始時(shí)是折疊的，若沒有collapse樣式，那么縮放后導(dǎo)航欄元素將是展開的。
2、data-toggle=”modal” data-target=”#divModal”：彈出id為divModal的模態(tài)框。
上述片段描述了一個(gè)模態(tài)框的樣式。
class=”modal fade”：表示模態(tài)框淡入效果。
data-backdrop=”true”：點(diǎn)擊瀏覽器頁(yè)面模態(tài)框會(huì)關(guān)閉
data-keyboard=”false”：點(diǎn)擊esc鍵模態(tài)框不會(huì)關(guān)閉
data-dismiss=”modal”：點(diǎn)擊該地方模態(tài)框也會(huì)關(guān)閉
class=”modal-title”>Print Resume、class=”modal-body”>
Print Preview Or Print Config、class=”modal-footer”>：分別表示模態(tài)框的頭身腳三部分
data-toggle=”tooltip”
data-placement=”bottom”
(function?()?{(‘[data-toggle=”tooltip”]’).tooltip();
})：表示在Download按鈕下方顯示一小行的提示信息
class=”row”：柵格系統(tǒng)
關(guān)于柵格系統(tǒng)見博客：http://www.cnblogs.com/JerryTao/p/5476027.html
簡(jiǎn)單理解的柵格系統(tǒng)，即使把該div分為十二個(gè)小格，開發(fā)者可以指定某一個(gè)控件在里面所占的格數(shù)。
class=”col-sm-3”：表示該div占據(jù)3格的柵格系統(tǒng)
class=”panel panel-default”
class=”panel-heading”>Personal Info：在3格div中創(chuàng)建一個(gè)面板，樣式為default，heading為標(biāo)題
calss=”panel-body”
<img src="resource/xy.jpg" class="img-responsive img-rounded img-thumbnail" alt="Me">
該img組件打開一個(gè)路徑為“resource/xy.jpg”的圖片，img-responsive可以讓圖片對(duì)響應(yīng)式布局更好的響應(yīng)，本質(zhì)是為圖片賦予了max-width: 100%;和height: auto;屬性，可以讓圖片按比例縮放，不超過其父元素的尺寸。img-rounded：可以添加 border-radius:6px屬性在其后面獲得圓角圖片。如：.img-rounded{border-radius:6px;}。img-thumbnail：讓圖片顯示時(shí)候縮小一點(diǎn)，即添加了圖片的內(nèi)邊距。
參考博客：http://blog.csdn.net/u012897547/article/details/16948723
glyphicon 即添加一個(gè)圖標(biāo)。
圖標(biāo)官網(wǎng)：http://v3.bootcss.com/components/#thumbnails
第二個(gè)面板，顯示個(gè)人技能的進(jìn)度條。progress表示該div是進(jìn)度條， progress-bar-striped表示進(jìn)度條為斜體，active為動(dòng)態(tài)進(jìn)度條。style=”width:60%”即進(jìn)度為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">這一段為第三個(gè)面板，放置了聯(lián)系信息，可以讓訪問者聯(lián)系到網(wǎng)站作者。
<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 學(xué)校</div><div class="col-sm-4">軟件工程師</div>由class=”col-sm-9”可以看出這段為柵格系統(tǒng)的右半部份，占據(jù)9個(gè)柵格。
<div class="jumbotron">表示放置一個(gè)大的廣告框。
<a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">Work Experence</a>a鏈接指向collapseOne，data-toggle=”collapse”表示該控件可以折疊。后面部分均為柵格系統(tǒng)，顯示了三部分的個(gè)人經(jīng)歷。
三、源代碼（代碼縮進(jìn)方面請(qǐng)自行調(diào)整）
<!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個(gè)人網(wǎng)站開發(fā)</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個(gè)人網(wǎng)站</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 學(xué)校</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 學(xué)校</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>總結(jié)
以上是生活随笔為你收集整理的记录-Bootstrap编写个人网站主页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 我推荐支持
- 下一篇： 高压输电线路杆塔接地电阻在线监测装置