Bootstrap入门需掌握的知识点(二)
来源:互联网 发布:气象数据同化PDF 编辑:程序博客网 时间:2024/04/29 06:33
相关阅读:
Bootstrap入门需掌握的知识点(一)
转载请务必注明出处:
Bootstrap入门需掌握的知识点(二)
表格
基本实例
为任意 <table>
标签添加 .table
类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。
<table class="table"> ...</table>
条纹状表格
通过 .table-striped
类可以给 <tbody>
之内的每一行增加斑马条纹样式。
<table class="table table-striped"> ...</table>
带边框的表格
添加 .table-bordered
类为表格和其中的每个单元格增加边框。
<table class="table table-bordered"> ...</table>
鼠标悬停
通过添加 .table-hover
类可以让 中的每一行对鼠标悬停状态作出响应。
<table class="table table-hover"> ...</table>
状态类
通过这些状态类可以为行或单元格设置颜色。
.active
鼠标悬停在行或单元格上时所设置的颜色 .success
标识成功或积极的动作 .info
标识普通的提示信息或动作 .warning
标识警告或需要用户注意 .danger
标识危险或潜在的带来负面影响的动作<!-- On rows --><tr class="active">...</tr><tr class="success">...</tr><tr class="warning">...</tr><tr class="danger">...</tr><tr class="info">...</tr><!-- On cells (`td` or `th`) --><tr> <td class="active">...</td> <td class="success">...</td> <td class="warning">...</td> <td class="danger">...</td> <td class="info">...</td></tr>
响应式表格
将任何 .table
元素包裹在 .table-responsive
元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。
<div class="table-responsive"> <table class="table"> ... </table></div>
表单
基本实例
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control
类的 <input>
、<textarea>
和 <select>
元素都将被默认设置宽度属性为 width: 100%;
。 将 label
元素和前面提到的控件包裹在 .form-group
中可以获得最好的排列。
<form role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button></form>
注意:不要将表单组直接和输入框组混合使用,建议将输入框组嵌套到表单组中使用。
内联表单
为 <form>
元素添加 .form-inline
类可使其内容左对齐并且表现为 inline-block
级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。
注意:
需要手动设置宽度
在 Bootstrap 中,输入框和单选/多选框控件默认被设置为
width: 100%;
宽度。在内联表单,我们将这些元素的宽度设置为width: auto;
,因此,多个控件可以排列在同一行。根据你的布局需求,可能需要一些额外的定制化组件。一定要添加
label
标签如果你没有为每个输入控件设置
label
标签,屏幕阅读器将无法正确识别。对于这些内联表单,你可以通过为label
设置.sr-only
类将其隐藏。
<form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-addon">@</div> <input class="form-control" type="email" placeholder="Enter email"> </div> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-default">Sign in</button></form>
水平排列的表单
通过为表单添加 .form-horizontal
类,并联合使用 Bootstrap 预置的栅格类,可以将 label
标签和控件组水平并排布局。这样做将改变 .form-group
的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row
了。
<form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div></form>
被支持的控件
表单布局实例中展示了其所支持的标准表单控件。
1、输入框
包括大部分表单控件、文本输入域控件,还支持所有 HTML5 类型的输入控件:text
、password
、datetime
、datetime-local
、date
、month
、time
、week
、number
、email
、url
、search
、tel
和 color
。
<input type="text" class="form-control" placeholder="Text input">
如需在文本输入域 <input>
前面或后面添加文本内容或按钮控件,请参考输入控件组。
2、文本域
支持多行文本的表单控件。可根据需要改变 rows
属性。
<textarea class="form-control" rows="3"></textarea>
3、多选和单选框
多选框(checkbox)用于选择列表中的一个或多个选项,而单选框(radio)用于从多个选项中只选择一个。
设置了 disabled
属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的 <label>
标签,如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式,请将 .disabled
类赋予 .radio
、.radio-inline
、.checkbox
、.checkbox-inline
或 <fieldset>
。
<div class="checkbox"> <label> <input type="checkbox" value=""> Option one is this and that—be sure to include why it's great </label></div><div class="checkbox disabled"> <label> <input type="checkbox" value="" disabled> Option two is disabled </label></div><div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that—be sure to include why it's great </label></div><div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label></div><div class="radio disabled"> <label> <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Option three is disabled </label></div>
内联单选和多选框
通过将 .checkbox-inline
或 .radio-inline
类应用到一系列的多选框(checkbox)或单选框(radio)控件上,可以使这些控件排列在一行。
<label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1</label><label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 2</label><label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 3</label><label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1</label><label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2</label><label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3</label>
复选框
<div class="checkbox"> <label> <input type="checkbox" id="blankCheckbox" value="option1"> </label></div><div class="radio"> <label> <input type="radio" name="blankRadio" id="blankRadio1" value="option1"> </label></div>
下拉列表(select)
使用默认选项或添加 multiple
属性可以同时显示多个选项。
<select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option></select><select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option></select>
静态控件
如果需要在表单中将一行纯文本和 label
元素放置于同一行,为 <p>
元素添加 .form-control-static
类即可。
<form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <p class="form-control-static">email@example.com</p> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> </div></form>
<form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only">Email</label> <p class="form-control-static">email@example.com</p> </div> <div class="form-group"> <label for="inputPassword2" class="sr-only">Password</label> <input type="password" class="form-control" id="inputPassword2" placeholder="Password"> </div> <button type="submit" class="btn btn-default">Confirm identity</button></form>
输入框焦点
我们将某些表单控件的默认 outline
样式移除,然后对 :focus
状态赋予 box-shadow
属性。
被禁用的输入框
为输入框设置 disabled
属性可以防止用户输入,并能对外观做一些修改,使其更直观。
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
<form role="form"> <fieldset disabled> <div class="form-group"> <label for="disabledTextInput">Disabled input</label> <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> </div> <div class="form-group"> <label for="disabledSelect">Disabled select menu</label> <select id="disabledSelect" class="form-control"> <option>Disabled select</option> </select> </div> <div class="checkbox"> <label> <input type="checkbox"> Can't check this </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </fieldset></form>
只读输入框
为输入框设置 readonly
属性可以禁止用户输入,并且输入框的样式也是禁用状态。
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
校验状态
Bootstrap 对表单控件的校验状态,如 error、warning 和 success 状态,都定义了样式。使用时,添加 .has-warning
、.has-error
或 .has-success
类到这些控件的父元素即可。任何包含在此元素之内的 .control-label
、.form-control
和 .help-block
元素都将接受这些校验状态的样式。
<div class="form-group has-success"> <label class="control-label" for="inputSuccess1">Input with success</label> <input type="text" class="form-control" id="inputSuccess1"></div><div class="form-group has-warning"> <label class="control-label" for="inputWarning1">Input with warning</label> <input type="text" class="form-control" id="inputWarning1"></div><div class="form-group has-error"> <label class="control-label" for="inputError1">Input with error</label> <input type="text" class="form-control" id="inputError1"></div><div class="has-success"> <div class="checkbox"> <label> <input type="checkbox" id="checkboxSuccess" value="option1"> Checkbox with success </label> </div></div><div class="has-warning"> <div class="checkbox"> <label> <input type="checkbox" id="checkboxWarning" value="option1"> Checkbox with warning </label> </div></div><div class="has-error"> <div class="checkbox"> <label> <input type="checkbox" id="checkboxError" value="option1"> Checkbox with error </label> </div></div>
添加额外的图标
你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback
类并添加正确的图标即可。
Feedback icons only work with textual <input class="form-control">
elements.
图标、label
和输入控件组
对于不带有 label
标签的输入框以及右侧带有附加组件的输入框组,需要手动为其图标定位。为了让所有用户都能访问你的网站,我们强烈建议为所有输入框添加 label
标签。如果你不希望将 label
标签展示出来,可以通过添加 sr-only
类来实现。如果的确不能添加 label
标签,请调整图标的 top
值。对于输入框组,请根据你的实际情况调整 right
值。
<div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess2">Input with success</label> <input type="text" class="form-control" id="inputSuccess2"> <span class="glyphicon glyphicon-ok form-control-feedback"></span></div><div class="form-group has-warning has-feedback"> <label class="control-label" for="inputWarning2">Input with warning</label> <input type="text" class="form-control" id="inputWarning2"> <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span></div><div class="form-group has-error has-feedback"> <label class="control-label" for="inputError2">Input with error</label> <input type="text" class="form-control" id="inputError2"> <span class="glyphicon glyphicon-remove form-control-feedback"></span></div>
控件尺寸
通过 .input-lg
类似的类可以为控件设置高度,通过 .col-lg-*
类似的类可以为控件设置宽度。
高度尺寸
创建大一些或小一些的表单控件以匹配按钮尺寸。
<input class="form-control input-lg" type="text" placeholder=".input-lg"><input class="form-control" type="text" placeholder="Default input"><input class="form-control input-sm" type="text" placeholder=".input-sm"><select class="form-control input-lg">...</select><select class="form-control">...</select><select class="form-control input-sm">...</select>
按钮
预定义样式
使用下面列出的类可以快速创建一个带有预定义样式的按钮。
<!-- Standard button --><button type="button" class="btn btn-default">Default</button><!-- Provides extra visual weight and identifies the primary action in a set of buttons --><button type="button" class="btn btn-primary">Primary</button><!-- Indicates a successful or positive action --><button type="button" class="btn btn-success">Success</button><!-- Contextual button for informational alert messages --><button type="button" class="btn btn-info">Info</button><!-- Indicates caution should be taken with this action --><button type="button" class="btn btn-warning">Warning</button><!-- Indicates a dangerous or potentially negative action --><button type="button" class="btn btn-danger">Danger</button><!-- Deemphasize a button by making it look like a link while maintaining button behavior --><button type="button" class="btn btn-link">Link</button>
尺寸
需要让按钮具有不同尺寸吗?使用 .btn-lg
、.btn-sm
或 .btn-xs
可以获得不同尺寸的按钮。
<p> <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-default btn-lg">Large button</button></p><p> <button type="button" class="btn btn-primary">Default button</button> <button type="button" class="btn btn-default">Default button</button></p><p> <button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-default btn-sm">Small button</button></p><p> <button type="button" class="btn btn-primary btn-xs">Extra small button</button> <button type="button" class="btn btn-default btn-xs">Extra small button</button></p>
通过给按钮添加 .btn-block
类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button><button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
激活状态
当按钮处于激活状态时,其表现为被按压下去(底色更深、边框夜色更深、向内投射阴影)。对于 <button>
元素,是通过 :active
状态实现的。对于 <a>
元素,是通过 .active
类实现的。然而,你还可以将 .active
应用到 <button>
上,并通过编程的方式使其处于激活状态。
button 元素
由于 :active
是伪状态,因此无需额外添加,但是在需要让其表现出同样外观的时候可以添加 .active
类。
<button type="button" class="btn btn-primary btn-lg active">Primary button</button><button type="button" class="btn btn-default btn-lg active">Button</button>
链接(<a>
)元素
可以为基于 <a>
元素创建的按钮添加 .active
类。
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a><a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
按钮类
为 <a>
、<button>
或 <input>
元素应用按钮类
<a class="btn btn-default" href="#" role="button">Link</a><button class="btn btn-default" type="submit">Button</button><input class="btn btn-default" type="button" value="Input"><input class="btn btn-default" type="submit" value="Submit">
图片
响应式图片
在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive
类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;
和 height: auto;
属性,从而让图片在其父元素中更好的缩放。
<img src="..." class="img-responsive" alt="Responsive image">
图片形状
通过为 <img>
元素添加以下相应的类,可以让图片呈现不同的形状。
<img src="..." alt="..." class="img-rounded"><img src="..." alt="..." class="img-circle"><img src="..." alt="..." class="img-thumbnail">
- Bootstrap入门需掌握的知识点(二)
- Bootstrap入门需掌握的知识点(一)
- Bootstrap入门基础(二)
- Java初学者入门需掌握的30个基本概念二
- 嵌入式软件开发 必须掌握的知识点(二)(有错还望指点^_^)
- 遗传算法入门到掌握(二)
- 遗传算法入门到掌握(二)
- 遗传算法入门到掌握(二)
- 遗传算法入门到掌握(二)
- 遗传算法入门到掌握(二)
- 遗传算法入门到掌握(二)
- 遗传算法入门到掌握(二)
- 遗传算法入门到掌握(二)
- 遗传算法入门到掌握(二)
- 遗传算法入门到掌握(二)
- 需要掌握的知识点
- 必须掌握的知识点
- 需要掌握的知识点
- 命令模式代码
- python3.5 django 文档相关动作错误及解决办法
- Eclipse调试方法
- CSS单位
- http协议之response响应详解
- Bootstrap入门需掌握的知识点(二)
- iOS APP快照制作最便捷的方式-Brief Wrapper
- Unity3D的坑系列:动态加载dll
- 448. Find All Numbers Disappeared in an Array#2(Done)
- 静态库与共享库
- win操作系统常见操作
- 第二行代码第三章笔记
- OSI参考模型——传输层:TCP、UDP协议详解
- 遍历数组 iterator方法和for方法