优秀的编程知识分享平台

网站首页 > 技术文章 正文

Bootstrap项目实训干货:设计注册页面

nanyue 2024-09-06 20:14:05 技术文章 8 ℃

# 一、实验目标

写一个注册页面。页面如下:

# 二、实验知识

bootstrap的表单提供下列类型的布局:

- 垂直表单(默认)

- 内联表单

- 水平表单

水平排列的表单

通过给表单添加.form-horizontal类,并联合使用Bootstrap预置的栅格类,可以将 label标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。

创建表单的基本步骤:

1.向form元素添加role="form"。如果是水平表单,添加class="form-horizontal"。

2.把标签和控件放在一个带有class=".form-group"的div中。

3.向所有的文本元素都添加class=".form-control"。

# 三、实验步骤

打开src/main/webapp/index.html,

1.先设置表单为水平排列。

2.在form元素里添加表单分组,标题为注册。

3.设置标签和输入控件.

完整代码链接:https://www.itbegin.com/apps/mooc/77a8ddd1229d4556956b49cb82c48708

ITbegin是专注于在线编程应用和研发的互联网公司,官网:www.itbegin.com

最近发表
标签列表