bootstrap如何水平的排列表单控件

boostrap是一条目很是优异的前端框架,在响应结构网站中普遍应用,下面以登录表单为例,介绍若何利用bootstrap实现程度摆列表单。

方式/步调

  1. 1

    新建HTML文件用来测试,定名为index.html文件,代码如下:

  2. 2

    在index.html文件的head头部引入bootstrap.min.css样式文件,以及jquery-1.8.3.min.js,bootstrap.min.js两个JS文件。

  3. 3

    在body中编写form表单代码,并标的目的<form> 元素添加 class=“form-horizontal”,form-horizontal类是bootstrap程度结构的form表单类。

  4. 4

    操纵bootstrap中form-control类建立一个类型为text表单控件input,用于登录用户名的输入。

  5. 5

    操纵bootstrap中form-control类建立一个类型为password的表单控件input,用于登录暗码的输入。

  6. 6

    建立一个button按钮,用于提交表单内容,样式用bootstrap默认按钮样式btn-default。

  7. 7

    运行代码,实现程度摆列表单,下面是运行代码后的结果图:

  • 发表于 2019-06-01 17:06
  • 阅读 ( 982 )
  • 分类:其他类型

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

0 篇文章

作家榜 »

  1. xiaonan123 189 文章
  2. 汤依妹儿 97 文章
  3. luogf229 46 文章
  4. jy02406749 45 文章
  5. 小凡 34 文章
  6. Daisy萌 32 文章
  7. 我的QQ3117863681 24 文章
  8. 华志健 23 文章

联系我们:uytrv@hotmail.com 问答工具