默认的搜索表单：
而我们自己定义的一个搜索表单：
两者之间的差距，还是很大的。
理论上讲，通过调整CSS，下面的表单元素，也能调整成上面的样子。
不过我们这里采用主题模板覆写的形式，
在主题目录下面，创建对应的覆写文件：
icls\themes\gf_icls\src\Plugin\Form
这里面的表单名，和我们定义的时候，一一对应：
里面的代码如下：
<?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;
}
成功.
Bootstrap,竟然将表单alter，主题的preprocess，等一系列的东西，改造成了面向对象的。学习一下，会了以后，发现这种方式更直观方便一些，对于习惯面向对象的开发人员。
