之前一直寫web前端的時候寫的比較傻荚恶，用html原生語言姜贡，css樣式寫到吐试吁，而且寫的不好看，總出各種問題楼咳，然后就想到了響應式布局bootstrap熄捍，進而由于工作原因，今天寫了兩個很簡單的頁面母怜，以其中一個為例記錄一下
這里寫圖片描述
代碼bootstrap_demo
寫bootstrap首先要導入bootstrap的css樣式文件和自己的style.css文件余耽，分別用于引用它的樣式和設定自己的樣式，代碼如下
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
接下來就是上面的輪播圖苹熏，由于這里只有一張圖碟贾，所以其他的附屬部分都去掉了，基本代碼如下
<div class="carousel-inner">
<div class="item active">
<img alt="" src="img/nav.jpg" />
</div>
</div>
普通的居中圖片
<img class="img-responsive center-block title-padding" src="img/one.jpg" alt="圖片丟失"/>
居中文字
<h3 class="text-center title-font">
什么是華投融
</h3>
按照網格比例放置居中文字
<div class="row-fluid">
<div class="col-sm-3">
</div>
<div class="col-sm-6">
<p class="text-center content-font">
網絡在線投融資平臺是網絡科技有限公司旗下的一家互聯網金融服務中介信息平臺轨域，致力于為投資者提供安全袱耽、透明、便捷干发、低門檻朱巨、高回報的專業(yè)理財服務，為中小企業(yè)融資者提供快捷枉长、高效冀续、低成本的專業(yè)融資服務。
</p>
</div>
<div class="col-sm-3">
</div>
</div>
網格偏移字段
col-sm-offset-1
其中存在瀏覽器邊緣的問題必峰，要用自己寫的style.css來覆蓋開頭的container-fluid洪唐，代碼如下
.container-fluid{
margin:0px;
padding:0px;
}
其中針對網格在不同設備上的大小，有一個很經典的表格
這里寫圖片描述
基本問題都已經解決了吼蚁，剩下的就是一些細節(jié)問題了桐罕，就不一一指出了，最后放一下我整個界面和自定義style.css文件的代碼
html文件
<!DOCTYPE html>
<html>
<head>
<title>新手指引</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="carousel-inner">
<div class="item active">
<img alt="" src="img/nav.jpg" />
</div>
</div>
<img class="img-responsive center-block title-padding" src="img/one.jpg" alt="圖片丟失"/>
<h3 class="text-center title-font">
什么是
</h3>
<div class="row-fluid">
<div class="col-sm-3">
</div>
<div class="col-sm-6">
<p class="text-center content-font">
網絡在線投融資平臺是（北京）網絡科技有限公司旗下的一家互聯網金融服務中介信息平臺桂敛，致力于為投資者提供安全功炮、透明、便捷术唬、低門檻薪伏、高回報的專業(yè)理財服務，為中小企業(yè)融資者提供快捷粗仓、高效嫁怀、低成本的專業(yè)融資服務设捐。
</p>
</div>
<div class="col-sm-3">
</div>
</div>
<div class="row-fluid">
<div class="span4">
</div>
<div class="span4">
<img class="img-responsive center-block title-padding" alt="140x140" src="img/cycle.jpg" />
</div>
<div class="span4">
</div>
</div>
<img class="img-responsive center-block title-padding" alt="140x140" src="img/two.jpg" />
<h3 class="text-center title-font">
的優(yōu)勢
</h3>
</div>
</div>
<div class="row-fluid">
<div class="col-sm-2">
</div>
<div class="col-sm-8">
<div class="row-fluid title-padding">
<div class="col-sm-2 col-sm-offset-2">
<img class="img-responsive center-block" alt="140x140" src="img/advone.jpg" />
<p class="text-center title-two">
高收益、低門檻
</p>
</div>
<div class="col-sm-2 col-sm-offset-1">
<img class="img-responsive center-block" alt="140x140" src="img/advtwo.jpg" />
<p class="text-center title-two">
安全審核流程
</p>
</div>
<div class="col-sm-2 col-sm-offset-1">
<img class="img-responsive center-block" alt="140x140" src="img/advthree.jpg" />
<p class="text-center title-two">
立足懷柔本地
</p>
</div>
</div>
</div>
<div class="col-sm-2">
</div>
</div>
<div class="row-fluid">
<div class="span12">
<img class="img-responsive center-block title-padding" alt="140x140" src="img/three.jpg" />
<h3 class="text-center title-font">
投資理財流程
</h3>
<div class="row-fluid">
<div class="col-sm-3">
</div>
<div class="col-sm-6">
<img class="img-responsive center-block title-padding" alt="140x140" src="img/step1.jpg" />
<img class="img-responsive center-block" alt="140x140" src="img/step2.jpg" />
<img class="img-responsive center-block title-padding" alt="140x140" src="img/computer.jpg" />
</div>
<div class="col-sm-3">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
style.css文件
.container-fluid{
margin:0px;
padding:0px;
}
.title-padding{
padding-top:40px;
}
.btn-warning{
margin-top:40px;
margin-bottom:80px;
background-color:#E56717;
}
.title-font{
font-weight:bold;
font-size:28px;
}
.content-font{
font-size:16px;
line-height:32px;
}
還有一個bootstrap.min.css文件塘淑，這個去官網下載就好了萝招，就不粘貼出來了
歡迎加入中科院開源軟件自習室：631696396
![歡迎加入中科院開源軟件自習室]
(http://omybc1ur5.bkt.clouddn.com/ad.png)
