位置: 编程技术 - 正文

详解Bootstrap创建表单的三种格式(一)(bootstrapping怎么做)

编辑:rootadmin

推荐整理分享详解Bootstrap创建表单的三种格式(一)(bootstrapping怎么做),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:bootstrap创建表格,bootstrap搭建,bootstrapping怎么做,bootstrap创建表格,bootstrap创建一个网页,bootstrap怎么用,bootstrap怎么用,bootstrap创建一个网页,内容如对您有帮助,希望把文章链接给更多的朋友!

在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。

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

垂直或基本表单(display:block;)

基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:

向父 <form> 元素添加 role="form"。

把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。

向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。

效果如下:

如果我们将select的form-control去掉,并给input type = "file"加上form-control,看看效果如何。

是不是能看出和上面效果的区别了呢?这样您大概明白form-control的作用了,它是设置外围的边框效果,包括宽、高、获取焦点时form的样式。

内联表单(全部在同一行,display为inline-block)

详解Bootstrap创建表单的三种格式(一)(bootstrapping怎么做)

如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,请向 <form> 标签添加 class .form-inline。

因为head部分的内容都是一样的,所以我们只列出body部分的内容。

显示效果:

默认情况下,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等表单元素在同一行)

水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同。如需创建一个水平布局的表单,请按下面的几个步骤进行:

1、向父 <form> 元素添加 class .form-horizontal。 2、把标签和控件放在一个带有 class .form-group 的 <div> 中。 3、向标签添加 class .control-label。 4、设置label和其兄弟div的宽度(因为input等默认宽度是%)。

效果:

以上内容给大家介绍了Bootstrap创建表单的相关内容,希望大家喜欢。

学习javascript面向对象 理解javascript原型和原型链 先看一张图,梳理梳理。一、基本概念【原型链】每个构造函数都有一个对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型

详解Bootstrap四种图片样式 在本章中,我们将学习Bootstrap对图片的支持。Bootstrap提供了四个可对图片应用简单样式的class,分别是:img-rounded添加border-radius:6px来获得图片圆角img-circ

详解Bootstrap按钮 描述BootstrapButton(按钮)JavaScript插件允许您加强按钮的功能。您可以控制按钮的状态,也可以为组件创建按钮组,比如工具条。什么是必需的您必须引

标签: bootstrapping怎么做

本文链接地址:https://www.jiuchutong.com/biancheng/384692.html 转载请保留说明!

上一篇:学习javascript面向对象 实例讲解面向对象选项卡(javascript学到什么程度)

下一篇:学习javascript面向对象 理解javascript原型和原型链(javascript怎么学好)

  • 房地产企业什么时候开具正式发票
  • 微信支付宝等三方支付平台余额属于货币资金吗
  • 股东退股退本金及利润
  • 收据怎么粘贴在费用报销单上
  • 预缴税款什么时候可以手动填写申报表
  • 跨境电商的钱怎么到账
  • 房屋租赁合同印花税谁交
  • 工会经费如何做会计分录科目
  • 暂估入库已结转怎么处理
  • 契税的发票开错了还可以作废吗?
  • 购房40%税款第二年抵扣如何做账
  • 药品回扣2021
  • 承包租赁成本明细表的预算项目
  • 购货方销售折让的会计处理
  • 补提固定资产折旧账务处理
  • 个人非货币性资产出资 个人所得税
  • 发票丢失联次
  • 支付给供应商的现金属于什么活动
  • 去年盈利今年亏损怎么表达
  • 增值税的附加税有哪些,税费多少
  • 债务重组收益会计处理
  • 制作广告费用
  • 做内账收入含税吗
  • bitlocker功能
  • 标准差怎么算 例题
  • php处理ajax
  • 多收不用退的货物怎么办
  • 房地产企业将开什么发票
  • php rewind
  • php bcsub
  • 奥维尔的瓦兹河岸
  • 会计学中的折旧是什么意思
  • python网络爬虫技术
  • php批量上传
  • 职教费可以抵扣进项么
  • 前端大佬都有谁
  • 增值税发票已经认证了,但是税票原票没给,会有什么后果
  • 总包缴税
  • 非流动资产基金对应的新科目
  • 企业改制资产整合过程中涉及的土地增值税
  • 长期待摊费用的账务处理
  • 代开专票时缴纳的增值税账务处理如何做?
  • 合并报表少数股东权益是什么
  • 进项税额转出会计分录
  • 递延所得税资产和负债怎么计算
  • 未开票收入申报有税务风险吗
  • 个人所得税缴纳标准怎么计算
  • 租入的厂房
  • 没有发票如何做会计分录
  • 信用卡账单最低还款额是什么意思
  • 企业对外借款是什么意思
  • 现金支付的范围包括
  • 坏账准备的会计分录例题
  • 纳税申报准备什么材料
  • 弥补上年亏损所需的资金
  • mysql两种安装方式
  • sqlserver分页查询
  • solaris查找文件命令
  • Win10怎么显示我的电脑
  • linux ssh免密码
  • windows安装服务器
  • linux虚拟机怎么调出命令行
  • centos 6.0
  • centos如何操作
  • 微软宣布
  • windows 10 正式版
  • 浅谈特殊儿童的融合教育论文
  • 卸载安装软件
  • python安装numpy和matplotlib
  • cocos2dx-js
  • opengl glu
  • linux timeline
  • 使用shell命令
  • javascript操作dom对象
  • html lang属性
  • 基于JavaScript的网页代码
  • 冒烟测试和接口测试
  • python函数参数的传递方法
  • 百度地图一口价为什么还多收费
  • 进出口货物的报关时限
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设