bootstrap 垂直,水平,内联表单建立用户登入界面

最新推荐文章于 2023-01-21 12:46:17 发布

猪蹄泡凤爪

最新推荐文章于 2023-01-21 12:46:17 发布

阅读量395

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44650379/article/details/105254438

版权

这篇博客介绍了如何使用Bootstrap创建三种不同类型的用户登录界面：垂直表单、内联表单和水平表单。垂直表单通过栅格系统和fieldset进行布局，内联表单通过添加'form-inline'类实现，水平表单则使用'form-horizontal'类以响应式调整元素位置。每个表单的构造细节，包括label、input的关联、placeholder的使用以及按钮样式等都进行了详细说明。

摘要由CSDN通过智能技术生成

1.垂直表单建立：

1.利用栅格来建立布局，先container可以使内部元素垂直居中显示
2.后行再列:.container>.row>.col-md-12>form>fieldset>legend{用户登陆}+.form-group>label{用户名}+input.form-control^.form-group>label{密码}+input.form-control+ctrl+e：

<div class="container">
     <div class="row">
      <div class="col-md-12">
       <form action="">
        <fieldset>
         <legend>用户登陆</legend>
         <div class="form-group"><label for="">用户名</label><input type="text" class="form-control"></div>
         <div class="form-group"><label for="">密码</label><input type="text" class="form-control"></div>
        </fieldset>