之前一直寫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">
網絡在線投融資平臺是網絡科技有限公司旗下的一家互聯網金融服務中介信息平臺，致力于為投資者提供安全、透明、便捷、低門檻、高回報的專業理財服務，為中小企業融資者提供快捷、高效、低成本的專業融資服務。
</p>
</div>
<div class="col-sm-3">
</div>
</div>
網格偏移字段
col-sm-offset-1
其中存在瀏覽器邊緣的問題，要用自己寫的style.css來覆蓋開頭的container-fluid，代碼如下
.container-fluid{
margin:0px;
padding:0px;
}
其中針對網格在不同設備上的大小，有一個很經典的表格
這里寫圖片描述
基本問題都已經解決了，剩下的就是一些細節問題了，就不一一指出了，最后放一下我整個界面和自定義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">
網絡在線投融資平臺是（北京）網絡科技有限公司旗下的一家互聯網金融服務中介信息平臺，致力于為投資者提供安全、透明、便捷、低門檻、高回報的專業理財服務，為中小企業融資者提供快捷、高效、低成本的專業融資服務。
</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">
的優勢
</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)
