网站改版后多久才收录,网站接入服务 公司,外贸网站源代码下载,网站用哪个软件做本文主要讲解的是表单#xff0c;这个其实对于做过网站的人来说#xff0c;并不陌生#xff0c;而且可以说是最为常用的提交数据的Form表单。本文主要来讲解一下内容#xff1a; 1.基本案例2.内联表单3.水平排列的表单4.被支持的控件5.静态控件6.控件状态7.控件尺寸8.帮助文…本文主要讲解的是表单这个其实对于做过网站的人来说并不陌生而且可以说是最为常用的提交数据的Form表单。本文主要来讲解一下内容 1.基本案例2.内联表单3.水平排列的表单4.被支持的控件5.静态控件6.控件状态7.控件尺寸8.帮助文本 基本案例 单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的input、textarea和select元素都将被默认设置为width: 100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列。 form roleform div classform-group label forexampleInputEmail1Email address/label input typeemail classform-control idexampleInputEmail1 placeholderEnter email /div div classform-group label forexampleInputPassword1Password/label input typepassword classform-control idexampleInputPassword1 placeholderPassword /div div classform-group label forexampleInputFileFile input/label input typefile idexampleInputFile p classhelp-blockExample block-level help text here./p /div div classcheckbox label input typecheckbox Check me out /label /div button typesubmit classbtn btn-defaultSubmit/button /form 两个文本框的宽度的确为100%。并且有三个form-group。 内联表单为左对齐和inline-block级别的控件设置.form-inline可以将其排布的更紧凑。需要设置宽度在Bootstrap中,input、select和textarea默认被设置为100%宽度。为了使用内联表单你需要专门为使用到的表单控件设置宽度。 一定要设置label:如果你没有为每个输入控件设置label,屏幕阅读器将无法正确识读。对于这些内联表单,你可以通过为label设置.sr-only已将其隐藏。 form classform-inline roleform div classform-group label classsr-only forexampleInputEmail2Email address/label input typeemail classform-control idexampleInputEmail2 placeholderEnter email /div div classform-group label classsr-only forexampleInputPassword2Password/label input typepassword classform-control idexampleInputPassword2 placeholderPassword /div div classcheckbox label input typecheckbox Remember me /label /div button typesubmit classbtn btn-defaultSign in/button /form 水平排列的表单 通过为表单添加.form-horizontal并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变.form-group的行为使其表现为栅格系统中的行row因此就无需再使用.row了。 form classform-horizontal roleform div classform-group label forinputEmail3 classcol-sm-2 control-labelEmail/label div classcol-sm-10 input typeemail classform-control idinputEmail3 placeholderEmail /div /div div classform-group label forinputPassword3 classcol-sm-2 control-labelPassword/label div classcol-sm-10 input typepassword classform-control idinputPassword3 placeholderPassword /div /div div classform-group div classcol-sm-offset-2 col-sm-10 div classcheckbox label input typecheckbox Remember me /label /div /div /div div classform-group div classcol-sm-offset-2 col-sm-10 button typesubmit classbtn btn-defaultSign in/button /div /div /form 被支持的控件在表单布局案例中展示了其所支持的标准表单控件。Input大部分表单控件、文本输入域控件。包括HTML5支持的所有类型text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。注意有正确设置了type的input控件才能被赋予正确的样式。文本框示例 input typetext classform-control placeholderText input Textarea支持多行文本的表单控件。可根据需要改变rows属性。 h1textarea/h1 textarea classform-control rows3/textarea Checkbox 和 radioCheckbox用于选择列表中的一个或多个选项而radio用于从多个选项中只选择一个。默认外观(堆叠在一起) div classcheckbox label input typecheckbox value sure to include why its great /label /div div classradio label input typeradio nameoptionsRadios idoptionsRadios1 valueoption1 checked include why its great /label /div div classradio label input typeradio nameoptionsRadios idoptionsRadios2 valueoption2 and selecting it will deselect option one /label /div Inline checkboxes 通过将.checkbox-inline 或 .radio-inline应用到一系列的checkbox或radio控件上可以使这些控件排列在一行。 label classcheckbox-inline input typecheckbox idinlineCheckbox1 valueoption1 1 /label label classcheckbox-inline input typecheckbox idinlineCheckbox2 valueoption2 2 /label label classcheckbox-inline input typecheckbox idinlineCheckbox3 valueoption3 3 /label 同理Radio是一样的只需要添加一下样式即可。 select classform-control option1/option option2/option option3/option option4/option option5/option /select select multiple classform-control option1/option option2/option option3/option option4/option option5/option /select 静态控件 在水平布局的表单中如果需要将一行纯文本放置于label的同一行为p元素添加.form-control-static即可。 form classform-horizontal roleform div classform-group label classcol-sm-2 control-labelEmail/label div classcol-sm-10 p classform-control-staticemailexample.com/p /div /div div classform-group label forinputPassword classcol-sm-2 control-labelPassword/label div classcol-sm-10 input typepassword classform-control idinputPassword placeholderPassword /div /div /form 控件状态 通过为控件和label设置一些基本状态可以为用户提供回馈。 输入焦点 我们移除了某些表单控件的默认outline样式并对其:focus状态赋予了box-shadow样式。 input classform-control idfocusedInput typetext valueThis is focused... 被禁用的输入框 为输入框设置disabled属性可以防止用户输入并能改变一点外观使其更直观。 input classform-control iddisabledInput typetext placeholderDisabled input here... disabled 被禁用的fieldset 为fieldset设置disabled属性可以禁用fieldset中包含的所有控件。a标签的链接功能不受影响 这个class只改变a classbtn btn-default按钮的外观并不能禁用其功能。建议自己通过JavaScript代码禁用链接功能。 跨浏览器兼容性 虽然Bootstrap会将这些样式应用到所有浏览器上Internet Explorer 9及以下浏览器中的fieldset并不支持disabled属性。因此建议在这些浏览器上通过JavaScript代码来禁用fieldset form roleform fieldset disabled div classform-group label fordisabledTextInputDisabled input/label input typetext iddisabledTextInput classform-control placeholderDisabled input /div div classform-group label fordisabledSelectDisabled select menu/label select iddisabledSelect classform-control optionDisabled select/option /select /div div classcheckbox label input typecheckbox Cant check this /label /div button typesubmit classbtn btn-primarySubmit/button /fieldset /form 可将鼠标移到各个控件上进行查看效果。校验状态Bootstrap对表单控件的校验状态如error、warning和success状态都定义了样式。使用时添加.has-warning、.has-error或.has-success到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control和.help-block都将接受这些校验状态的样式。 div classform-group has-success label classcontrol-label forinputSuccessInput with success/label input typetext classform-control idinputSuccess /div div classform-group has-warning label classcontrol-label forinputWarningInput with warning/label input typetext classform-control idinputWarning /div div classform-group has-error label classcontrol-label forinputErrorInput with error/label input typetext classform-control idinputError /div 控件尺寸通过.input-lg之类的class可以为控件设置高度通过.col-lg-*之类的class可以为控件设置宽度。高度尺寸创建大一些或小一些的表单控件以匹配按钮尺寸。 input classform-control input-lg typetext placeholder.input-lg input classform-control typetext placeholderDefault input input classform-control input-sm typetext placeholder.input-sm select classform-control input-lg.../select select classform-control.../select select classform-control input-sm.../select 调整列尺寸用栅格系统中的列包裹input或其任何父元素都可很容易的为其设置宽度。 div classrow div classcol-xs-2 input typetext classform-control placeholder.col-xs-2 /div div classcol-xs-3 input typetext classform-control placeholder.col-xs-3 /div div classcol-xs-4 input typetext classform-control placeholder.col-xs-4 /div /div 帮助文本 用于表单控件的块级帮助文本。 span classhelp-block自己独占一行或多行的块级帮助文本。/span 转载于:https://www.cnblogs.com/gsydw/p/7008083.html
