电子商务网站建设期末试卷答案,星空传媒苏清歌孟若羽,wordpress本地路径,东营建设银行三、Flask学习之BootSrap
Bootstrap 是一款由Twitter团队开发的开源前端框架#xff0c;它以响应式设计、移动端友好和丰富的组件为特色#xff0c;为开发者提供了快速构建现代化网站和Web应用的工具。借助其灵活的栅格系统、丰富的UI组件和可定制的样式#xff0c;Bootstr…三、Flask学习之BootSrap
Bootstrap 是一款由Twitter团队开发的开源前端框架它以响应式设计、移动端友好和丰富的组件为特色为开发者提供了快速构建现代化网站和Web应用的工具。借助其灵活的栅格系统、丰富的UI组件和可定制的样式Bootstrap成为了广受欢迎的选择为开发者提供了快速、一致且具有吸引力的用户界面。
1.下载BootSrap
网址Bootstrap中文网 (bootcss.com)
我这里下载的是v3版本起步 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)
选择“用于生产环境的 Bootstrap”下载解压出来 将解压出来的文件复制到项目的根目录下使用
2.使用BootSrap
在head部分加入这行代码
!--href是你存放下载好的BootSrap的文件夹--
link relstylesheet hrefstatic/plugins/bootstrap-3.4.1-dist/css/bootstrap.css然后可以应用BootSrap的样式了
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet hrefstatic/plugins/bootstrap-3.4.1-dist/css/bootstrap.css
/head
body
labelinput typebutton classbtn-block value提交brinput typebutton classbtn-danger value提交brinput typebutton classbtn-default value提交brinput typebutton classbtn-primary value提交brinput typebutton classbtn-success value提交brinput typebutton classbtn-xs value提交br
/label
/body
/html效果 3.导航
具体使用可以查看官方文档组件 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)
找到导航条点击Copy 效果 4.栅格结构
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统随着屏幕或视口viewport尺寸的增加系统会自动分为最多12列。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylebody {margin: 0;}/stylelink relstylesheet hrefstatic/plugins/bootstrap-3.4.1-dist/css/bootstrap.css
/head
bodydivdiv classcol-md-6 stylebackground-color: orange.col-md-6/divdiv classcol-md-6 stylebackground-color: pink.col-md-6/div/div
/body
/html效果 官网中提供了四种不同的栅格分别为:
超小屏幕 手机 (768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)总是水平排列开始是堆叠在一起的当大于这些阈值时将变为水平排列CNone 自动750px970px1170px.col-xs-.col-sm-.col-md-.col-lg-
列偏移应用栅格的时候如果想让某个栅格往后移几个单位可以选用此选项
div classcol-md-6 col-md-offset-3 stylebackground-color: orange.col-md-6/divcol-md-offset-3是指使用md类型的栅格偏移三个栅格单位。
5.container
BootSrap有两种container
第一种
div classcontainerdiv classcol-sm-9left/divdiv classcol-sm-3right/div
/div这种container是能占用1170px的中间位置。
第二种
div classcontainer-fluiddiv classcol-sm-9left/divdiv classcol-sm-3right/div
/div这种container是能够浮动但是需要消除浮动需要再应用一个写好的样式clearfix
6.面板
组件 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)
代码
div classcontainer-fluid clearfixdiv classcol-sm-9left/divdiv classcol-sm-3div classpanel panel-defaultdiv classpanel-heading编程学习/divdiv classpanel-bodyJAVAbrC/CbrPythonbrPHP/div/div/div/div效果 官网中还支持多种不同形式的面板这里以情景效果面板为例
div classpanel panel-primarydiv classpanel-heading编程学习/divdiv classpanel-bodyJAVAbrC/CbrPythonbrPHP/div
/div效果 7.分页
代码
ul classpaginationli classdisableda href# aria-labelPreviousspan aria-hiddentrue«/span/a/lili classactivea href#1 span classsr-only(current)/span/a/lilia href#2/a/lilia href#3/a/lilia href#4/a/lilia href#5/a/lilia href# aria-labelNextspan aria-hiddentrue»/span/a/li
/ul效果 8.表单
官网组件 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)提供了多种表单这里以最基本的为例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet hrefstatic/plugins/bootstrap-3.4.1-dist/css/bootstrap.cssstyle.account {padding: 20px 90px;margin-top: 200px;border: 1px solid pink;border-radius: 5px}/style
/head
body
div classcol-sm-offset-4 col-sm-4 accounth3 stylemargin-bottom: 20px;text-align: center;font-weight: bolder用户登录/h3formdiv classform-grouplabel forexampleInputEmail1用户名/labelinput typetext classform-control idexampleInputEmail1 placeholder请输入用户名/divdiv classform-grouplabel forexampleInputPassword1密码/labelinput typepassword classform-control idexampleInputPassword1 placeholder请输入密码/divdiv classcheckboxlabelinput typecheckbox 我已同意该协议/label/divbutton typesubmit classbtn btn-primary登 录/button/form
/div
/body
/html效果 9.阴影
为了让表格看起来更加立体可以为其应用阴影样式
box-shadow: 3px 3px 3px #8c8c8c;四个参数分别为水平方向垂直方向模糊距离颜色
效果
10.图标
BootSrap支持图标设置可选择图标有多种官网均有提供组件 · Bootstrap v3 中文文档
span classglyphicon glyphicon-th-list aria-hiddentrue/span虽然官网内置了一部分图标但是还不够多所以有一个专门的组件来拓展图标。Font Awesome一套绝佳的图标字体库和CSS框架 (dashgame.com)直接下载下来解压到你项目的目录里就可以然后引入
link relstylesheet hrefstatic/plugins/font-awesome-4.7.0/css/font-awesome.css然后去网站找到你喜欢的图标应用就可以了。
11.案例
完整代码使用时需要把BootSrap、Font Awesome路径替换为你自己对应的存储路径
!DOCTYPE html
html langen
headmeta charsetUTF-8title后台管理/titlelink relstylesheet hrefstatic/plugins/bootstrap-3.4.1-dist/css/bootstrap.csslink relstylesheet hrefstatic/plugins/font-awesome-4.7.0/css/font-awesome.cssstyle.navbar {border-radius: 0;}/style
/head
body
nav classnavbar navbar-defaultdiv classcontainer!-- Brand and toggle get grouped for better mobile display --div classnavbar-headerbutton typebutton classnavbar-toggle collapsed data-togglecollapsedata-target#bs-example-navbar-collapse-1 aria-expandedfalsespan classsr-onlyToggle navigation/spanspan classicon-bar/spanspan classicon-bar/spanspan classicon-bar/span/buttona classnavbar-brand href#后台服务/a/div!-- Collect the nav links, forms, and other content for toggling --div classcollapse navbar-collapse idbs-example-navbar-collapse-1ul classnav navbar-navli classactivea href#首页 span classsr-only(current)/span/a/lilia href#菜单/a/li/ulform classnavbar-form navbar-leftdiv classform-grouplabelinput typetext classform-control placeholderSearch/label/divbutton typesubmit classbtn btn-defaultSubmit/button/formul classnav navbar-nav navbar-rightlia href#登录/a/lilia href#注册/a/li/ul/div!-- /.navbar-collapse --/div!-- /.container-fluid --
/nav
div classcontainerdiv classpanel panel-defaultdiv classpanel-headingspan classglyphicon glyphicon-ok aria-hiddentrue/span表单提交/divdiv classpanel-bodyform classform-inlinediv classform-grouplabel forexampleInputName2姓名/labelinput typetext classform-control idexampleInputName2 placeholder请输入姓名/divdiv classform-grouplabel forexampleInputEmail2学号/labelinput typetext classform-control idexampleInputEmail2 placeholder请输入学号/divbutton typesubmit classbtn btn-successi classfa fa-save aria-hiddentrue/i 提 交/button/form/div/divdiv classpanel panel-defaultdiv classpanel-headingspan classglyphicon glyphicon-th-list aria-hiddentrue/span数据库/divdiv classpanel-bodyVIP用户/divtable classtable table-bordered table-stripedtheadtrth/thth姓名/thth学号/thth操作/th/tr/theadtbodytrth scoperow1/thtdMark/tdtdOtto/tdtda classbtn btn-primary btn-xs编辑/aa classbtn btn-danger btn-xs删除/a/td/trtrth scoperow2/thtdJacob/tdtdThornton/tdtda classbtn btn-primary btn-xs编辑/aa classbtn btn-danger btn-xs删除/a/td/trtrth scoperow3/thtdLarry/tdtdthe Bird/tdtda classbtn btn-primary btn-xs编辑/aa classbtn btn-danger btn-xs删除/a/td/tr/tbody/table/divul classpaginationli classdisableda href# aria-labelPreviousspan aria-hiddentrue«/span/a/lili classactivea href#1 span classsr-only(current)/span/a/lilia href#2/a/lilia href#3/a/lilia href#4/a/lilia href#5/a/lilia href# aria-labelNextspan aria-hiddentrue»/span/a/li/ul
/div
/body
/html效果
