jsp网站开发广告位,wordpress建站上海,wordpress自定义页面,创意设计ppt目录
表格二
表单_基础表单
表单_被支持的控件
表单_表单状态 表格二 紧缩表格
通过添加 .table-condensed 类可以让表格更加紧凑#xff0c;单元格中的内补#xff08;padding#xff09;均会减半
table classtable table-condensed table-bordered单元格中的内补padding均会减半
table classtable table-condensed table-borderedtrtd表格/tdtd表格/td/trtrtd表格/tdtd表格/td/trtrtd表格/tdtd表格/td/trtrtd表格/tdtd表格/td/tr
/table状态类 通过这些状态类可以为行或单元格设置颜色 Class 描述.active鼠标悬停在行或单元格上时所设置的颜色.success标识成功或积极的动作.info 标识普通的提示信息或动作.warning标识警告或需要用户注意.danger 标识危险或潜在的带来负面影响的动作
table classtable table-condensed table-borderedtr classactivetd表格/tdtd表格/td/trtr classsuccesstd表格/tdtd表格/td/trtr classwarningtd表格/tdtd表格/td/trtr classdangertd表格/tdtd表格/td/trtr classinfotd表格/tdtd表格/td/tr
/table响应式表格 将任何 .table 元素包裹在 .table-responsive 元素内即可创建响应式表格其会在小屏幕设备上小于768px水平滚动。当屏幕大于768px 宽度时水平滚动条消失
div classtable-responsivetable classtable table-condensed table-borderedtr classactivetd这是一条表格内容数据撑开表格/tdtd这是一条表格内容数据撑开表格/td/trtr classsuccesstd这是一条表格内容数据撑开表格/tdtd这是一条表格内容数据撑开表格/td/trtr classwarningtd这是一条表格内容数据撑开表格/tdtd这是一条表格内容数据撑开表格/td/trtr classdangertd这是一条表格内容数据撑开表格/tdtd这是一条表格内容数据撑开表格/td/trtr classinfotd这是一条表格内容数据撑开表格/tdtd这是一条表格内容数据撑开表格/td/tr/table
/div
表单_基础表单 基本实例 单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 input 、 textarea 和 select 元素都将被默认设置宽度属性为 width: 100%; 。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列
formdiv classform-grouplabel forexampleInputEmail1Emailaddress/labelinput typeemail classform-control idexampleInputEmail1 placeholderEmail/divdiv classform-grouplabel forexampleInputPassword1Password/labelinput typepassword classform-control idexampleInputPassword1 placeholderPassword/divdiv classform-grouplabel forexampleInputFileFile input/labelinput typefile idexampleInputFilep classhelp-blockExample block-level help text here./p/divdiv classcheckboxlabelinput typecheckbox Check me out/label/divbutton typesubmit classbtn btn-defaultSubmit/button
/form
内联表单 为 form 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口viewport至少在 768px 宽度时视口宽度再小的话就会使表单折叠。
form classform-inlinediv classform-grouplabel forexampleInputName2Name/labelinput typetext classform-control idexampleInputName2 placeholderJane Doe/divdiv classform-grouplabel forexampleInputEmail2Email/labelinput typeemail classform-control idexampleInputEmail2 placeholderjane.doeexample.com/divbutton typesubmit classbtn btn-defaultSend invitation/button
/formform classform-inlinediv classform-groupdiv classinput-groupdiv classinput-group-addon$/divinput typetext classform-control idexampleInputAmount placeholderAmountdiv classinput-group-addon.00/div/div/divbutton typesubmit classbtn btn-primaryTransfer cash/button
/form
水平排列的表单 通过为表单添加 .form-horizontal 类并联合使用 Bootstrap 预置的栅格类可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为使其表现为栅格系统中的行row因此就无需再额外添加 .row 了
form classform-horizontaldiv classform-grouplabel forinputEmail3 classcol-sm-2 control-labelEmail/labeldiv classcol-sm-10input typeemail classform-control idinputEmail3 placeholderEmail/div/divdiv classform-grouplabel forinputPassword3 classcol-sm-2 control-labelPassword/labeldiv classcol-sm-10input typepassword classform-control idinputPassword3 placeholderPassword/div/divdiv classform-groupdiv classcol-sm-offset-2 col-sm-10div classcheckboxlabelinput typecheckbox Remember me/label/div/div/divdiv classform-groupdiv classcol-sm-offset-2 col-sm-10button typesubmit classbtn btn-defaultSign in/button/div/div
/form
67
8表单_被支持的控件 表单布局实例中展示了其所支持的标准表单控件
输入框 包括大部分表单控件、文本输入域控件还支持所有 HTML5 类型的输入控件 text 、 password 、 datetime 、 datetime-local 、 date 、 month 、time 、 week 、 number 、 email 、 url 、 search 、 tel 和 color 必须添加类型声明 只有正确设置了 type 属性的输入控件才能被赋予正确的样式。 input typetext classform-control placeholderText input文本域 支持多行文本的表单控件。可根据需要改变 rows 属性
textarea classform-control rows3/textarea多选和单选框 多选框checkbox用于选择列表中的一个或多个选项而单选框radio用于从多个选项中只选择一个
div classcheckboxlabelinput typecheckbox valueOption one is this and thatmdash;be sure to include why its great/label
/div
div classcheckbox disabledlabelinput typecheckbox value disabledOption two is disabled/label
/div
div classradiolabelinput typeradio nameoptionsRadios idoptionsRadios1 valueoption1 checkedOption one is this and thatmdash;be sure to include why its great/label
/div
div classradiolabelinput typeradio nameoptionsRadios idoptionsRadios2 valueoption2Option two can be something else and selecting it will deselect option one/label
/div
div classradio disabledlabelinput typeradio nameoptionsRadios idoptionsRadios3 valueoption3 disabledOption three is disabled/label
/div
下拉列表select 注意很多原生选择菜单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 border-radius 属性来改变的
select classform-controloption1/optionoption2/optionoption3/optionoption4/optionoption5/option
/select静态控件 如果需要在表单中将一行纯文本和 label 元素放置于同一行为 p元素添加 .form-control-static 类即可
form classform-horizontaldiv classform-grouplabel classcol-sm-2 control-labelEmail/labeldiv classcol-sm-10p classform-control-staticemailexample.com/p/div/divdiv classform-grouplabel forinputPassword classcol-sm-2 control-labelPassword/labeldiv classcol-sm-10input typepassword classform-control idinputPassword placeholderPassword/div/div
/form
表单_表单状态 焦点状态 我们将某些表单控件的默认 outline 样式移除然后对 :focus 状态赋予 box-shadow 属性
div classform-groupdiv classcol-sm-10input typepassword classform-control idinputPassword placeholderPassword/div
/div
禁用状态 为输入框设置 disabled 属性可以禁止其与用户有任何交互焦点、输入等。被禁用的输入框颜色更浅并且还添加了 not-allowed 鼠标状态
div classform-groupdiv classcol-sm-10input classform-control iddisabledInput typetext placeholderDisabled input here... disabled/div
/div只读状态 为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅就像被禁用的输入框一样但是仍然保留标准的鼠标状态
input classform-control typetext placeholderReadonly input here… readonly
校验状态 Bootstrap 对表单控件的校验状态如 error、warning 和 success状态都定义了样式。使用时添加 .has-warning 、 .has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label 、 .form-control 和 .help-block 元素都将接受这些校验状态的样式
div classform-group has-successlabel classcontrol-label forinputSuccess1Input with success/labelinput typetext classform-control idinputSuccess1 aria-describedbyhelpBlock2
/div
div classform-group has-warninglabel classcontrol-label forinputWarning1Input with warning/labelinput typetext classform-control idinputWarning1
/div
div classform-group has-errorlabel classcontrol-label forinputError1Input with error/labelinput typetext classform-control idinputError1
/div控件尺寸 通过 .input-lg 类似的类可以为控件设置高度通过 .col-lg-* 类似的类可以为控件设置宽度
input classform-control input-lg typetext placeholder.input-lg
input classform-control typetext placeholderDefault input
input classform-control input-sm typetext placeholder.input-sm
