电脑桌面
添加小米粒文库到电脑桌面
安装后可以在桌面快捷访问

bootstrap常用类简介VIP专享VIP免费

bootstrap常用类简介_第1页
bootstrap常用类简介_第2页
bootstrap常用类简介_第3页
bootstrap常用类名(2014-09-1215:15:21)转载▼标签:it分类:bootstrap一、常用类1、container居中的内容展示2、row行内容显示3、col列内容显示,列必须在row中xs宽度小于768,sm宽度小于990大于768,md宽度大于990,小于1200,lg宽度大于1200col-xs-4代表小屏下显示为4列,col-xs-4col-md-2代表小屏下占4列,大屏下占2列<divclass="container"><h1>Hello,world!h1><divclass="row"><divclass="col-xs-4"><h2class="page-header">区域一h2><p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.p>div><divclass="col-xs-4"><h2class="page-header">区域二h2><p>IfyouworkwithBootstrap'suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter'sCSShinterbasedonless.js.p>div><divclass="col-xs-4"><h2class="page-header">区域三h2><p>Withinthedownloadyou'llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.p>div>div>div>\4、h1-H6排版5、pageHeader6、small小一号的深灰色,用作副标题。7、lead处理一个段落的文字,让其显示效果显著。8、文字class<h1>强调Classh1><pclass="text-muted">Maecenasseddiamegetrisusvariusblanditsitametnonmagna.p><pclass="text-primary">Maecenasseddiamegetrisusvariusblanditsitametnonmagna.p><pclass="text-success">.Maecenasseddiamegetrisusvariusblanditsitametnonmagna.p><pclass="text-info">Maecenasseddiamegetrisusvariusblanditsitametnonmagna..p><pclass="text-warning">Maecenasseddiamegetrisusvariusblanditsitametnonmagna..p><pclass="text-danger">.Maecenasseddiamegetrisusvariusblanditsitametnonmagna.p><h1>h1>9、list-unstyled无样式的列表10、list-inline横向水平列表11、table基本使用一致。table-hover某行鼠标变色;table-condensed表格紧缩,实际padding减半。.table包裹在.table-responsive中即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于768px宽度时,水平滚动条消失。12、form<formrole="form"><divclass="form-group"><labelfor="exampleInputEmail1">Emailaddresslabel><inputtype="email"class="form-control"id="exampleInputEmail1"placeholder="Enteremail">div><divclass="form-group"><labelfor="exampleInputPassword1">Passwordlabel><inputtype="password"class="form-control"id="exampleInputPassword1"placeholder="Password">div><divclass="form-group"><labelfor="exampleInputFile">Fileinputlabel><inputtype="file"id="exampleInputFile"><pclass="help-block">Exampleblock-levelhelptexthere.p>div><divclass="checkbox"><label><inputtype="checkbox">Checkmeoutlabel>div><buttontype="submit"class="btnbtn-default">Submitbutton>form>class="form-inline"将表单内容横向紧缩排列。inputclass="form-control"id="disabledInput"type="text"placeholder="Disabledinputhere..."disabled>设为不可用。Bootstrap对表单控件的校验状态,如error、warning和success状态,都定义了样式。使用时,添加.has-warning、.h...

1、当您付费下载文档后,您只拥有了使用权限,并不意味着购买了版权,文档只能用于自身使用,不得用于其他商业用途(如 [转卖]进行直接盈利或[编辑后售卖]进行间接盈利)。
2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。
3、如文档内容存在违规,或者侵犯商业秘密、侵犯著作权等,请点击“违规举报”。

碎片内容

确认删除?
VIP
微信客服
  • 扫码咨询
会员Q群
  • 会员专属群点击这里加入QQ群
客服邮箱
回到顶部