学习使用bootstarp基本控件(table、form、button)_javascript技巧

WBOY
Release: 2016-05-16 15:05:57
Original
1896 people have browsed it

bootstrap为我们定义了简洁易用的样式,我们只需要很少的样式指定,就可以完成简约优雅的页面展示。
本篇主要介绍以下几个基本控件:
1. table
2. form
3. button

1. 表格(table)依旧使用

来表现表格。有如下的类来控制table的属性, table样式默认会占满父容器

标题一 标题二 标题三
1 2 3
4 5 6
Copy after login

将任何.table包裹在.table-responsive中即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大768px宽度时,水平滚动条消失。

2. 表单form, 有如个几种样式定义

lable与控件要用form-group类型的div包起来,默认表单如下

Copy after login

内联表单,为label指定sr-only类别,可隐藏掉标签,但必须 不可省略lable.

Copy after login

水平类型的表单,要为lable与标签组指定长度, 采用栅格系统的布局方式。 label右对齐,标签组左对齐。

Copy after login

form表单验证,bootstrap3支持表单的自定义验证。 加入req uired表示表单必填,node.setCustomValidity可以设置表单的自定义验证

Copy after login

3. button的样式

使用.btn-lg、.btn-sm、.btn-xs可以获得不同尺寸的按钮, 给按钮添加.btn-block可以使其充满父节点100%的宽度,而且按钮也变为了块级(block)元素, Link

Copy after login

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!