使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版 (2)

在css文件夹中的site.css对Bootstrap的一些class进行自定义、重写。

/*---------------------------------------- 排版 ------------------------------------*/ .well .page-header { margin-top: 0; } .well .page-header h1 { margin-top: 0; } /*---------------------------------------- 全局 ------------------------------------*/ .alert { margin-top: 20px; } .well { margin-top: 20px; }

最后，使用jQuery控制点击按钮出现提示信息。

当页面加载的时候，希望提示信息区域隐藏。通过css设置。

.alert { margin-top: 20px; display: none; }

jQuery控制按钮。

<script type="text/javascript"> $(function() { $(\'#alertMe\').click(function(e) { e.preventDefault(); $(\'#successAlert\').slideDown(); }); }); </script>

参考资料：
Code a Responsive Website with Bootstrap 3 --by Brad Hussey

“使用Bootstrap 3开发响应式网站实践”系列包括：

使用Bootstrap 3开发响应式网站实践01,前期准备、导航区域等 使用Bootstrap 3开发响应式网站实践02,轮播 使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版 使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容 使用Bootstrap 3开发响应式网站实践05,使用Tab、Modal、Form展示内容,使用Popover、Tooltip展示提示信息 使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容 使用Bootstrap 3开发响应式网站实践07,页脚