You are here

Drupal8中 为表单应用Bootstrap样式

默认的搜索表单:

 morenbiaodan.jpg

而我们自己定义的一个搜索表单:

zidingyiform.jpg

 

两者之间的差距,还是很大的。

理论上讲,通过调整CSS,下面的表单元素,也能调整成上面的样子。

 

不过我们这里采用主题模板覆写的形式,

 

在主题目录下面,创建对应的覆写文件:

icls\themes\gf_icls\src\Plugin\Form

 bootstrapwenjian.jpg

这里面的表单名,和我们定义的时候,一一对应:

 morenwenjian.jpg

里面的代码如下:

<?php

/**

 * @file

 * Contains \Drupal\gf_icls\Plugin\Form\ThinkTankSearchBlockForm.

 */

 

namespace Drupal\gf_icls\Plugin\Form;

 

use Drupal\bootstrap\Annotation\BootstrapForm;

use Drupal\bootstrap\Utility\Element;

use Drupal\bootstrap\Plugin\Form\FormBase;

use Drupal\Core\Form\FormStateInterface;

 

/**

 * Implements hook_form_FORM_ID_alter().

 *

 * @BootstrapForm("think_tank_search_block_form")

 */

class ThinkTankSearchBlockForm extends FormBase {

 

  /**

   * {@inheritdoc}

   */

  public function alterForm(array &$form, FormStateInterface $form_state, $form_id = NULL) {

    $container = Element::create($form, $form_state);

    $container->actions->submit->setProperty('icon_only', TRUE);

    $container->title->setProperty('input_group_button', TRUE);

  }

 

}

 

红色部分是重点。

 

我在想bootstrap是怎么覆写的搜索表单,找了很久的代码,终于在这个位置找到了。

themes\bootstrap\src\Plugin\Form

我阅读了bootstrap主题src下面的所有代码,重要找到了。

 

编写代码,清除缓存,起作用了,但是还不是最终效果,调整一下CSS

#blocktabs-search_tabs button{

  font-size:14px;

}

成功.

 chenggongyangshi.jpg

Bootstrap,竟然将表单alter,主题的preprocess,等一系列的东西,改造成了面向对象的。学习一下,会了以后,发现这种方式更直观方便一些,对于习惯面向对象的开发人员。

 

论坛:

Drupal版本: