根据上面代码引申出不同的类,我们一行行的来看。给form添加form-inline类(将控件放在一行) | form-horizontal类(标签在左,控件在右),后者借助标签。

--addon:指添加的文本或按钮

效果如下:

如果不加的话,button将被挤到下一行。这里不再贴图,可自行贴码测试。

效果如下:

(注意:这里的input文本框应该是占5/6的,我把它的宽度自定义了下为20%)

这里关于form-horizontal,要配合bootstrap的栅格系统进行。

元素上使用类名“form-horizontal”主要有以下几个作用:   1:设置表单控件padding和margin值。上面的代码可在调试控制台里面看到,为padding-left:50px。   2:改变“form-group”的表现形式,类似于网格系统的“row”。

2.label的作用

---产生蓝色光晕
<label for="1111">hello<input type="text" id="jiang">

---id不对应,没反应,只有当鼠标放在控件上时,才有蓝色光晕

结合上面的代码看:label中的for属性,应该对应的是控件中的id。作用:保证当鼠标置于label上,相应的控件会产生蓝色光晕。

3.role的作用

有没有觉得很奇怪,为什么在写表单或者一些控件的时候,要加上role?

作用:保证读屏软件可以识别。读屏软件即一款帮助智障人士上网的软件,将图片,文字等以语音的形式传达给智障人士,因此为确保读屏软件可以识别,通常没有语义化的标签,或者功能特殊的标签都要写上它。比如:

相关文章

Bootstrip HTML 查询搜索常用格式模版 &lt;form class=&...
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
要让两个按钮左右排列,你可以使用 Bootstrap 的网格系统将它...
是的,可以将status设置为布尔类型,这样可以在前端使用复选...
前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自...
起步导入:<linkrel="stylesheet"href="b...