[历史归档]本文原发布于 cstriker1407.info 个人博客内容为历史存档仅供参考。发布时间2019-05-20 标题bootstrap简单使用实例分类编程 / web / Bootstrap 标签html·css·bootstrapbootstrap简单使用实例官方简单实例导航条固定在顶部栅格系统对button进行布局面板表单bootstrap提供了很多组件和全局CSS样式表我们可以找到喜欢的样式直接复制粘贴来快速达到我们希望的效果。官方简单实例【 https://v3.bootcss.com/getting-started/#examples 】这里简单的笔记下几个实例导航条格式参考【 https://v3.bootcss.com/components/#navbar 】官方简单实例【 https://v3.bootcss.com/examples/navbar/ 】固定在顶部!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetutf-8metahttp-equivX-UA-CompatiblecontentIEedgemetanameviewportcontentwidthdevice-width, initial-scale1titleBootstrap 101 Template/titlelinkhrefbootstrap-3.3.7-dist/css/bootstrap.min.cssrelstylesheetlinkhrefcustom_css/ie10-viewport-bug-workaround.cssrelstylesheetlinkhrefcustom_css/navbar-fixed-top.cssrelstylesheet/headbodynavclassnavbar navbar-default navbar-fixed-topdivclasscontainerulclassnav navbar-navliclassactiveahref/menu1menu1/a/liliahref/menu2menu2/a/lili/ul/div/navscriptsrcjquery/1.12.4/jquery.min.js/scriptscriptsrcbootstrap-3.3.7-dist/js/bootstrap.min.js/script/body/htmlcustom_css文件夹内容ie10-viewport-bug-workaround.css/*! * IE10 viewport hack for Surface/desktop Windows 8 bug * Copyright 2014-2015 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) *//* * See the Getting Started docs for more information: * http://getbootstrap.com/getting-started/#support-ie10-width */-ms-viewport{width:device-width;}-o-viewport{width:device-width;}viewport{width:device-width;}navbar-fixed-top.cssbody{min-height:2000px;padding-top:70px;}栅格系统格式参考【 https://v3.bootcss.com/css/#grid 】官方简单实例【 https://v3.bootcss.com/examples/grid/ 】从作者个人实践来看bootstrap的栅格系统非常好用可以快速设置比较漂亮的布局。栅格系统最多为12列从官方文档来看栅格系统可以实现非常复杂的布局这里作者只是简单笔记几个实例对button进行布局divclasscontainerinputclassbtn btn-default btn-lg btn-blocktypesubmitvaluebtn1/formp/pdivclassrowdivclasscol-md-6inputclassbtn btn-primary btn-blocktypesubmitvaluebtn2/divdivclasscol-md-6inputclassbtn btn-success btn-blocktypesubmitvaluebtn3/div/divdivclassrowdivclasscol-md-4inputclassbtn btn-danger btn-lg btn-blocktypesubmitvaluebtn4/divdivclasscol-md-4inputclassbtntypesubmitvaluebtn5/divdivclasscol-md-4inputclassbtn btn-info btn-small btn-blocktypesubmitvaluebtn6/div/div/div显示如下面板格式参考【 https://v3.bootcss.com/components/#panels 】官方简单实例【 https://v3.bootcss.com/examples/grid/ 】我们可以使用面板来对功能区进行划分这样对于满屏幕按钮和输入来讲可能会友好一点。!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetutf-8metahttp-equivX-UA-CompatiblecontentIEedgemetanameviewportcontentwidthdevice-width, initial-scale1titleBootstrap 101 Template/titlelinkhrefbootstrap-3.3.7-dist/css/bootstrap.min.cssrelstylesheetlinkhrefcustom_css/ie10-viewport-bug-workaround.cssrelstylesheetlinkhrefcustom_css/navbar-fixed-top.cssrelstylesheetstyle.content_auto_return{white-space:pre-wrap;}/style/headbodydivclasscontainerdivclasspanel panel-defaultdivclasspanel-headingpanel1/divdivclasspanel-bodydivclasscontent_auto_return1 hello world 2 hello world/div/div/divp/pdivclasspanel panel-primarydivclasspanel-headingpanel2/divulclasslist-groupliclasslist-group-itemhello world/liliclasslist-group-itemhello world/li/ul/divp/pdivclassrowdivclasscol-md-6divclasspanel panel-successdivclasspanel-headingpanel3:spanclasslabel label-successSuccess/span/divdivclasspanel-bodyhello world/div/div/divdivclasscol-md-6divclasspanel panel-infodivclasspanel-headingpanel4:spanclasslabel label-dangerFailure/span/divdivclasspanel-bodyhello world/div/div/div/divp/pdivclasspanel panel-warningdivclasspanel-headingpanel5/divtableclasstable table-borderedtbodytrthtitle1/ththtitle2/th/trtrtdA/tdtdB/td/trtrtdC/tdtdD/td/tr/tbody/table/div/divscriptsrcjquery/1.12.4/jquery.min.js/scriptscriptsrcbootstrap-3.3.7-dist/js/bootstrap.min.js/script/body/html显示如下表单格式参考【 https://v3.bootcss.com/css/#forms 】我们可以使用各种class属性来做出比较友好的表单交互。formclassform-inlinemethodpostaction/post_textdivclassform-groupinputtypetextnametext1classform-controlplaceholderthis is text1 hintinputtypetextnametext2classform-controlplaceholderthis is text2 hint/divbuttontypesubmitclassbtn btn-defaultmodify/button/formp/pformmethodpostaction/post_radiolabelclassradio-inlineinputtyperadionamexx_switchvalueenableenable/labellabelclassradio-inlineinputtyperadionamexx_switchvaluedisabledisable/labelbuttontypesubmitclassbtn btn-defaultchange/button/form显示如下