bob体育官方平台
Bootstrap如何创建表单,Bootstrap创建表单

Bootstrap表单类型分为三种格式:笔直或骨干表单、内联表单、水平表单

Bootstrap如何创制表单,Bootstrap创建表单

Bootstrap表单类型分为二种格式:垂直或基本表单、内联表单、水平表单

笔直或基本表单(display:block;卡塔尔
骨干的表单布局是 Bootstrap 自带的,个别的表单控件自动选用一些大局样式。上边列出了创办基本表单的步子:

向父 <form> 成分添加 role="form"。
把标签和控件放在叁个分包 class .form-group 的 <div> 中。那是赢得最棒间距所供给的。
向具备的文书成分 <input>、<textarea> 和 <select> 增多class .form-control。

<!doctype html>
<html lang="en">
 <head>
 <!--网站编码格式,UTF-8 国际编码,GBK或 gb2312 中文编码-->
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="Keywords" content="关键词一,关键词二">
 <meta name="Description" content="网站描述内容">
 <meta name="Author" content="Yvette Lau">
 <meta name = "viewport" content = " width = device-width, initial-scale = 1 "> 
 <title>BootstrapDemo</title>
 <!--css js 文件的引入-->
 <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css">
 </head>
 <body style="padding: 20px;">
 <div class = "col-xs-12 col-sm-6 col-md-4 col-lg-3">
 <form role = "form">
  <div class = "form-group">
  <label for = "name">姓名</label>
  <input type = "text" class = "form-control" id = "name" 
   placeholder = "请输入姓名"></input>
  </div>
  <div class = "form-group">
  <label for = "tel">电话号码</label>
  <input type="text" class="form-control" id = "tel" 
   placeholder = "请输入您的电话号码"></input>
  </div>
  <div class = "form-group">
  <label for = "idCard">请上传身份证</label>
  <input type = "file" id = "idCard"></input>
  </div>
  <div class = "form-group">
  <label for = "profession">选择职业</label>
  <select id = "profession" class = "form-control">
   <option>软件工程师</option>
   <option>测试工程师</option>
   <option>硬件工程师</option>
   <option>质量分析师</option>
  </select>
  </div>
  <div class="form-group">
  <button type = "submit" class="btn-info btn-lg">提交</button> 
  </div>
 </form>
 </div>
 </body>
</html>

功能如下:

图片 1

要是我们将select的form-control去掉,并给input type = "file"加上form-control,看看效果怎么着。

图片 2

是还是不是能观察和上边效果的不同了呢?那样你大概精通form-control的作用了,它是安装外围的边框效果,包涵宽、高、获取

焦点时form的样式。

内联表单(全体在近似行,display为inline-block)

假设须要创制三个表单,它的兼具因素是内联的,向左对齐的,标签是天公地道的,请向 <form> 标签加多 class .form-inline。
因为head部分的剧情都以风流罗曼蒂克律的,所以大家只列出body部分的从头到尾的经过。

<body style="padding: 20px;">
 <form role = "form" class="form-inline">
 <div class = "form-group">
  <label for = "name">姓名</label>
  <input type = "text" class = "form-control" id = "name" placeholder = "请输入姓名"></input>
 </div>
 <div class = "form-group">
  <label for = "tel">电话号码</label>
  <input type="text" class="form-control" id = "tel" placeholder = "请输入您的电话号码"></input>
 </div>
 <div class = "form-group">
  <label for = "idCard">请上传身份证</label>
  <input type = "file" id = "idCard"></input>
 </div>
 <div class = "form-group">
  <label for = "profession">选择职业</label>
  <select id = "profession" class = "form-control">
  <option>软件工程师</option>
  <option>测试工程师</option>
  <option>硬件工程师</option>
  <option>质量分析师</option>
  </select>
 </div>
 <div class="form-group">
  <button type = "submit" class="btn-info btn-lg">提交</button> 
 </div>
 </form> 
</body>

来得效果:

图片 3

私下认可情况下,Bootstrap 中的 input、select 和 textarea 有 百分百宽度。在运用程度表单时,您须求在表单控件上设置二个幅度。

使用 class .sr-only,可以隐蔽内联表单的价签。 

注:sr-only是显得给显示屏阅读器,而非是千千万万的读者看的。
别的成分在form的class为form-inline时,display为inLine-block;不过input tyoe = "file"却仍为display:block,可以看见其结构是有标题标,那时候能够独自设置其display为inline-block;

水平表单(label和input等表单成分在同生机勃勃行卡塔尔(英语:State of Qatar)

水平表单与其余表单不仅仅标记的数据上区别,何况表单的表现格局也分裂。如需创立三个档期的顺序构造的表单,请按下边包车型大巴多少个步骤举办:

     1、向父 <form> 成分增加 class .form-horizontal。
     2、把标签和控件放在一个蕴涵 class .form-group 的 <div> 中。
     3、向标签加多 class .control-label。
     4、设置label和其兄弟div的上升的幅度(因为input等暗许宽度是100%)。

<body style="padding: 20px;">
 <form role = "form" class="form-horizontal">
 <div class = "form-group">
  <label class="col-sm-2 control-label" for = "name">姓名</label>
  <div class="col-sm-2">
  <input type = "text" class = "form-control" id = "name" 
   placeholder = "请输入姓名"></input>
  </div>
 </div>
 <div class = "form-group">
  <label class="col-sm-2 control-label" for = "tel">电话号码</label>
  <div class="col-sm-2">
  <input type="text" class="form-control" id = "tel" 
   placeholder = "请输入您的电话号码"></input>
  </div>
 </div>
 <div class = "form-group">
  <label class="col-sm-2 control-label" for = "idCard">请上传身份证</label>
  <div class="col-sm-2">
  <input type = "file" id = "idCard" style="display:inline-block;"></input>
  </div>
 </div>
 <div class = "form-group">
  <label class="col-sm-2 control-label" for = "profession">选择职业</label>
  <div class="col-sm-2">
  <select id = "profession" class = "form-control">
   <option>软件工程师</option>
   <option>测试工程师</option>
   <option>硬件工程师</option>
   <option>质量分析师</option>
  </select>
  </div>
 </div>
 <div class="form-group">
 <div class="col-sm-2 col-sm-offset-2">
 <button type = "submit" class="btn-info btn-lg">提交</button>
 </div>  
 </div>
 </form> 
</body>

效果:

图片 4

如上便是本文的全部内容,希望对大家的上学抱有助于,也意在大家多多照看帮客之家。

假诺大家还想深远学习,能够点击这里展开课习,再为大家附五个不错的专项论题:Bootstrap学习课程 Bootstrap实战教程

Bootstrap表单类型分为三种格式: 垂直或骨干表单、内联表单、水平表单 。 垂直或基本表单(display...

在本章中,我们将学习怎么着行使 Bootstrap 创造表单。Bootstrap 通过一些轻便易行的 HTML 标签和扩展的类就能够成立出不一样体制的表单。

笔直或骨干表单基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些大局样式。下边列出了创造基本表单的步调:

Bootstrap表单类型分为三种格式:垂直或骨干表单、内联表单、水平表单。

向父

垂直或骨干表单

后生可畏旦咱们将select的form-control去掉,并给input type = "file"加上form-control,看看效果怎么样。

核心的表单构造是 Bootstrap 自带的,个其余表单控件自动接受一些大局样式。上面列出了创办基本表单的步调:

是不是能看见和地点效果的分别了吧?那样你大概明白form-control的功力了,它是设置外围的边框效果,富含宽、高、获取

向父

焦点时form的样式。

生机勃勃旦大家将select的form-control去掉,并给input type = "file"加上form-control,看看效果怎样。

返回顶部