无极网站站怎么有的下不了,东营建网站公司,广州 科技网站建设公司,网站建设合同标准版bootstrap 的学习非常简单#xff0c;并且它所提供的样式又非常精美。只要稍微简单的学习就可以制作出漂亮的页面。 bootstrap中文网#xff1a;http://v3.bootcss.com/ bootstrap提供了三种类型的下载#xff1a; 1、用于生产环境的bootstrap 编译并压缩后的CSS、JavaScri…bootstrap 的学习非常简单并且它所提供的样式又非常精美。只要稍微简单的学习就可以制作出漂亮的页面。 bootstrap中文网http://v3.bootcss.com/ bootstrap提供了三种类型的下载 1、用于生产环境的bootstrap 编译并压缩后的CSS、JavaScript和字体文件。不包含文档和源码文件。 2、Bootstrap源码 Less、JavaScript和字体文件的源码并且带有文档。需要Less编译器和一些设置工作。 3、Sass 这是Bootstrap从Less到Sass的源码移植项目用于快速的在Rails、Compass或只针对Sass的项目中引入。 其实我们不用下载bootstrap也可以使用它 Bootstrap中文网为Bootstrap专门构建了自己的免费CDN加速服务。基于国内云厂商的CDN服务访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。 !DOCTYPE html
html langzh-CNheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1!-- 上述3个meta标签*必须*放在最前面任何其他内容都*必须*跟随其后 --titleBootstrap 101 Template/title!-- Bootstrap --link relstylesheet hrefhttp://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css/headbodyh1你好bootstrap/h1!-- jQuery (necessary for Bootstraps JavaScript plugins) --script srchttp://cdn.bootcss.com/jquery/1.11.2/jquery.min.js/script!-- Include all compiled plugins (below), or include individual files as needed --script srchttp://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js/script/body
/html 字体图标 bootstrap默认提供了二百多个图标。我们可以通过span标签来使用这些图标 h3图标/h3 span classglyphicon glyphicon-home/spanspan classglyphicon glyphicon-signal/spanspan classglyphicon glyphicon-cog/spanspan classglyphicon glyphicon-apple/spanspan classglyphicon glyphicon-trash/spanspan classglyphicon glyphicon-play-circle/spanspan classglyphicon glyphicon-headphones/span按钮 button/button标签用于创建按钮bootstrap提供了丰富的按钮样式。 h3按钮/h3button typebutton classbtn btn-default按钮/buttonbutton typebutton classbtn btn-primaryprimary/buttonbutton typebutton classbtn btn-successsuccess/buttonbutton typebutton classbtn btn-infoinfo/buttonbutton typebutton classbtn btn-warningwarning/buttonbutton typebutton classbtn btn-dangerdanger/buttonh3按钮尺寸/h3button typebutton classbtn btn-default按钮/buttonbutton typebutton classbtn btn-primary btn-lgprimary/buttonbutton typebutton classbtn btn-success btn-smsuccess/buttonbutton typebutton classbtn btn-info btn-xsinfo/buttonh3把图标显示在按钮里/h3button typebutton classbtn btn-defaultspan classglyphicon glyphicon-home/span 按钮/button按钮除了有默认的大小外bootstrap还提供三个参数来调整按钮的大小分别是btn-lg、btn-sm和btn-xs。 下拉菜单 下拉菜单是最常见的交互之一bootstrap提供了漂亮的样式。 h3下拉菜单/h3div classdropdownbutton classbtn btn-primary dropdown-toggle typebutton iddropdownMenu1 data-toggledropdown aria-expandedtrueDropdownspan classcaret/span/buttonul classdropdown-menu rolemenu aria-labelledbydropdownMenu1li rolepresentationa rolemenuitem tabindex-1 href#Action/a/lili rolepresentationa rolemenuitem tabindex-1 href#Another action/a/lili rolepresentationa rolemenuitem tabindex-1 href#Something else here/a/lili rolepresentationa rolemenuitem tabindex-1 href#Separated link/a/li/ul/div输入框 通过input/input标签去创建输入框 h3输入框/h3div classinput-groupspan classglyphicon glyphicon-user/spaninput typetext placeholderusername/divdiv classinput-groupspan classglyphicon glyphicon-lock/spaninput typepassword placeholderpassword/div导航栏 导航栏作为整个网站的指引必不可少。 h3导航栏/h3nav classnavbar navbar-inverse navbar-fixed-topdiv idnavbar classnavbar-collapse collapseul classnav navbar-navli classactivea href#Home/a/lilia href#aboutAbout/a/lilia href#contactContact/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-expandedfalseDropdown span classcaret/span/aul classdropdown-menu rolemenulia href#Action/a/lilia href#Another action/a/lili classdivider/lili classdropdown-headerNav header/lilia href#Separated link/a/li/ul/li/ul/div!--/.nav-collapse --/div/nav表单 人与系统之间数据的传递都需要依靠表单来完成。比如注册/登录信息的提交查询条件的提交等。用form/form标签来创建表单。 h3表单/h3formdiv classform-groupspan classglyphicon glyphicon-user/spaninput typeemail idexampleInputEmail1 placeholderEnter email/divdiv classform-groupspan classglyphicon glyphicon-lock/spaninput typepassword 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警告框 警告框是系统向用户传达信息和提供指引的重要手段。没有针对警告框的标签通过bootstrap所提供的样式可以瞬间制作出漂亮的警告框。 h3警告框/h3div classalert alert-warning alert-dismissible rolealertbutton typebutton classclose data-dismissalert aria-labelClosespan aria-hiddentrue×/span/buttonstrongWarning!/strong Better check yourself, youre not looking too good./divdiv classalert alert-success rolealerta href# classalert-linksuccess!/a/divdiv classalert alert-info rolealerta href# classalert-linkinfo!/a/divdiv classalert alert-warning rolealerta href# classalert-linkwarning!/a/divdiv classalert alert-danger rolealerta href# classalert-linkdanger!/a/div进度条 系统的处理过程往往需要用户等待进度条可以让用户感知到系统的处理过程从而增加容忍度。 h3进度条/h3div classprogressdiv classprogress-bar roleprogressbar aria-valuenow70 aria-valuemin0 aria-valuemax100 stylewidth: 60%;70%/div/div转载于:https://www.cnblogs.com/xiaolixiaoxiao/p/5101429.html
