一． 下載bootstrap-3.3.7
二． 在html頁面引入css,js;
eg:
<link src="bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
注意：因為會用到jquery，所以引入了jquery .js;
三.body部分的代碼是這樣的：
<body style="margin: 10px;padding: 0px"> <div class="left"> </div> <div class="right"> </div> <body/>
簡單解析下：
body里包含兩個div ,一個在左邊排列(用於放圖片)，一個在右邊排列(用於放文字);都用class名進行區分啦，left和right;
簡單的給兩個div添加點樣式：
.left { float: left; max-width: 43%; padding-left: 5px; } .right { margin-left: 5px; }
現在還看不出什么效果;
- 給第一個div里添加圖片;
<img src="index.jpg" class="img-responsive" alt="圖像">
- 給第二個div添加文字，里面的文字是采用Boostrap的樣式;
<div class="container"> <h1>圖文環繞</h1> <div class="row"> <div class="col-xs-6 col-md-offset-3" style=" box-shadow: inset 1px -1px 1px #ccc, inset -1px 1px 1px #ccc;"> <div class="row"> <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #ccc, inset -1px 1px 1px #ccc;"> <p> 風雨中走過卻不安世事的心</p> </div> </div> <p> 我還是很喜歡你，像風走了三千米不問歸期 我希望有個如你一般的人如山間清爽的風如古城溫暖的光從清晨到夜晚由山野到書房只要最后是你就好 </p> </div>
<div class="col-xs-6 col-sm-offset-3" style="box-shadow: inset 1px -1px 1px #ccc, inset -1px 1px 1px #ccc;"> <p> 我覺得這個世界美好無比。晴時滿樹花開，雨天一湖漣漪，陽光席卷城市，微風穿越指間，入夜每個電台播放的情歌，沿途每條山路鋪開的影子，全部是你不經意寫的一字一句，留我年復一年朗讀。這世界是你的遺囑，而我是你唯一的遺物。 </p> <p> 一個人的記憶就是座城市，時間腐蝕着一切建築，把高樓和道路全部沙化。如果你不往前走，就會被沙子掩埋。所以我們淚流滿面，步步回頭，可是只能往前走 </p> </div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-md-offset-3" style=" box-shadow:inset 1px -1px 1px #ccc, inset -1px 1px 1px #ccc;"> <p> 你燃燒，我陪你焚成灰燼。你熄滅，我陪你低落塵埃。你出生，我陪你徒步人海。你沉默，我陪你一言不發，你歡笑，我陪你山呼海嘯。你衰老，我陪你滿目瘡痍。你逃避，我陪你隱入夜晚。你離開，我只能等待。 </p> </div> <div class="col-xs-6 col-sm-offset-3" style="box-shadow: inset 1px -1px 1px #ccc, inset -1px 1px 1px #ccc;"> <p>我希望買的鞋子是你渴望的顏色。我希望撥通電話時你恰好在想我。我希望說早安你也剛起床。我希望寫的書是你欣賞的故事。我希望關燈的剎那你正泛起困意。我希望買的水果你永遠覺得是甜的。我希望點的歌都是你喜歡唱的。我希望我希望的是你希望的。 </p> </div> <div class="clearfix visible-xs"></div> </div> </div>
采用的是bootstrap的架構： container> row> column
將css樣式也寫在標簽上，所以有點看起來復雜，其實很簡單，這幾段文字的結構都一樣。
看看運行效果：
拖動頁面試試：
你可以通過控制台隨意拖動頁面的寬度，看看文字的適配程度。
源碼：
https://github.com/sulishibaobei/bootstrap/tree/master/bootstrap%20by%20around
另外有兩個免費網站模板也可以看看，在同一個github路徑下