首页 > html教程 > 正文

Bootstrap学习之表单格式与字体图标

转载 2018-10-13 17:41:25 0 297
赞助会员专享特权
本篇文章就给大家介绍BootStrap中的列表组组件,面板组件,响应式嵌入组件。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。如果大家想要学习和获取更多的bootstrap相关视频教程也可以访问:bootstrap教程

表单格式

.form-group :表单组(label 标签和输入框尽量使用这个类包围起来)

.form-control:给input,textarea 和 select 元素都将被默认设置宽度属性为width:100% 圆角边框

.form-inline :内联表单,是给 form 这个标签设置的,让里面的框变为值水平排列

.form-horizontal:水平排列的表单,通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了

.sr-only :它是主要给 label 来设置,将 label 隐藏起来

一个简单的登陆框

		<p class="container">
			<form action="#" method="post" class="form-horizontal">
				<p class="form-group">
				<label for="user" class="col-lg-2 control-label">用户名</label>
				<p class="col-lg-10"><input type="text" name="user" id="user" value="" class="form-control" /></p>
				</p>
				<p class="form-group">
				<label for="pd" class="col-lg-2 control-label">密码</label> 
				<p class="col-lg-10"><input type="password" name="pd" id="pd" value="" class="form-control" /></p>
				</p>
				<p class="form-group col-lg-5 col-lg-offset-5">
				<p class="col-lg-5 col-lg-offset-5"">
				<input type="checkbox" name="" id="cx" value="" />
				<label for="cx">是否同意</label>
				</p>
				<p class="col-lg-2 col-lg-offset-5">
				<button type="submit" class="btn btn-success">提交</button>
				</p>
			</form>
		</p>

这里的 control-label 是给 label 同步 input 的样式

字体图标

出于性能的考虑,所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意,为了设置正确的内补(padding),务必在图标和文本之间添加一个空格。具体字体图标,请访问Bootstrap中文网(https://v3.bootcss.com/components/)查询。

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。

以上就是Bootstrap学习之表单格式与字体图标的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:表单 字体图标 Bootstrap
  • 本文转载于:CSDN,如有侵犯,请联系删除
  • 相关文章


  • BootStrap glyphicons 字体图标实现方法_javascript技巧
  • bootstrap字体图标_html/css_WEB-ITnose
  • Bootstrap组件之Glyphicons字体图标_html/css_WEB-ITnose
  • 详解字体图标制作的方法
  • Bootstrap学习之表单格式与字体图标
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    作者信息

    青灯夜游

    今天学习一小步,明天提升一大步

    最近文章
    C#和C ++的区别是什么 744
    java中wait()和join()方法的区别是什么 780
    JavaScript 提升(Hoisting)是什么 373

    相关视频教程

  • bootstrap响应式开发教程 bootstrap响应式开发教程
  • 李炎恢bootstrap视频教程 李炎恢bootstrap视频教程
  • 快速入手BootStrap视频教程 快速入手BootStrap视频教程
  • BootStrap插件讲解视频教程 BootStrap插件讲解视频教程
  • BootStrap经典案例分析 BootStrap经典案例分析
  • 相关视频章节