表格布局

Bootstrap为您提供以下类型的表单布局-

• 垂直（默认）形式
• 内联表格
• 水平形式

垂直或基本形式

基本表单结构是Bootstrap附带的。单个表单控件会自动接收某些全局样式。要创建基本表单，请执行以下操作-

• 将角色表单添加到父

  元素。

• 用类.form-group将标签和控件包装在

  中。这是最佳间距所需的。

• 向所有文本，和<select>元素添加<i>.form-control</i>类。</p> </li> </ul> <h3>内联表格</h3> <p>要创建一个所有元素都是内联，左对齐且标签并排的表单，请将类<i>.form-inline</i>添加到<form>标记中。</p> <h3>水平形式</h3> <p>水平表格不仅在标记数量上而且在表格的表示方式上与其他表格不同。要创建使用水平布局的表单，请执行以下操作-</p> <ul class="list"> <li> <p>将<i>水平.form</i>类添加到父<form>元素。</p> </li> <li> <p>用类<i>.form-group</i>将标签和控件包装在<div>中。</p> </li> <li> <p>在标签上添加一类<i>.control-label</i> 。</p> </li> </ul> <table class="table"> <tr> <th style="text-align:center;">Example</th> <th style="text-align:center;">Description</th> <th style="width:22%">Download link</th> </tr> <tr> <td><a onclick="return OpenPopupCenter('/bootstrap/src/demo/bootstrap_form_demo_1.htm', 'TEST!?', 600, 600)" role="button">Login Page</a></td> <td>This example indicates about login page structure in Bootstrap</td> <td><a href="/bootstrap/src/zip/form.zip">Download</a></td> </tr> <tr> <td><a onclick="return OpenPopupCenter('/bootstrap/src/demo/bootstrap_form_demo_2.htm', 'TEST!?', 600, 600)" role="button">Contact page</a></td> <td>This example indicates about Contact page structure in Bootstrap</td> <td><a href="/bootstrap/src/zip/form2.zip">Download</a></td> </tr> <tr> <td><a onclick="return OpenPopupCenter('/bootstrap/src/demo/bootstrap_form_demo_3.htm', 'TEST!?', 600, 600)" role="button">Sign Up page</a></td> <td>This example indicates about Sign Up page structure in Bootstrap</td> <td><a href="/bootstrap/src/zip/form3.zip">Download</a></td> </tr> </table> </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> <!-- 引入Bootstrap JavaScript库 --> <script src="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> <!-- 引入Meilisearch搜索相关的JavaScript库 --> <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> <!-- 引入prismjs代码高亮相关的JavaScript库 --> <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>