Bootstrap子主题创建

下面的说明是如何创建一个Bootstrap子主题,这里有多种方式来完成他,但是这将关注在两种最常见的: 使用本地Bootstrap框架源LESS预处理和使用集成 CDN。

要求

  • Bootstrap - 7.x-2.0 或7.x-3.0 (基主题必须启用)
  • jQuery Update - 7.x-2.3或更高, Bootstrap 要求一个jQuery最小版本 1.7或更高,在你安装完成后必须手动设置该配置

使用 方法 1: Bootstrap 源文件 条件要求

以下说明基于Bootstrap-7.x-3.0 或更高但Bootstrap-7.x-2.0也是一样,只需下载Twitter Bootstrap 2.3.2

设置

复制starter kit(入门套件)子主题到 sites/all/themes 或相应sites/*/themes 文件夹。 你不应该直接修改基主题或捆绑在基主题下的子主题,如果基主题被更新后,所有这些更改工作都将丢失。一旦复制后,重命名你选择的名字,如: my_bootstrap_theme. 然后确保你重命名 bootstrap_subtheme.info.starterkit 文件来匹配文件夹名, 如: my_bootstrap_theme.info. 也要确定更改该文件中的name(名称)和 description(描述) 属性

重要注意事项
确保.starterkit 后缀不再出现在子主题 .info 文件名中,这个后缀是简单的权宜之计来确保捆绑的入门套件子主题不会被自动启用或直接拿来使用,这将帮助那些不熟悉Drupal主题的人避免直接修改入门套件子主题并迫使新的子主题被正确配置。

Bootstrap 库方法

当前有两种类型方法支持添加Bootstrap库到你的子主题,默认方式,Bootstrap基主题启用CDN来提供必要的文件,如果这种方法适合你,请跳过这一步。

方法1可能是最动态的,他将赋予你更改LESS变量并利用Bootstrap库提供的方式继承

方法2相当简单且通过基主题利用CDN Bootstrap 库,他是非常静态的,他需要你覆盖你子主题中存在的样式。

无论你选择哪种方法,你都需要为你需要启用的方法取消注释相应行在你的子主题 .info 文件中

方法 1: Bootstrap 源文件

下载并解压 Bootstrap 3.0.0 源文件 到你的新子主题,在解压后,文件夹应是 bootstrap。如果由于某种原因,你有一个额外的bootstrap文件夹包裹bootstrap文件夹 (像: bootstrap/bootstrap), 移除外面的 bootstrap 文件夹。之后你无需再管这些文件,这将允许框架以后可以升级。

如果使用LESS模块

从 .info 文件中更改样式 css/style.cssless/style.less. 一旦主题启用或浏览这些样式将自动生成,如果这个不生效,确保你使用LESS模块 7.x-3.0-rc1 或更高。

警告: 目前 lessphp 编译器和bootstrap有个bug , 详见 #2035627: Responsive problem with boostrap source. 使用风险自负: 请不要为这个bug提交问题,目前我们的项目组无法修复这个bug。

如果使用本地预处理器

编译 ./less/style.less 文件,会生成一个新的文件 ./css/style.css

现在,你需要在你的子主题 .info中取消注释相应行 (涉及到这个方法的).

另外你应从基主题中排除 bootstrap.js :
exclude[js][] = 'sites/all/themes/bootstrap/js/bootstrap.js'

完成

方法 2: Bootstrap CDN

此方法更简单,你无需做任何事除非你想覆盖基主题的默认设置, 如果使用该方法,只需取消注释涉及方法2的行。

编辑 ./css/style.css 提供的CSS文件为你喜欢的样式

启用

导航至 admin/appearance 并为你的子主题点击 "Enable and set default(启用并设为默认)"

文件结构

下面这些路径是你子主题相关的主要目录,这些目录有一个单独的README.txt文件,请详细阅读他们的解释说明内容

./css - 编译好的子主题源文件
./less - 子主题源文件
./templates - 模板文件

图标

Bootstrap 默认自带 Glyphicons图标,我们的基主题已经通过Icon API 来利用并支持这些图标, 然而, 鉴于静态子图形能力有限, 建议您可以考虑使用一个替代的解决方案, 像 Fontello 来替代。

添加新评论