Barrio

Drupal 8/9-Bootstrap 4(基于Flex)

Barrio是Drupal 8/9-Bootstrap 4基本主题。 Drupal标记完全被标准Bootstrap 4标记所覆盖,使用了仅引用Bootstrap CSS的根枝模板,以及很少的自定义CSS。 Barrio基于Flex,可用于Bootstrap尚未涵盖的所有内容。

此主题没有样式,没有布局可以用作开始的基本主题。

Starterkit子主题与Color Module完全集成。

1、2或3列会自动以可配置的列宽进行处理。广泛易用的配置表单允许配置“ Bootstrap Style”表,按钮,导航栏,容器,行,Google字体,图标,消息,菜单等。

如果您的主题未使用Display Suite上的Barrio布局,则可以升级Barrio主题而不会造成任何损害

如果您的主题在Display Suite上使用Barrio Layouts,请在升级到Barrio 5.x之前阅读。

升级到Barrio 5.x

卡和Media Bootstrap布局已声明可以在Barrio子主题上立即使用。

引导卡和媒体快速教程

现在,Barrio附带了为Drupal默认菜单链接定义的可选SVG引导程序图标,以激活转到字体和图标设置。新的Barrio版本还包括为所有菜单链接自动生成的类。

个性化图标使用

对于很棒的块样式操作,请使用“块样式模块” 。使用此模块,任何块都可以通过单击变成下拉菜单,模态或折叠。它还允许您将类添加到块中,从而可以从配置中处理填充和边距。

有关Barrio的详细指南,请参见:

配置指南

创建Bootstrap Barrio子主题

布局说明

Barrio 5.x布局是使用布局发现类定义的,此布局可与Layout Builder,Display Suite或使用布局的任何其他模块一起使用。

包括的布局:

  • 卡(几种格式)
  • 媒体
  • 2栏(6-6、3-9、9-3)
  • 3列(4-4-4)
  • 4列(3-3-3-3,缩小至6-6,小)

✔萨斯

强烈建议您使用Bootstrap 4 Barrio SASS子主题在您的站点上完全释放Bootstrap 4的功能。

几乎每一个Drupal CSS都使用Bootstrap变量来覆盖整个站点的标准颜色和间距。基于Google Material Design,会生成包括主色和辅助色变体的全色方案。

该子主题与Bootstrap材料设计兼容。

想了解更多:

SASS子主题配置指南

✔特点

    • 基于列的网格
    • 1、2和3列自动布局
    • 用户定义的列宽
    • 容器和容器流体布局
  • 标记
    • 标准Bootstrap 4标记替换Drupal树枝模板
    • 易于定制的树枝模板
    • 标头导航的标准标记
    • 多级主菜单弹出子菜单选项
    • 折叠左幻灯片主菜单选项
    • Bootstrap表单元素,包括自定义元素
    • 识别菜单链接的类
    • 定制的Bootstrap主题表
    • 默认链接上的SVG图标集成
    • 滚动窗口上的正文上的滚动类,并在滚动行为上添加了上下滚动类
    • 消息自定义的三个选项
    • 用Bootrstrap树枝模板替换Commerce模板
  • 特征
    • 子主题上的颜色模块集成
    • 通过CDN集成Bootswatch
    • 预定义的Google字体组合
    • 名片栏视图模板允许所有名片栏列表
    • 有关实体和图块的额外主题建议
    • 实体和视图的身体类别

✔安装

  • 下载并安装Barrio。
  • 定义Barrio设置
  • 选择如何加载CDN或本地的Bootstrap文件
  • 如果从CDN加载Bootstrap文件,请选择要在Bootstrap库设置中加载的版本。
安装视频

✔Bootstrap库加载

从8.x-4.24版本开始,Bootstrap将通过composer自动下载并复制到供应商文件夹中。
要在安装过程中将dist文件复制到libss文件夹,可以将以下两行脚本添加到主composer.json文件中:
 "scripts": { "post-install-cmd": [ "@composer drupal-scaffold" ], "post-update-cmd": [ "@composer drupal-scaffold",+ "mkdir -p web/libraries/bootstrap",+ "cp -R vendor/twbs/bootstrap/dist web/libraries/bootstrap" ],

通过作曲家更新时,这将使您的引导程序版本保持最新。

另外,Bootstrap库模块可以加载Bootstrap库,这给您额外的灵活性,可以通过CDN或本地加载库,选择最新的Bootstrap版本,而不考虑主题版本。

引导程序库视频

✔菜单下拉菜单

Barrio可使用菜单下拉菜单,但可通过Bootstrap dorpdown javascript处理。为了正常工作,必须将所有父菜单链接设置为展开状态

✔资金

Barrio基本上是与社区共享的个人努力,并且在最近几个月中实现了快速增长。这是否对您的组织有用?请考虑利用我们的咨询服务或捐款以支持进一步的发展。

文献资料

Bootstrap Barrio安装

基本安装和子主题

Bootstrap Barrio配置设置

使用设置表单配置Bootstrap Barrio

Bootstrap Barrio功能

改善子主题的功能

Bootstrap Barrio技巧与窍门

使用简单的代码片段在子主题上做更多的事情

Drupal 7

Bootstrap Barrio是Bootstrap主题的子主题,添加1、2或3列,其宽度可配置, Skinr块的块操作以轻松控制跨度,首页的视差/一页选项,块定义为模态,YAMM megamenu使用块作为子菜单,全角滑块区域,块的设备可见性配置,固定的970px宽度禁用响应性。

✔需要以下模块和主题:

建议使用以下模块:

  • DHTML菜单。可以与Twitter Bootstrap菜单结合使用。
  • 显示套件。允许对任何字段进行个性化设置,从而轻松转换为Bootstrap标记。 Display Suite上提供了三种基本的Bootstrap布局:缩略图,面板和媒体

✔安装

  1. 在网站/所有/主题中解压并上传Bootstrap主题。默认安装将删除错误。
  2. 在默认的主题文件夹(通常是site / default / themes)中解压并上传Bootstrap Barrio。
  3. 下载Twitter Bootstrap库并安装在站点/所有/库/ bootstrap上,并通过Bootstrap库模块启用,或仅在主题管理员上配置CDN加载。
  4. 下载并启用Skinr模块,如果您不是uid,请设置权限1
  5. 将jQuery更新配置为版本1.7,版本1.8在视图上具有怪异的行为。

✔一页/视差

从版本7.x-3.5开始,有一个附加选项允许将fron页面显示为“一页”,禁用侧边栏,并且所有区域都将具有全角背景。

为了进行完整的配置,您将需要使用以下模块:

  • 无效菜单,将使设置菜单项指向同一页面上的锚点。
  • 视差背景,将为您的一页区域添加视差效果。
  • 滚动Reveal ,当元素进入视口时效果很好。

✔IE8兼容性

请参阅: IE8 Drupal引导程序兼容性

此主题的维护者:

由...赞助:

项目信息

名称:Barrio (bootstrap_barrio)
类型:主题
安装量:超过 20,116 个站点正在使用(查看统计

下载地址