13、为网页布局添加样式与结构

为网页布局添加样式与结构

在网页开发中，为页面添加合理的结构和样式是提升用户体验的关键。下面将详细介绍如何为网页布局添加样式，包括使用 Bootstrap、自定义 CSS、部分视图（Partials）以及 Sass 和资产管道（Asset Pipeline）的相关知识。

1. 添加基础结构与样式

在开发过程中，我们会发现 rails.png 图片是新的 Rails 应用默认包含的，它位于 app/assets/images/rails.png 路径下。由于使用了 image_tag 辅助方法，Rails 会通过资产管道自动找到该图片。

1.1 集成 Bootstrap 与自定义 CSS

为了给示例应用添加样式，我们可以结合 Bootstrap 框架和自定义 CSS 规则。具体操作步骤如下：
1. 添加 Bootstrap ：在 Rails 应用中，可以使用 bootstrap-sass 宝石（gem）来集成 Bootstrap。在 Gemfile 中添加以下内容：

source 'https://rubygems.org'
gem 'rails', '3.2.3'
gem 'bootstrap-sass', '2.0.0'

然后运行以下命令安装依赖：

$ bundle i