学会使用引导基本控件(表、窗体,按钮)

引导程序为我们定义了一种简单易用的样式,我们可以完成一个简单而优雅的页面显示,只显示了几种样式。

本文主要介绍以下基本控件:

1。桌子

2。形式

三.按钮

1。窗体(表)仍然用于显示窗体。以下类用于控制表的属性,表样式默认采用父容器








标题1
标题两
标题三



















响应表可以用任何创造。表the.table-responsive,将卷上的小屏幕设备(小于768px)。当屏幕大768px宽度、水平滚动条消失。

2。形式,形式,就像几种风格的定义


标签和控件都包裹在形成集团型的div,用默认的形式如下







电子邮件地址
<输入type=emailclass=格式控制id=exampleinputemail1
占位符输入电子邮件>


密码
<输入类型窗体控件
id=exampleinputpassword1占位符=密码>


我查出来


提交





内联的形式,指定SR只类的标签,可以隐藏标签,但是你不能省略标签。







电子邮件地址
<输入type=emailclass=格式控制id=exampleinputemail1
占位符输入电子邮件>


密码
<输入类型窗体控件
id=exampleinputpassword1占位符=密码>


我查出来


提交





卧式形式,指定的标签和标签组的长度,网格系统的布局。标签右对齐,左对齐和标签组。





电子邮件
地址

<输入type=emailclass=格式控制id=exampleinputemail1
占位符输入电子邮件>



密码

<输入类型窗体控件
id=exampleinputpassword1占位符=密码>



我查出来


提交





表单验证,bootstrap3支持表单自定义验证。必须说的形式要求,node.setcustomvalidity可以设置成自定义验证







电子邮件
地址

<输入type=emailclass=格式控制id=exampleinputemail1
占位符



密码

<输入类型窗体控件
id=password1占位符=密码要求的变化=checkPassword()>



password2

<输入类型窗体控件
id=password2占位符=password2要求>



我查出来


提交




功能checkPassword(){
var = $(# PWD1 password1)。瓦迩();
无功pwd2 = $(# password2 )瓦迩();
如果(PWD1!= pwd2){
document.getelementbyid(password1)。SetCustomValidity(输入的两个密码不一致);
{人}
document.getelementbyid(password1)。SetCustomValidity();
}

}




3的风格。按钮


使用按钮LG。BTN SM and.btn-xs,你可以得到不同大小的纽扣。adding.btn-block的按钮可以使它的父节点100%的宽度,和按钮也成为一个块级元素(块),或添加元素的按钮类。



违约
原发性
成功
信息
警告
危险
链接
链接
按钮






以上是本文的全部内容,希望能对大家有所帮助。