网站建设应重视后期的服务和维护,百度95099如何转人工,辽宁seo推广公司,河北省建设集团有限公司网站目录
【一】Bootstrap介绍
【二】Bootstrap引入
【1】CDN加速链接
【2】注意
【三】布局容器
【四】栅格系统
【五】栅格参数
【六】列偏移
【七】排版
标题
内联文本元素
对齐
改变大小写
引用
列表
【八】表格
基本实例
条纹状表格
带边框的表格
鼠标悬停…目录
【一】Bootstrap介绍
【二】Bootstrap引入
【1】CDN加速链接
【2】注意
【三】布局容器
【四】栅格系统
【五】栅格参数
【六】列偏移
【七】排版
标题
内联文本元素
对齐
改变大小写
引用
列表
【八】表格
基本实例
条纹状表格
带边框的表格
鼠标悬停
紧缩表格
状态类
【九】表单标签
基本实例
内联表单
水平排列的表单
文本域
多选和单选框
内联单选和多选框
下拉列表select
静态控件
禁用状态
只读状态
校验状态
控件尺寸
【十】按钮
可作为按钮使用的标签或元素
预定义样式
尺寸
【十一】图片 图片形状 颜色
【十二】辅助类
【十三】组件 前端框架Bootstrap 该框架已经帮我们写好了很多页面样式如果需要使用只需要下载对应文件 直接CV拷贝即可 在使用Bootstrap的时候所有的页面样式只需要通过修改class属性来调节即可 【一】Bootstrap介绍
Bootstrap是一个开源的前端框架用于快速构建响应式和移动设备优先的网站或应用程序。 它包含了HTML、CSS和JavaScript的模板和工具集使开发人员能够快速地创建具有一致性和现代外观的页面布局和UI组件。Bootstrap最初由Twitter的一些工程师创建旨在简化Web开发的过程。 它提供了一个广泛的预定义样式和组件库可以轻松自定义和扩展以满足各种需求。使用Bootstrap开发人员可以更加专注于网站或应用程序的功能和逻辑而不必从头开始编写CSS样式和设计页面布局。 它提供了响应式布局的支持使得页面能够自适应不同的设备和屏幕尺寸。此外Bootstrap还提供了丰富的UI组件(如导航栏、按钮、表单、模态框等)使开发人员能够轻松地在项目中使用这些现成的组件。总而言之Bootstrap是一个强大的开发工具可帮助开发人员快速搭建出现代化和具备自适应能力的网站或应用程序。
【二】Bootstrap引入 总官网Bootstrap中文网 Bootstrap v3 支持 IE8 浏览器依赖 jQueryBootstrap v4 支持 IE10 浏览器支持 Flexbox 布局不依赖 jQueryBootstrap v5 支持 Flexbox 布局支持 Grid 布局支持 CSS 自定义属性不依赖 jQuery不支持 IE 浏览器 中文文档查询https://v3.bootcss.com/ 【1】CDN加速链接
twitter-bootstrap (v5.2.3) - Bootstrap 是全球最受欢迎的前端组件库用于开发响应式布局、移动设备优先的 WEB 项目。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
压缩文档链接引入
https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.csshttps://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js
【2】注意
网络连接引入在本地不会提示相关的补充下载本地文档较为友好 script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/script Bootstrap的js代码是基于jQuery的 在使用bootstrap做动态效果时一定要引入jQuery!!! 【三】布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意由于 padding 等属性的原因这两种容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
div classcontainer...
/div
.container-fluid 类用于 100% 宽度占据全部视口viewport的容器。
div classcontainer-fluid...
/div
实例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/scriptlink relstylesheet hrefbootstrap-3.4.1-dist/css/bootstrap.min.cssscript srcbootstrap-3.4.1-dist/js/bootstrap.min.js/scriptstyle.c1 {height: 100px;border: 2px solid black;}/style
/head
body
div classc1 container !--有留白--/divdiv classc1 container-fluid !--没有留白--/div
/body
/html
【四】栅格系统
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!-- CDN 链接 引入方法 --script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/scriptlink relstylesheet hrefbootstrap-3.4.1-dist/css/bootstrap.min.cssscript srcbootstrap-3.4.1-dist/js/bootstrap.min.js/scriptstyle.c1 {height: 100px;border: 4px solid black;}/style/head
bodydiv classcontainerdiv classrowdiv classcol-md-1 c1/divdiv classcol-md-1 c1/divdiv classcol-md-1 c1/divdiv classcol-md-1 c1/divdiv classcol-md-1 c1/divdiv classcol-md-1 c1/divdiv classcol-md-1 c1/divdiv classcol-md-1 c1/divdiv classcol-md-1 c1/divdiv classcol-md-1 c1/divdiv classcol-md-1 c1/divdiv classcol-md-1 c1/divdiv classcol-md-6 c1/divdiv classcol-md-6 c1/div/div/div/body
/html div classrow 写一个 row 就是将所在区域划分成 12 份 div classcol-md-6 c1/div 写一个 col-md-6 获取想要的份数 【五】栅格参数
超小屏幕 手机 (768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)栅格系统行为总是水平排列开始是堆叠在一起的当大于这些阈值时将变为水平排列C.container 最大宽度None 自动750px970px1170px类前缀.col-xs-.col-sm-.col-md-.col-lg-列column数12最大列column宽自动~62px~81px~97px槽gutter宽30px 每列左右均有 15px可嵌套是偏移Offsets是列排序是 针对不同的显示器要加上不同的参数 【六】列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。
div classcontainerdiv classrowdiv classc1 col-md-1/divdiv classc1 col-md-1/divdiv classc1 col-md-1/divdiv classc1 col-md-1/divdiv classc1 col-md-1/divdiv classc1 col-md-1/divdiv classc1 col-md-1/divdiv classc1 col-md-1/divdiv classc1 col-md-1/divdiv classc1 col-md-1/divdiv classc1 col-md-1/divdiv classc1 col-md-1/divdiv classcol-md-8 c1 col-md-offset-4/div/div
/div 【七】排版
标题
HTML 中的所有标题标签h1 到 h6 均可使用。另外还提供了 .h1 到 .h6 类为的是给内联inline属性的文本赋予标题的样式。
h1h1. Bootstrap heading/h1
h2h2. Bootstrap heading/h2
h3h3. Bootstrap heading/h3
h4h4. Bootstrap heading/h4
h5h5. Bootstrap heading/h5
h6h6. Bootstrap heading/h6 在标题内还可以包含 small 标签或赋予 .small 类的元素可以用来标记副标题。
h1h1. Bootstrap heading smallSecondary text/small/h1
h2h2. Bootstrap heading smallSecondary text/small/h2 内联文本元素 标记高亮显示文本 使用mark标签 You can use the mark tag to markhighlight/mark text. 被删除的文本 对于被删除的文本使用del标签。 delThis line of text is meant to be treated as deleted text./del 插入文本 额外插入的文本使用ins标签。 insThis line of text is meant to be treated as an addition to the document./ins 带下划线的文本 为文本添加下划线使用u标签。 uThis line of text will render as underlined/u 着重 通过增加 font-weight 值强调一段文本。 strongrendered as bold text/strong 斜体 用斜体强调一段文本。 emrendered as italicized text/em 对齐
p classtext-leftLeft aligned text./p
p classtext-centerCenter aligned text./p
p classtext-rightRight aligned text./p
p classtext-justifyJustified text./p
p classtext-nowrapNo wrap text./p 改变大小写
p classtext-lowercaseLowercased text./p
p classtext-uppercaseUppercased text./p
p classtext-capitalizeCapitalized text./p 引用
在你的文档中引用其他来源的内容。
默认样式的引用
将任何HTML元素包裹在blockquote中即可表现为引用样式。对于直接引用我们建议用p标签。
blockquotepLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante./p
/blockquote 列表
无序列表 排列顺序无关紧要的一列元素。
ulli.../li
/ul Lorem ipsum dolor sit ametConsectetur adipiscing elitInteger molestie lorem at massaFacilisis in pretium nisl aliquetNulla volutpat aliquam velit Phasellus iaculis nequePurus sodales ultriciesVestibulum laoreet porttitor semAc tristique libero volutpat atFaucibus porta lacus fringilla velAenean sit amet erat nuncEget porttitor lorem 有序列表 顺序至关重要的一组元素。
olli.../li
/ol Lorem ipsum dolor sit ametConsectetur adipiscing elitInteger molestie lorem at massaFacilisis in pretium nisl aliquetNulla volutpat aliquam velitFaucibus porta lacus fringilla velAenean sit amet erat nuncEget porttitor lorem 无样式列表 移除了默认的list-style样式和左侧外边距的一组元素只针对直接子元素。这是针对直接子元素的也就是说你需要对所有嵌套的列表都添加这个类才能具有同样的样式。
ul classlist-unstyledli.../li
/ul 内联列表 通过设置display: inline-block;并添加少量的内补padding将所有元素放置于同一行。
ul classlist-inlineli.../li
/ul Lorem ipsum Phasellus iaculis Nulla volutpat 【八】表格
基本实例
为任意table标签添加.table类可以为其赋予基本的样式 — 少量的内补padding和水平方向的分隔线。这种方式看起来很多余但是我们觉得表格元素使用的很广泛如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件所以我们选择将此样式独立出来。
table classtable...
/table 条纹状表格
通过.table-striped类可以给tbody之内的每一行增加斑马条纹样式。
table classtable table-striped...
/table 带边框的表格
添加.table-bordered类为表格和其中的每个单元格增加边框。
table classtable table-bordered...
/table
#First NameLast NameUsername1MarkOttomdo2JacobThorntonfat3Larrythe Birdtwitter
鼠标悬停
通过添加.table-hover类可以让tbody中的每一行对鼠标悬停状态作出响应。
table classtable table-hover...
/table
#First NameLast NameUsername1MarkOttomdo2JacobThorntonfat3Larrythe Birdtwitter
紧缩表格
通过添加.table-condensed类可以让表格更加紧凑单元格中的内补padding均会减半。
table classtable table-condensed...
/table
#First NameLast NameUsername1MarkOttomdo2JacobThorntonfat3Larry the Birdtwitter
状态类
通过这些状态类可以为行或单元格设置颜色。
Class描述.active鼠标悬停在行或单元格上时所设置的颜色.success标识成功或积极的动作.info标识普通的提示信息或动作.warning标识警告或需要用户注意.danger标识危险或潜在的带来负面影响的动作
!-- On rows --
tr classactive.../tr
tr classsuccess.../tr
tr classwarning.../tr
tr classdanger.../tr
tr classinfo.../tr!-- On cells (td or th) --
trtd classactive.../tdtd classsuccess.../tdtd classwarning.../tdtd classdanger.../tdtd classinfo.../td
/tr
【九】表单标签
基本实例
单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的input、textarea和select元素都将被默认设置宽度属性为width: 100%;。 将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列。
formdiv classform-grouplabel forexampleInputEmail1Email address/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
/form form classform-inlinediv classform-grouplabel classsr-only forexampleInputEmail3Email address/labelinput typeemail classform-control idexampleInputEmail3 placeholderEmail/divdiv classform-grouplabel classsr-only forexampleInputPassword3Password/labelinput typepassword classform-control idexampleInputPassword3 placeholderPassword/divdiv classcheckboxlabelinput typecheckbox Remember me/label/divbutton typesubmit classbtn btn-defaultSign in/button
/form form classform-inlinediv classform-grouplabel classsr-only forexampleInputAmountAmount (in dollars)/labeldiv 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 文本域
支持多行文本的表单控件。可根据需要改变 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
/divdiv 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
内联单选和多选框
通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框checkbox或单选框radio控件上可以使这些控件排列在一行。
label classcheckbox-inlineinput typecheckbox idinlineCheckbox1 valueoption1 1
/label
label classcheckbox-inlineinput typecheckbox idinlineCheckbox2 valueoption2 2
/label
label classcheckbox-inlineinput typecheckbox idinlineCheckbox3 valueoption3 3
/labellabel classradio-inlineinput typeradio nameinlineRadioOptions idinlineRadio1 valueoption1 1
/label
label classradio-inlineinput typeradio nameinlineRadioOptions idinlineRadio2 valueoption2 2
/label
label classradio-inlineinput typeradio nameinlineRadioOptions idinlineRadio3 valueoption3 3
/label 下拉列表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 禁用状态
为输入框设置 disabled 属性可以禁止其与用户有任何交互焦点、输入等。被禁用的输入框颜色更浅并且还添加了 not-allowed 鼠标状态。
input classform-control iddisabledInput typetext placeholderDisabled input here... disabled 只读状态
为输入框设置 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-describedbyhelpBlock2span idhelpBlock2 classhelp-blockA block of help text that breaks onto a new line and may extend beyond one line./span
/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
div classhas-successdiv classcheckboxlabelinput typecheckbox idcheckboxSuccess valueoption1Checkbox with success/label/div
/div
div classhas-warningdiv classcheckboxlabelinput typecheckbox idcheckboxWarning valueoption1Checkbox with warning/label/div
/div
div classhas-errordiv classcheckboxlabelinput typecheckbox idcheckboxError valueoption1Checkbox with error/label/div
/div 添加额外的图标
你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。
反馈图标feedback icon只能使用在文本输入框 input classform-control 元素上。
div classform-group has-success has-feedbacklabel classcontrol-label forinputSuccess2Input with success/labelinput typetext classform-control idinputSuccess2 aria-describedbyinputSuccess2Statusspan classglyphicon glyphicon-ok form-control-feedback aria-hiddentrue/spanspan idinputSuccess2Status classsr-only(success)/span
/div
div classform-group has-warning has-feedbacklabel classcontrol-label forinputWarning2Input with warning/labelinput typetext classform-control idinputWarning2 aria-describedbyinputWarning2Statusspan classglyphicon glyphicon-warning-sign form-control-feedback aria-hiddentrue/spanspan idinputWarning2Status classsr-only(warning)/span
/div
div classform-group has-error has-feedbacklabel classcontrol-label forinputError2Input with error/labelinput typetext classform-control idinputError2 aria-describedbyinputError2Statusspan classglyphicon glyphicon-remove form-control-feedback aria-hiddentrue/spanspan idinputError2Status classsr-only(error)/span
/div
div classform-group has-success has-feedbacklabel classcontrol-label forinputGroupSuccess1Input group with success/labeldiv classinput-groupspan classinput-group-addon/spaninput typetext classform-control idinputGroupSuccess1 aria-describedbyinputGroupSuccess1Status/divspan classglyphicon glyphicon-ok form-control-feedback aria-hiddentrue/spanspan idinputGroupSuccess1Status classsr-only(success)/span
/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-smselect classform-control input-lg.../select
select classform-control.../select
select classform-control input-sm.../select
水平排列的表单组的尺寸
通过添加 .form-group-lg 或 .form-group-sm 类为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。
form classform-horizontaldiv classform-group form-group-lglabel classcol-sm-2 control-label forformGroupInputLargeLarge label/labeldiv classcol-sm-10input classform-control typetext idformGroupInputLarge placeholderLarge input/div/divdiv classform-group form-group-smlabel classcol-sm-2 control-label forformGroupInputSmallSmall label/labeldiv classcol-sm-10input classform-control typetext idformGroupInputSmall placeholderSmall input/div/div
/form
调整列column尺寸
用栅格系统中的列column包裹输入框或其任何父元素都可很容易的为其设置宽度。
div classrowdiv classcol-xs-2input typetext classform-control placeholder.col-xs-2/divdiv classcol-xs-3input typetext classform-control placeholder.col-xs-3/divdiv classcol-xs-4input typetext classform-control placeholder.col-xs-4/div
/div 【十】按钮
可作为按钮使用的标签或元素
为 a、button 或 input 元素添加按钮类button class即可使用 Bootstrap 提供的样式。
a classbtn btn-default href# rolebuttonLink/a
button classbtn btn-default typesubmitButton/button
input classbtn btn-default typebutton valueInput
input classbtn btn-default typesubmit valueSubmit 预定义样式
使用下面列出的类可以快速创建一个带有预定义样式的按钮。
!-- Standard button --
button typebutton classbtn btn-default默认样式Default/button!-- Provides extra visual weight and identifies the primary action in a set of buttons --
button typebutton classbtn btn-primary首选项Primary/button!-- Indicates a successful or positive action --
button typebutton classbtn btn-success成功Success/button!-- Contextual button for informational alert messages --
button typebutton classbtn btn-info一般信息Info/button!-- Indicates caution should be taken with this action --
button typebutton classbtn btn-warning警告Warning/button!-- Indicates a dangerous or potentially negative action --
button typebutton classbtn btn-danger危险Danger/button!-- Deemphasize a button by making it look like a link while maintaining button behavior --
button typebutton classbtn btn-link链接Link/button
尺寸
需要让按钮具有不同尺寸吗使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
pbutton typebutton classbtn btn-primary btn-lg大按钮Large button/buttonbutton typebutton classbtn btn-default btn-lg大按钮Large button/button
/p
pbutton typebutton classbtn btn-primary默认尺寸Default button/buttonbutton typebutton classbtn btn-default默认尺寸Default button/button
/p
pbutton typebutton classbtn btn-primary btn-sm小按钮Small button/buttonbutton typebutton classbtn btn-default btn-sm小按钮Small button/button
/p
pbutton typebutton classbtn btn-primary btn-xs超小尺寸Extra small button/buttonbutton typebutton classbtn btn-default btn-xs超小尺寸Extra small button/button
/p 通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度而且按钮也变为了块级block元素。
button typebutton classbtn btn-primary btn-lg btn-block块级元素Block level button/button
button typebutton classbtn btn-default btn-lg btn-block块级元素Block level button/button 【十一】图片
响应式图片
在 Bootstrap 版本 3 中通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性从而让图片在其父元素中更好的缩放。
img src... classimg-responsive altResponsive image
图片形状
通过为 img 元素添加以下相应的类可以让图片呈现不同的形状。
img src222.png alt... classimg-rounded
img src222.png alt... classimg-circle
img src222.png alt... classimg-thumbnail 颜色
p classbg-primary.../p
p classbg-success.../p
p classbg-info.../p
p classbg-warning.../p
p classbg-danger.../p
【十二】辅助类
情境文本颜色 通过颜色来展示意图Bootstrap 提供了一组工具类。这些类可以应用于链接并且在鼠标经过时颜色可以还可以加深就像默认的链接一样。
p classtext-muted.../p
p classtext-primary.../p
p classtext-success.../p
p classtext-info.../p
p classtext-warning.../p
p classtext-danger.../p
情境背景色 和情境文本颜色类一样使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深就像上面所讲的情境文本颜色类一样。
p classbg-primary.../p
p classbg-success.../p
p classbg-info.../p
p classbg-warning.../p
p classbg-danger.../p
关闭按钮 通过使用一个象征关闭的图标可以让模态框和警告框消失。
button typebutton classclose aria-labelClosespan aria-hiddentruetimes;/span/button 三角符号 通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意向上弹出式菜单中的三角符号是反方向的。
span classcaret/span 【十三】组件
图标参考网站
组件 · Bootstrap v3 中文文档 | Bootstrap 中文网
Font Awesome一套绝佳的图标字体库和CSS框架
图标 span标签 button typebutton classbtn btn-default aria-labelLeft Alignspan classglyphicon glyphicon-align-left aria-hiddentrue/span
/buttonbutton typebutton classbtn btn-default btn-lgspan classglyphicon glyphicon-star aria-hiddentrue/span Star
/button 可以改颜色 - 操作普通文本方法相同 script
.c {color:red;}
/script
