最好用的企业网站cms,推广公司赚钱吗,杭州哪家公司网站做的好,网站栏目合理性自从知道了bootstrap#xff0c;就被他简介#xff0c;大气美观的样式吸引#xff0c;即使在vue框架中#xff0c;仍旧想使用#xff0c;下面给出了vue适配版和原版的代码#xff0c;以飨读者 数据输出部分export default {data(){return {pagestyle:https://v4.bootcss… 自从知道了bootstrap就被他简介大气美观的样式吸引即使在vue框架中仍旧想使用下面给出了vue适配版和原版的代码以飨读者 数据输出部分 export default {data(){return {pagestyle:https://v4.bootcss.com/docs/4.3/dist/css/bootstrap.css,pagecss:https://v4.bootcss.com/docs/4.3/examples/sticky-footer-navbar/sticky-footer-navbar.css,mytitle:v-bind bootstrap样式测试页,msg:教练档案,mycoach:{name:陈培昌,age:22,expertin:[散打,泰拳]},jinerdidi:{name:程劲,starinfo:{age:20,favortie:[品鉴河南烩面,和丁大哥一起厮混],expertin:[{stand:[散打,泰拳]},{ground:[巴西柔术,MMA]}]},},chrouslist:[我不想对你再说些什么,现在是气愤的我,你是被你的虚伪完全淹没,变成讨厌的颜色,......]}}
} html部分 templatediv idappheadmeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1, shrink-to-fitnometa namedescription contentmeta nameauthor contentMark Otto, Jacob Thornton, and Bootstrap contributorsmeta namegenerator contentJekyll v3.8.5title v-textmytitle/titlelink relcanonical hrefhttps://v4ing.bootcss.com/docs/4.3/examples/sticky-footer-navbar/!-- Bootstrap core CSS --link v-bind:hrefpagestyle relstylesheet#这里使用了绑定!-- Custom styles for this template --link :hrefpagecss relstylesheet#这里使用了绑定的简写模式/headbody classd-flex flex-column h-100header!-- Fixed navbar --nav classnavbar navbar-expand-md navbar-dark fixed-top bg-darka classnavbar-brand href#Fixed navbar/abutton classnavbar-toggler typebutton data-togglecollapse data-target#navbarCollapse aria-controlsnavbarCollapse aria-expandedfalse aria-labelToggle navigationspan classnavbar-toggler-icon/span/buttondiv classcollapse navbar-collapse idnavbarCollapseul classnavbar-nav mr-autoli classnav-item activea classnav-link href#Home span classsr-only(current)/span/a/lili classnav-itema classnav-link href#Link/a/lili classnav-itema classnav-link disabled href# tabindex-1 aria-disabledtrueDisabled/a/li/ulform classform-inline mt-2 mt-md-0input classform-control mr-sm-2 typetext placeholderSearch aria-labelSearchbutton classbtn btn-outline-success my-2 my-sm-0 typesubmitSearch/button/form/div/nav/header!-- Begin page content --main rolemain classflex-shrink-0div classcontainerh1 classmt-5div v-textmytitle/div/h1这里也绑定了data输出里面的值p classleadPin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with codepadding-top: 60px;/code on the codemain gt; .container/code./ppBack to a href/docs/4.3/examples/sticky-footer/the default sticky footer/a minus the navbar./p/div/mainfooter classfooter mt-auto py-3div classcontainerspan classtext-mutedPlace sticky footer content here./span/div/footer/body/div
/template CSS部分 style
#app {}.bd-placeholder-img {font-size: 1.125rem;text-anchor: middle;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}media (min-width: 768px) {.bd-placeholder-img-lg {font-size: 3.5rem;}
}
/style 原版bootstrap html页面代码可以对比上面的代码进行调整) !doctype html
html langen classh-100headmeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1, shrink-to-fitnometa namedescription contentmeta nameauthor contentMark Otto, Jacob Thornton, and Bootstrap contributorsmeta namegenerator contentJekyll v3.8.5titleSticky Footer Navbar Template · Bootstrap/titlelink relcanonical hrefhttps://v4ing.bootcss.com/docs/4.3/examples/sticky-footer-navbar/!-- Bootstrap core CSS --
link href/docs/4.3/dist/css/bootstrap.css relstylesheetstyle.bd-placeholder-img {font-size: 1.125rem;text-anchor: middle;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}media (min-width: 768px) {.bd-placeholder-img-lg {font-size: 3.5rem;}}/style!-- Custom styles for this template --link hrefsticky-footer-navbar.css relstylesheet/headbody classd-flex flex-column h-100header!-- Fixed navbar --nav classnavbar navbar-expand-md navbar-dark fixed-top bg-darka classnavbar-brand href#Fixed navbar/abutton classnavbar-toggler typebutton data-togglecollapse data-target#navbarCollapse aria-controlsnavbarCollapse aria-expandedfalse aria-labelToggle navigationspan classnavbar-toggler-icon/span/buttondiv classcollapse navbar-collapse idnavbarCollapseul classnavbar-nav mr-autoli classnav-item activea classnav-link href#Home span classsr-only(current)/span/a/lili classnav-itema classnav-link href#Link/a/lili classnav-itema classnav-link disabled href# tabindex-1 aria-disabledtrueDisabled/a/li/ulform classform-inline mt-2 mt-md-0input classform-control mr-sm-2 typetext placeholderSearch aria-labelSearchbutton classbtn btn-outline-success my-2 my-sm-0 typesubmitSearch/button/form/div/nav
/header!-- Begin page content --
main rolemain classflex-shrink-0div classcontainerh1 classmt-5Sticky footer with fixed navbar/h1p classleadPin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with codepadding-top: 60px;/code on the codemain gt; .container/code./ppBack to a href/docs/4.3/examples/sticky-footer/the default sticky footer/a minus the navbar./p/div
/mainfooter classfooter mt-auto py-3div classcontainerspan classtext-mutedPlace sticky footer content here./span/div
/footer
script srchttps://code.jquery.com/jquery-3.3.1.slim.min.js integritysha384-q8i/X965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH8abtTE1Pi6jizo crossoriginanonymous/scriptscriptwindow.jQuery || document.write(script src/docs/4.3/assets/js/vendor/jquery-slim.min.js\/script)/scriptscript src/docs/4.3/dist/js/bootstrap.bundle.js/script/body
/html 转载于:https://www.cnblogs.com/saintdingspage/p/11413087.html
