网上商城网站 找什么做,画册设计内容,手机优化大师为什么扣钱,易货小程序开发教程BootStrap布局 1 下载地址: http://v3.bootcss.com/getting-started/#download 根据自己的需要#xff0c;下载不同的版本。我这里使用的是1版本的。比较简单好用。 2 Bootstrap常用的布局样式介绍 1-布局容器#xff08;.container和.container-fluid 下载地址: http://v3.bootcss.com/getting-started/#download 根据自己的需要下载不同的版本。我这里使用的是1版本的。比较简单好用。 2 Bootstrap常用的布局样式介绍 1-布局容器.container和.container-fluid 2-栅格系统 .col-xs-[1-12], .col-sm-[1-12], .col-md-[1-12]和.col-lg-[1-12] 3-表单控件 .form-group和.form-control 4-按钮样式 5-按钮的大小 6-图片的形状 3 编写页面 !DOCTYPE html html head title首页 - 用户列表页面/title link relshortcut icon href/static/img/favicon.png / link relstylesheet href/static/bootstrap/css/bootstrap.css/ script typetext/javascript src/static/js/jquery-2.1.1.min.js/script script typetext/javascript src/static/bootstrap/js/bootstrap.min.js/script style .bodercss{ border: 1px solid #00f; } /style /head body !--布局容器-- div classcontainer styleborder:1px solid red p这是container布局/p p.container 类用于固定宽度并支持响应式布局的容器。/p /div div classcontainer-fluid styleborder:1px solid #0f0 pcontainer-fluid/p p.container-fluid 类用于 100% 宽度占据全部视口viewport的容器。/p /div !--栅格布局部分-- div classcontainer div classrow div classcol-md-1 bodercss1/div div classcol-md-1 bodercss2/div div classcol-md-1 bodercss3/div div classcol-md-1 bodercss4/div div classcol-md-1 bodercss5/div div classcol-md-1 bodercss6/div div classcol-md-1 bodercss7/div div classcol-md-1 bodercss8/div div classcol-md-1 bodercss9/div div classcol-md-1 bodercss10/div div classcol-md-1 bodercss11/div div classcol-md-1 bodercss12/div /div div classrow div classcol-md-2 bodercss2/div div classcol-md-2 bodercss4/div div classcol-md-2 bodercss6/div div classcol-md-2 bodercss8/div div classcol-md-2 bodercss10/div div classcol-md-2 bodercss12/div /div div classrow div classcol-md-3 bodercss3/div div classcol-md-3 bodercss6/div div classcol-md-3 bodercss9/div div classcol-md-3 bodercss12/div /div div classrow div classcol-md-4 bodercss4/div div classcol-md-4 bodercss4/div div classcol-md-4 bodercss4/div /div div classrow div classcol-md-4 bodercss4/div div classcol-md-8 bodercss8/div /div div classrow div classcol-md-6 bodercss6/div div classcol-md-6 bodercss12/div /div div classrow div classcol-md-12 bodercss12/div /div /div !--表单控件-- div classcontainer form div classform-group label fortext文本:/label input typetext classform-control idtext placeholder文本 /div div classform-group label fornumber数字:/label input typenumber classform-control idnumber placeholder数字 /div div classform-group label fordatetime时间:/label input typedatetime classform-control iddatetime placeholder时间 /div div classform-group label fortel电话:/label input typetel classform-control idtel placeholder电话 /div div classform-group label foremail邮箱:/label input typeemail classform-control idemail placeholder邮箱 /div div classform-group label forpassword密码/label input typepassword classform-control idpassword placeholder密码 /div div classform-group label forexampleInputFile上传文件/label input typefile idexampleInputFile p classhelp-block上传文件/p /div div classcheckbox label input typecheckbox idblankCheckbox valueoption1 /多选A /label label input typecheckbox idblankCheckbox valueoption1/多选B /label /div div classradio label input typeradio nameblankRadio idblankRadio1 valueoption1/单选A /label label input typeradio nameblankRadio idblankRadio1 valueoption1/单选B /label /div select classform-control option1/option option2/option option3/option option4/option option5/option /select button typesubmit classbtn btn-default提交/button button typereset classbtn btn-primary重置/button /form /div !--按钮样式-- div classcontainer stylemargin-top:20px; button typebutton classbtn btn-default默认样式Default/button button typebutton classbtn btn-primary首选项Primary/button button typebutton classbtn btn-success成功Success/button button typebutton classbtn btn-info一般信息Info/button button typebutton classbtn btn-warning警告Warning/button button typebutton classbtn btn-danger危险Danger/button button typebutton classbtn btn-link链接Link/button /div !--图片形状-- div classcontainer stylemargin-top:20px; img src/static/img/1.jpg stylewidth:200px;height:200px; classimg-rounded img src/static/img/2.jpg stylewidth:200px;height:200px; classimg-circle img src/static/img/3.jpg stylewidth:200px;height:200px; classimg-thumbnail /div /body /html 4 运行页面效果如下: 1-布局容器 2-栅格系统 3-Form表单 4-按钮样式 5-图片的样式 6-下一章节将Easyui控件的使用 转载于:https://www.cnblogs.com/tudaogaoyang/p/7999598.html
