Bootstrap的使用手册及学习笔记

软酷网官网：开发的用于前端开发的工具包。关于Bootstrap的介绍和下载，大家可以去搜索查看。Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5的文件类型。因此这一文档类型必须出现在项目的每个页面的开始部分：!DOCTYPEhtml2htmllang=en3...4/htmlHTML中定义的所有标题标签,从h1到h6都是可用的。Bootstrap定义的全局font-size是14px，line-height是20px。这些样式应用到了body和所有的段落上。另外，对p(段落)还定义了1/2行高(默认为10px)的底部外边距(margin)属性。在使用Bootstrap之前必须要将bootstrap.css或者bootstrap.min.css（压缩版）引入到页面中，它定义了Bootstrap的基本样式。如果需要使用Bootstrap提供的组件，要将bootstrap.js或者bootstrap.min.js（压缩版）引入到页面中。因为bootstrap的JS插件需要Jquery的支持，所有在引入bootstrap.js之前必须将Jquery.js也引入到页面上。另外如果你希望你的页面支持响应式布局，必须引入bootstrap-responsive.css或者bootstrap-responsive.min.css（压缩版），它主要提供页面在移动设备上的显示样式支持，需要注意的是bootstrap-responsive.css必须放置在bootstrap.css之后，否则便不具有响应式布局功能。当然在Bootstrap3的版本中，bootstrap.css和bootstrap-responsive.css已经合并了。一、代码样式Bootstrap提供了代码样式，用于在页面上展示代码，以此来区分于正文的区别，如果是行内嵌套代码，可以用code标签，但是对于代码中的符号要进行转换（是<、是>）例如：!--正文中内嵌代码块--pForexample,codesection/codeshouldbewrappedasinline./p如果是代码块可以用pre标签，同样的，代码中的要将代码中的尖括号做转换。例如：1!--.pre-scrollable，其作用是设置max-height为350px，并在垂直方向展示滚动条--2preclass=pre-scrollable34pSampletexthere.../p5pclass=text-muted.../p6pclass=text-primary.../p7pclass=text-success.../p8pclass=text-info.../p9pclass=text-warning.../p软酷网官网：=text-danger.../p1112/pre二、表格基本的表格样式可以用table标签。例如：1h4正常表格/h42!--3利用.table-bordered为表格和其中的每个单元格增加边框4利用.table-striped可以给tbody之内的每一样增加斑马条纹样式5利用.table-hover可以让tbody中的每一行响应鼠标悬停状态6--7tableclass=tabletable-stripedtable-borderedtable-hover8tr9thFirstName/th10thLastName/th11thUsername/th12/tr13tr14tdMark/td15tdOtto/td16td@mdo/td17/tr18tr19tdJacob/td20tdThornton/td21td@fat/td22/tr23/table如果想让表格的内容更紧凑一点可以为表格添加.table-condensed类，如果想为表格添加颜色可以选择情景类，情景类有：.success表示成功或积极的行为.error表示一个危险或存有潜在危险的行为.warning表示警告，可能需要注意.info作为一个默认样式的一个替代样式例如：1!--利用.table-condensed可以让表格更加紧凑，单元格中的内部（padding）均会减半--2tableclass=tabletable-condensed3tr4thFirstName/th5thLastName/th软酷网官网：=warning9tdMark/td10tdOtto/td11td@mdo/td12/tr13trclass=error14tdJacob/td15tdThornton/td16td@fat/td17/tr18trclass=info19tdLarry/td20tdtheBird/td21td@twitter/td22/tr23/table三、表单基本的表单可以用form标签，只要定义了form标签，标签里面的每个单独的表单控件都已经被赋予了样式。默认是堆叠、label左侧对齐并在控件之上。例如：1form2fieldset3legend普通表单/legend4labelLabelname/label5inputtype=textplaceholder=Typesomething…6spanclass=help-blockExampleblock-levelhelptexthere./span7labelclass=checkbox8inputtype=checkboxCheckmeout9/label10buttontype=submitclass=btnSubmit/button11/fieldset12/form另外，Bootstrap包含3个可选的常用表单布局，分别是搜索表单，行内表单，水平表单，例如：1legend搜索表单/legend2!--为表单增加.form-search类，并为input增加.search-query类，可将输入框变成圆角状--3formclass=form-search4inputtype=textclass=input-mediumsearch-queryplaceholder=Typesomething…5buttontype=submitclass=btnSearch/button6/form软酷网官网：行内表单/legend2!--为表单增加.form-inline类，结果是一个压缩型排列的表单，其中label左侧对齐、控件为inline-block类型。--3formclass=form-inline4inputtype=textclass=input-smallplaceholder=Email5inputtype=passwordclass=input-smallplaceholder=Password6labelclass=checkbox7inputtype=checkboxRememberme8/label9buttontype=submitclass=btnSignin/button10/form1legend水平表单/legend2!--3为表单添加.form-horizontal类4将label和控件包裹在.control-group中5为label添加.control-label类6将任何相关的控件包裹在.controls中，以确保最佳的对齐7--8formclass=form-horizontal9divclass=control-group10labelclass=control-labelfor=inputEmailEmail/label11divclass=controls12inputtype=textid=inputEmailplaceholder=Email13/div14/div15divclass=control-group16labelclass=control-labelfor=inputPasswordPassword/label17divclass=controls18inputtype=passwordid=inputPasswordplaceholder=Password19/div20/div21divclass=control-group22divclass=controls23labelclass=checkbox24inputtype=checkboxRememberme25/label26buttontype=submitclass=btnSignin/button27/div28/div29/form四、按钮任何赋予.btn类的页面元素都会显示按钮样式。不过，通常是用于更好的表现a和button页面元素。软酷网官网：=描述默认btn带渐变的标准灰色按钮btnbtn-primary提供额外的视觉感,可在一系列的按钮中指出主要操作btnbtn-info默认样式的替代样式btnbtn-success表示成功或积极的动作btnbtn-warning提醒应该谨慎采取这个动作btnbtn-danger表示这个动作危险或存在危险btnbtn-inverse备用的暗灰色按钮，不依赖于语义和用途链接btnbtn-link简化一个按钮,使它看起来像一个链接，同时保持按钮的行为如果想更改按钮的大小，可以在class类中添加.btn-large、.btn-small或.btn-mini即可改变按钮大小，通过由Glyphicons提供图片，可以给每个按钮设置一个小图标，使用时，每个图标都需要依附于一个i标签，并且赋予一个唯一的类（class），默认是深灰色，也可以使用反色（白色）样式的图标，只需增加一个额外的类.icon-white。例如：!--.btn-primary可以将按钮的颜色变蓝，.btn-large可以设置按钮的大小，对应的还有.btn-small.btn-mini要想给按钮加上小图标可以使用i标签--divstyle=margin-bottom:15pxaclass=btnbtn-primarybtn-largehref=iclass=icon-commenticon-white/i查看评论/a/divdivstyle=margin-bottom:15pxbuttonclass=btntype=submiticlass=icon-shopping-cart/i结账/a/divdivstyle=margin-bottom:15pxinputclass=btntype=buttonvalue=设置/div!--通过给按钮添加.btn-block可以使其充满父节点100%的宽度，而且按钮也变为了块级（block）元素--buttontype=buttonclass=btnbtn-primarybtn-lgbtn-bl