引导表格

📌 相关文章

📜 引导表格

📅 最后修改于: 2020-12-19 02:49:05 🧑 作者: Mango

在Bootstrap中，存在三种类型的表单布局：

垂直形式(默认)
水平形式
内联表格

自举表格规则

这3种表单布局有3条标准规则：

始终使用
(有助于提高使用屏幕阅读器的用户的可访问性)
在
中包装标签和表单控件(需要最佳间距)
将类.form-control添加到所有文本，和<select>元素</li> </ul> <h4>1)Bootstrap垂直形式(默认)</h4> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Java"><code><span <="" span="" style="font-size: 10pt"> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap example</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> </head> <body> <div class="container"> <h1>Vertical Form Example</h1> <form style="width:300px"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <button type="submit" class="btn btn-default">Login</button> </form> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html> </span></code></pre> </div> <h4>2)Bootstrap内联表格</h4> <p>在Bootstrap内联表单中，所有元素都是内联，左对齐，并且标签在旁边。</p> <p>此示例仅适用于视口内宽度至少为768px的表单！</p> <p><strong>例：</strong></p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Java"><code><span <="" span="" style="font-size: 10pt"> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2>Inline form Example</h2> <form class="form-inline" role="form"> <form style="width:300px"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <button type="submit" class="btn btn-default">Login</button> </form> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </body> </html> </span></code></pre> </div> <h4>3)自举水平形式</h4> <p>如果要创建水平表单，则必须添加一些其他规则。</p> <p><strong>水平形式的其他规则：</strong></p> <ul> <li>将类.form-horizontal添加到<form>元素</li> <li>将类.control-label添加到所有<label>元素</li> </ul> <p><strong>例：</strong></p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Java"><code><span <="" span="" style="font-size: 10pt"> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2>Horizontal form Example</h2> <form class="form-horizontal" role="form"> <form style="width:300px"> <div class="form-group"> <label class="control-label col-sm-2" for="email">Email:</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="pwd">Password:</label> <div class="col-sm-10"> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Submit</button> </div> </div> </form> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </body> </html> </span></code></pre> </div> <h4>Bootstrap 4表格</h4> <p>在Bootstrap4中，表单控件会自动使用Bootstrap接收某些全局样式。</p> <p>.form-control类的所有文本<input>，<textarea>和<select>元素的宽度均为100％。</p> <h4>堆叠(全角)形式：</h4> <p>引导程序4提供了全宽度的堆叠形式。</p> <h4>例：</h4> <p>让我们以创建带有两个输入字段，一个复选框和一个提交按钮的堆叠表单为例。</p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Java"><code><span <="" span="" style="font-size: 10pt"><!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Stacked form</h2> <form> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </body> </html> </span></code></pre> </div> </div> </div> </div> </div> </div> <footer> <div class="bg-white text-center pb-1"> <p class="text-body-tertiary pt-3 lh-lg text-opacity-50" id="footer-text">Copyright © 2020 - 2024 版权所有 <br> <a href="https://beian.miit.gov.cn/" target="_blank" class="text-opacity-50 text-body-tertiary mt-1 mb-1">蜀ICP备20006366号-1</a> <br> Made with ❤️ in Chengdu </p> </div> </footer>  <script src="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>  <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script> <script src="https://imangodoc.com/static/javascript/meili_custom.js"></script>  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script> </body> </html>