bootstrap 列表表格表单复选单选多选输入框组

最新推荐文章于 2025-06-04 15:32:10 发布

转载

最新推荐文章于 2025-06-04 15:32:10 发布 · 866 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/camelroyu/p/5639903.html

文章标签：

#javascript #人工智能 #java #ViewUI

这篇博客详细介绍了Bootstrap框架中的一些关键布局组件，包括列表（ul li）、表格、表单以及输入框组的使用。在表单部分提到了如何创建复选、单选及多选选项，并且讨论了在文本框前添加select选择框以实现全文检索和标题检索功能。此外，还涵盖了导航条（nav-tabs和nav-pills）及其垂直布局的实现，以及在移动设备中可折叠的导航栏设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、列表 ul li

二、表格 table (http://www.runoob.com/bootstrap/bootstrap-tables.html)

1. 基本表格 <table class="table">

2. 响应式表格 <div class="table respoinsive"><talbe >
   单独设立标题样式 标头样式

三、表单

第一种：常规样式（垂直）
 <form role="form">

<!-- form-group 设置一组，所有的文本框input=text，textarea，select 设置form-countrol-->
  <div class="form-group">
      <label for="name">名称</label>
      <input type="text" class="form-control" id="name"  placeholder="请输入名称">
   </div>

   <div class="form-group">
      <label for="inputfile">文件输入</label>
      <input type="file" id="inputfile"> //文本框只需要设置input的类型type=“file” 
      <p class="help-block">这里是块级帮助文本的实例。</p> //帮助说明的样式，文字颜色浅灰色
   </div>
</form>

备注：一行整合在一起：  <span class="input-group-addon">$</span>

第二种：内联表单（左对齐） <form class="form-horizontal" role="form">

第三种：Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。
Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、
search、tel 和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。
文本框： <textarea class="form-control" rows="3"></textarea>

选择框： 复选checkbox 单选radio
<label for="name">默认的复选框和单选按钮的实例</label> <div class="checkbox"> <label><input type="checkbox" value="">选项 1</label> </div> <div class="checkbox"> <label><input