bootstrap表单
发布时间：2020-12-17 21:04:47 所属栏目：安全 来源：网络整理
导读：bootstrap bootstrap表单 !DOCTYPE html html ? head ? ? titleBootstrap 表单/title ? ? meta charset="utf-8" ? ? meta name="viewport" content="width=device-width,initial-scale=1.0" ? ? !-- Bootstrap -- ? ? link href="bootstrap/css/bootstrap.cs
|
bootstrap
bootstrap表单
<!DOCTYPE html>
<html> ? <head> ? ? <title>Bootstrap 表单</title> ? ? <meta charset="utf-8"> ? ? <meta name="viewport" content="width=device-width,initial-scale=1.0"> ? ? <!-- Bootstrap --> ? ? <link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen"> ? ? <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" media="screen"> ? ? <script src="bootstrap/js/jquery.js"></script> ? ? <script src="bootstrap/js/bootstrap.min.js"></script> ? </head> ? <body style="padding:50px;"> ? <h3>创建一个圆角的搜索表单</h3> ? ? <p>使用方法：为form添加一个form-search类，再给input添加一个search-query类，即可创建一个行内圆角搜索表单</p> ? ? <form class=" form-search" action=""> ? ? <input class=" input-medium search-query" type="text" name="" id="" placeholder="开始搜索"> ? ? ? ? <button class="btn" type="submit">搜索</button> ? ? </form> ? ?? ? ? <h3>行内表单</h3> ? ? <p>使用方法：在form后面添加一个form-inline类，即可让所有表单元素即可并排显示</p> ? ? <form action="" class="form-inline"> ? ? <input class="input-small" type="text" name="" id="" placeholder="账号"> ? ? <input class="input-small" type="password" name="" id="" placeholder="密码"> ? ? <label class="checkbox"> ? ? <input type="checkbox" name="" id=""> 记住密码 ? ? </label> ? ? <button class="btn">登录</button> ? ? </form> ? ?? ? ? <h3>横向表单</h3> ? ? <ol> ? ? <li>为form添加.form-horizontal类</li> ? ? <li>把成对的标签和控件包装在.control-label类中</li> ? ? <li>为其中每个标签添加.control-label类</li> ? ? <li>再把每一个类包装在一个.controls的div中，以便对齐</li> ? ? </ol> ? ? <form class="form-horizontal" action=""> ? ? <div class="control-group"> ? ? ? ? <label class="control-label" for="input1">账号</label> ? ? ? ? ? ? <div class="controls"> ? ? ? ? ? ? <input type="text" name="" id="input1" placeholder="账号"> ? ? ? ? ? ? </div> ? ? ? ? </div> ? ? ? ? <div class="control-group"> ? ? ? ? <label class="control-label" for="input2">密码</label> ? ? ? ? ? ? <div class="controls"> ? ? ? ? ? ? <input type="password" name="" id="input2" placeholder="密码"> ? ? ? ? ? ? </div> ? ? ? ? </div> ? ? </form> ? </body> </html> 图片预览：
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
