最精品网站建设,直播平台创建公会,上海高端品牌网站制作,沈阳开发网站公司文章目录 一、下载并导入Bootstrap中文文档二、Bootstrap初体验三、Boostrap导航栏四、Boostrap栅格五、博客案例六、用户登录界面七、后台管理界面八、引入图标九、Bootstrap动态效果 一、下载并导入Bootstrap中文文档 二、Bootstrap初体验
实现提交按钮#xff0c;去中文文… 文章目录 一、下载并导入Bootstrap中文文档二、Bootstrap初体验三、Boostrap导航栏四、Boostrap栅格五、博客案例六、用户登录界面七、后台管理界面八、引入图标九、Bootstrap动态效果 一、下载并导入Bootstrap中文文档 二、Bootstrap初体验
实现提交按钮去中文文档里面找到这个按钮 选择需要的样式。 这里给出如下案例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!-- 生产版本--link relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.css
/head
bodyinput typebutton value提交/input typebutton value提交 classbtn btn-primary/input typebutton value提交 classbtn btn-success/input typebutton value提交 classbtn btn-danger/input typebutton value提交 classbtn btn-danger btn-xs/!-- Standard button --button typebutton classbtn btn-default默认样式Default/button!-- Provides extra visual weight and identifies the primary action in a set of buttons --button typebutton classbtn btn-primary首选项Primary/button
/body
/html最终实现样式如下
三、Boostrap导航栏 选择需要的样式。 这里给出如下案例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.css/head
body
nav classnavbar navbar-defaultdiv classcontainer-fluid!-- 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#Brand/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#Link span classsr-only(current)/span/a/lilia href#Link/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptruearia-expandedfalseDropdown span classcaret/span/aul classdropdown-menulia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/lilia href#Separated link/a/lili roleseparator classdivider/lilia href#One more separated link/a/li/ul/li/ulform classnavbar-form navbar-leftdiv classform-groupinput typetext classform-control placeholderSearch/divbutton typesubmit classbtn btn-defaultSubmit/button/formul classnav navbar-nav navbar-rightlia href#Link/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptruearia-expandedfalseDropdown span classcaret/span/aul classdropdown-menulia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/lilia href#Separated link/a/li/ul/li/ul/div!-- /.navbar-collapse --/div!-- /.container-fluid --
/nav
/body
/html最终实现样式如下
四、Boostrap栅格 这里给出如下案例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.css/head
body
!-- div classcol-sm-6 stylebackground-color: red1/div--div classcol-sm-offset-2 col-sm-6 stylebackground-color: green1/divdiv classcol-sm-4 stylebackground-color: red1/div
/body
/html最终实现样式如下
五、博客案例
1.选择展示内容 2.引入分页 3.引入面板 具体案例实现入下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.cssstyle.navbar {border-radius: 0;}/style
/head
body
div classnavbar navbar-defaultdiv classcontainer-fluid!-- 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#Link span classsr-only(current)/span/a/lilia href#广西/a/lilia href#广西/a/lilia href#广西/a/lilia href#广西/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptruearia-expandedfalseDropdown span classcaret/span/aul classdropdown-menulia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/lilia href#Separated link/a/lili roleseparator classdivider/lilia href#One more separated link/a/li/ul/li/ulform classnavbar-form navbar-leftdiv classform-groupinput typetext classform-control placeholderSearch/divbutton typesubmit classbtn btn-defaultSubmit/button/formul classnav navbar-nav navbar-rightlia href#登录/a/lilia href#注册/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptruearia-expandedfalseDropdown span classcaret/span/aul classdropdown-menulia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/lilia href#Separated link/a/li/ul/li/ul/div!-- /.navbar-collapse --/div!-- /.container-fluid --
/div
div classcontainer clearfixdiv classcol-sm-9div classmediadiv classmedia-lefta href# one-link-markyesimg classmedia-object data-srcholder.js/64x64 alt64x64srcdata:image/svgxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIPCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyIPCFbQ0RBVEFbI2hvbGRlcl8xOGM4YjY0NjJlNyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4YzhiNjQ2MmU3Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2cPC9zdmcdata-holder-renderedtrue stylewidth: 64px; height: 64px;/a/divdiv classmedia-bodyh4 classmedia-headingMedia heading/h4Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Craspurus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputatefringilla. Donec lacinia congue felis in faucibus./div/divdiv classmediadiv classmedia-lefta href# one-link-markyesimg classmedia-object data-srcholder.js/64x64 alt64x64srcdata:image/svgxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIPCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyIPCFbQ0RBVEFbI2hvbGRlcl8xOGM4YjY0NjJlNyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4YzhiNjQ2MmU3Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2cPC9zdmcdata-holder-renderedtrue stylewidth: 64px; height: 64px;/a/divdiv classmedia-bodyh4 classmedia-headingMedia heading/h4Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Craspurus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputatefringilla. Donec lacinia congue felis in faucibus./div/divdiv classmediadiv classmedia-lefta href# one-link-markyesimg classmedia-object data-srcholder.js/64x64 alt64x64srcdata:image/svgxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIPCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyIPCFbQ0RBVEFbI2hvbGRlcl8xOGM4YjY0NjJlNyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4YzhiNjQ2MmU3Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2cPC9zdmcdata-holder-renderedtrue stylewidth: 64px; height: 64px;/a/divdiv classmedia-bodyh4 classmedia-headingMedia heading/h4Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Craspurus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputatefringilla. Donec lacinia congue felis in faucibus./div/divul classpaginationli classdisableda href# aria-labelPrevious one-link-markyesspan aria-hiddentrue«/span/a/lili classactivea href# one-link-markyes1 span classsr-only(current)/span/a/lilia href# one-link-markyes2/a/lilia href# one-link-markyes3/a/lilia href# one-link-markyes4/a/lilia href# one-link-markyes5/a/lilia href# aria-labelNext one-link-markyesspan aria-hiddentrue»/span/a/li/ul/divdiv classcol-sm-3div classpanel panel-defaultdiv classpanel-heading最新推荐/divdiv classpanel-bodyPanel contentPanel contentPanel content/div/divdiv classpanel panel-primarydiv classpanel-headingPanel heading without title/divdiv classpanel-bodyPanel content/div/divdiv classpanel panel-dangerdiv classpanel-headingPanel heading without title/divdiv classpanel-bodyPanel content/div/div/div
/div
/body
/html效果如下
六、用户登录界面
案例一
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.cssstyle.account {width: 400px;border: 1px solid #dddddd;border-radius: 5px;box-shadow: 5px 5px 20px #aaa;/*height: 350px;*/margin-left: auto;margin-right: auto;margin-top: 100px;padding: 20px 40px;}.account h2 {text-align: center;margin-top: 10px;}/style
/head
body
div classaccounth2用户登录/h2formdiv classform-grouplabel forexampleInputEmail1用户名/labelinput typeemail classform-control idexampleInputEmail1 placeholder用户名/divdiv classform-grouplabel forexampleInputPassword1密码/labelinput typepassword classform-control idexampleInputPassword1 placeholder密码/divbutton typesubmit classbtn btn-primary登 录/button/form
/div
div styleheight: 1000px/div
/body
/html效果 案例二
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.cssstyle.navbar {border-radius: 0;}.admin {height: 400px;width: 400px;border: 1px solid silver;margin: 0 auto;margin-top: 20px;padding: 20px;}.title {height: 50px;width: 200px;margin: 0 auto;/*border: 1px solid red;*/font-size: 24px;text-align: center;line-height: 50px;}.title a{display: inline-block;}img{width: 100%;height: 100%;}/style
/head
body
div classadmindiv classtitle用户登录/divformdiv classform-grouplabel forexampleInputEmail1用户名或手机号/labelinput typeemail classform-control idexampleInputEmail1 placeholder/divdiv classform-grouplabel forexampleInputPassword1密码/labelinput typepassword classform-control idexampleInputPassword1 placeholder/divdiv classform-groupdivlabel forexampleInputFile图片验证码/label/divdiv stylefloat: leftinput typepassword classform-control idexampleInputImage placeholder请输入图片验证码 stylewidth: 100%/divdiv styleheight: 34px;width: 100px;float: rightimg srcstatic/img/img.png alt/divdiv styleclear: both/div/divdiv stylefloat: leftbutton typesubmit classbtn btn-primary登录/button/divdiv stylefloat: right;text-align: center;height: 34px;line-height: 34px;color: silvera href忘记密码/a/div/form
/div/body
/html效果
七、后台管理界面
将菜单平铺到整个页面
div classcontainer-fluid将菜单不平铺
div classcontainer后台管理简易版—实现导航新建按钮列表
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.cssstyle.navbar{border-radius: 0;}/style
/head
body
nav classnavbar navbar-defaultdiv classcontainerdiv 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/divdiv classcollapse navbar-collapse idbs-example-navbar-collapse-1ul classnav navbar-navlia href#广西/a/lilia href#上海/a/li/ulul classnav navbar-nav navbar-rightlia href#登录/a/lilia href#注册/a/li/ul/div/div
/navdiv classcontainerdiv button classbtn btn-primary typesubmit新建/button/divdiv stylemargin-top: 20px;table classtable table-bordered table-hovertheadtrth#/ththFirst Name/ththLast Name/ththUsername/th/tr/theadtbodytrth scoperow1/thtdMark/tdtdOtto/tdtdmdo/td/trtrth scoperow2/thtdJacob/tdtdThornton/tdtdfat/td/trtrth scoperow3/thtdLarry/tdtdthe Bird/tdtdtwitter/td/tr/tbody/table/div
/div/body
/html效果展示 后台管理页面进阶版本----面板分页
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.cssstyle.navbar {border-radius: 0;}/style
/head
body
nav classnavbar navbar-defaultdiv classcontainerdiv 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/divdiv classcollapse navbar-collapse idbs-example-navbar-collapse-1ul classnav navbar-navlia href#广西/a/lilia href#上海/a/li/ulul classnav navbar-nav navbar-rightlia href#登录/a/lilia href#注册/a/li/ul/div/div
/navdiv classcontainerdiv classpanel panel-defaultdiv classpanel-headingh3 classpanel-title表单区域/h3/divdiv classpanel-bodyform classform-inlinediv classform-grouplabel classsr-only forexampleInputEmail3Email address/labelinput typeemail classform-control idexampleInputEmail3 placeholderEmail/divdiv classform-grouplabel classsr-only forexampleInputPassword3Password/labelinput typepassword classform-control idexampleInputPassword3 placeholderPassword/divbutton typesubmit classbtn btn-success保存/button/form/div/divdiv classpanel panel-defaultdiv classpanel-headingh3 classpanel-title数据列表/h3/div!-- div classpanel-body--!-- 注意以下是我们筛选出来的重要数据--!-- /div--table classtable table-bordered table-hovertheadtrth#/ththFirst Name/ththLast Name/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效果展示
八、引入图标
只要有浮动需要加入class“clearfix” 一需要在https://fontawesome.dashgame.com/官网下载所需要用到的库 二像bootstrap一样引入 三ctrlF搜索
starusercommentcalendarfire 将对应的i标签插入到图标需要插入的位置 效果演示
九、Bootstrap动态效果
Bootsrap动态效果依赖Javascript的类库jQuery 一jQuery官网下载—右键另存为----导入到pycharm 路径如下 二引入 效果如下 具体代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.csslink relstylesheet hrefstatic/plugins/font-awesome-4.7.0/css/font-awesome.cssstyle.navbar {border-radius: 0;}.more .more-item {display: inline-block;margin-right: 20px;}/style
/head
body
div classnavbar navbar-defaultdiv classcontainer-fluid!-- 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#Link span classsr-only(current)/span/a/lilia href#广西/a/lilia href#广西/a/lilia href#广西/a/lilia href#广西/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptruearia-expandedfalseDropdown span classcaret/span/aul classdropdown-menulia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/lilia href#Separated link/a/lili roleseparator classdivider/lilia href#One more separated link/a/li/ul/li/ulform classnavbar-form navbar-leftdiv classform-groupinput typetext classform-control placeholderSearch/divbutton typesubmit classbtn btn-defaulti classfa fa-search aria-hiddentrue/i/button/formul classnav navbar-nav navbar-rightlia href#登录/a/lilia href#注册/a/lili!-- Button trigger modal --a data-togglemodal data-target#myModal对话框/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptruearia-expandedfalseDropdown span classcaret/span/aul classdropdown-menulia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/lilia href#Separated link/a/li/ul/li/ul/div!-- /.navbar-collapse --/div!-- /.container-fluid --
/div
div classcontainer clearfixdiv classcol-sm-9div classmediadiv classmedia-lefta href# one-link-markyesimg classmedia-object data-srcholder.js/64x64 alt64x64srcdata:image/svgxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIPCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyIPCFbQ0RBVEFbI2hvbGRlcl8xOGM4YjY0NjJlNyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4YzhiNjQ2MmU3Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2cPC9zdmcdata-holder-renderedtrue stylewidth: 64px; height: 64px;/a/divdiv classmedia-bodyh4 classmedia-headingMedia heading/h4divi classfa fa-star aria-hiddentrue stylecolor: red;/ii classfa fa-star aria-hiddentrue/ii classfa fa-star aria-hiddentrue/ii classfa fa-star aria-hiddentrue/ii classfa fa-star aria-hiddentrue/i/divpCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.Craspurus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisivulputatefringilla. Donec lacinia congue felis in faucibus./pdiv classmorediv classmore-itemi classfa fa-calendar aria-hiddentrue/i 2021.11.11/divdiv classmore-itemi classfa fa-user aria-hiddentrue/i摘星星/divdiv classmore-itemi classfa fa-comments-o aria-hiddentrue/i1000/div/div/div/divdiv classmediadiv classmedia-lefta href# one-link-markyesimg classmedia-object data-srcholder.js/64x64 alt64x64srcdata:image/svgxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIPCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyIPCFbQ0RBVEFbI2hvbGRlcl8xOGM4YjY0NjJlNyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4YzhiNjQ2MmU3Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2cPC9zdmcdata-holder-renderedtrue stylewidth: 64px; height: 64px;/a/divdiv classmedia-bodyh4 classmedia-headingMedia heading/h4divi classfa fa-star aria-hiddentrue/ii classfa fa-star aria-hiddentrue/ii classfa fa-star aria-hiddentrue/ii classfa fa-star aria-hiddentrue/ii classfa fa-star-o aria-hiddentrue/i/divCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Craspurus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputatefringilla. Donec lacinia congue felis in faucibus./div/divdiv classmediadiv classmedia-lefta href# one-link-markyesimg classmedia-object data-srcholder.js/64x64 alt64x64srcdata:image/svgxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIPCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyIPCFbQ0RBVEFbI2hvbGRlcl8xOGM4YjY0NjJlNyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4YzhiNjQ2MmU3Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2cPC9zdmcdata-holder-renderedtrue stylewidth: 64px; height: 64px;/a/divdiv classmedia-bodyh4 classmedia-headingMedia heading/h4Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Craspurus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputatefringilla. Donec lacinia congue felis in faucibus./div/divul classpaginationli classdisableda href# aria-labelPrevious one-link-markyesspan aria-hiddentrue«/span/a/lili classactivea href# one-link-markyes1 span classsr-only(current)/span/a/lilia href# one-link-markyes2/a/lilia href# one-link-markyes3/a/lilia href# one-link-markyes4/a/lilia href# one-link-markyes5/a/lilia href# aria-labelNext one-link-markyesspan aria-hiddentrue»/span/a/li/ul/divdiv classcol-sm-3div classpanel panel-defaultdiv classpanel-headingi classfa fa-fire aria-hiddentruestylecolor: #a94442;font-size: 8px/i最新推荐/divdiv classpanel-bodyPanel contentPanel contentPanel content/div/divdiv classpanel panel-primarydiv classpanel-headingPanel heading without title/divdiv classpanel-bodyPanel content/div/divdiv classpanel panel-dangerdiv classpanel-headingPanel heading without title/divdiv classpanel-bodyPanel content/div/div/div
/div!-- Modal --
div classmodal fade idmyModal tabindex-1 roledialog aria-labelledbymyModalLabeldiv classmodal-dialog roledocumentdiv classmodal-contentdiv classmodal-headerbutton typebutton classclose data-dismissmodal aria-labelClosespan aria-hiddentruetimes;/span/buttonh4 classmodal-title idmyModalLabelModal title/h4/divdiv classmodal-body.../divdiv classmodal-footerbutton typebutton classbtn btn-default data-dismissmodalClose/buttonbutton typebutton classbtn btn-primarySave changes/button/div/div/div
/divscript srcstatic/js/jquery-3.7.1.min.js/script
script srcstatic/plugins/bootstrap-3.4.1/js/bootstrap.min.js/script
/body
/html
