新一期的干货来了,BootStrap该怎么用(乐字节java)4

表单

                            如果需要更多资料点击下方图片加好友领取⬇(注明来意)
                    C6F20ED5-907D-4b8c-BBAE-FE609EE58292.png
​ 表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

表单控件

​ .form-control .input-lg(较大) .input-sm(较小)

输入框 text

​ .form-control

下拉选择框 select

​ 多行选择设置:multiple="multiple"

文本域 textarea
复选框 checkbox

​ 垂直显示: .checkbox

​ 水平显示: .checkbox-inline


单选框 radio

​ 垂直显示: .radio

​ 水平显示: .radio-inline


按钮

1)使用 button 实现

​ 基础样式: btn

​ 附加样式:btn-primary btn-info btn-success btn-warning btn-danger btn-link btn-default







2)多标签支持:使用 a div 等制作按钮

a标签按钮
span标签按钮
div标签按钮

3)按钮大小

​ 使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮




 

4)按钮禁用

​ 方法1:在标签中添加disabled属性

​ 方法2:在元素标签中添加类名"disabled"

​ 在class属性中添加disabled只是样式上禁用了,并不是真正的禁用了此按钮!

表单布局

​ 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:

  • 向父
    元素添加 role="form"
  • 把标签和控件放在一个带有 class .form-group
    中。这是获取最佳间距所必需的。
  • 向所有的文本元素