在Bootstrap页面中,通常用Panels来展示主要功能的内容。该部分Html为:
更多信息
广州恒大淘宝队的官方网站和微博同时发布了几张海报,预热本周三晚8点即将到来的亚冠1/4决赛第二回合。
扭转乾坤期待胜利
8月27日晚20点,广州恒大将迎来亚冠联赛的一场生死战,主场与西悉尼流浪者队的第二回合比赛。
更多赛事前场外援三箭齐发
本场比赛恒大的后防线人员变化最大的,因为张琳?、金英权同时停赛,里皮也只能让其他国内球员顶上这两个位置。
更多赛事要90分钟出线
助理教练马达洛尼代替出席,对于明天的比赛,马达洛尼也转述了主教练里皮的态度。我们有在明天拿下对手。
更多赛事
○ col-sm-4属性值:表示在页面宽度大于768像素的时候,占4个单元格
○ 被包裹在div class="col-sm-4 feature">中
□ 如果让图片变成圆形
--只需要给image加上class="img-circle"
□ 如果让Panel中的内容更好看
--自定义CSS
在css文件夹中的site.css中自定义。
/*---------------------------------------- Panel 主要功能介绍 ------------------------------------*/#features { text-align: center;}#features img { margin: 0 0 20px;}
参考资料:
Code a Responsive Website with Bootstrap 3 --by Brad Hussey
http://getbootstrap.com/
http://bootswatch.com/
http://www.tutorialspoint.com/
http://www.placehold.it/
“使用Bootstrap 3开发响应式网站实践”系列包括:
使用Bootstrap 3开发响应式网站实践01,前期准备、导航区域等
使用Bootstrap 3开发响应式网站实践02,轮播
使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版
使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容