利用vue v-bind属性绑定bootstrap样式以及输出数据

自从知道了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部分
<template><div id="app"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="description" content=""><meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"><meta name="generator" content="Jekyll v3.8.5"><title v-text="mytitle"></title><link rel="canonical" href="https://v4ing.bootcss.com/docs/4.3/examples/sticky-footer-navbar/"><!-- Bootstrap core CSS --><link v-bind:href='pagestyle' rel="stylesheet">#这里使用了绑定！<!-- Custom styles for this template --><link :href='pagecss' rel="stylesheet">#这里使用了绑定的简写模式</head><body class="d-flex flex-column h-100"><header><!-- Fixed navbar --><nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"><a class="navbar-brand" href="#">Fixed navbar</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarCollapse"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li></ul><form class="form-inline mt-2 mt-md-0"><input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"><button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button></form></div></nav></header><!-- Begin page content --><main role="main" class="flex-shrink-0"><div class="container"><h1 class="mt-5"><div v-text="mytitle"></div></h1>这里也绑定了data输出里面的值<p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>main &gt; .container</code>.</p><p>Back to <a href="/docs/4.3/examples/sticky-footer/">the default sticky footer</a> minus the navbar.</p></div></main><footer class="footer mt-auto py-3"><div class="container"><span class="text-muted">Place 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 lang="en" class="h-100"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="description" content=""><meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"><meta name="generator" content="Jekyll v3.8.5"><title>Sticky Footer Navbar Template · Bootstrap</title><link rel="canonical" href="https://v4ing.bootcss.com/docs/4.3/examples/sticky-footer-navbar/"><!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.css" rel="stylesheet"><style>.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 href="sticky-footer-navbar.css" rel="stylesheet"></head><body class="d-flex flex-column h-100"><header><!-- Fixed navbar --><nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"><a class="navbar-brand" href="#">Fixed navbar</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarCollapse"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li></ul><form class="form-inline mt-2 mt-md-0"><input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"><button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button></form></div></nav>
</header><!-- Begin page content -->
<main role="main" class="flex-shrink-0"><div class="container"><h1 class="mt-5">Sticky footer with fixed navbar</h1><p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>main &gt; .container</code>.</p><p>Back to <a href="/docs/4.3/examples/sticky-footer/">the default sticky footer</a> minus the navbar.</p></div>
</main><footer class="footer mt-auto py-3"><div class="container"><span class="text-muted">Place sticky footer content here.</span></div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script>window.jQuery || document.write('<script src="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.3/dist/js/bootstrap.bundle.js"></script></body>
</html>

 

转载于:https://www.cnblogs.com/saintdingspage/p/11413087.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/410057.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

[html] 浏览器的默认字体大小是多少？怎么设计它的基准？

[html] 浏览器的默认字体大小是多少？怎么设计它的基准？

[html] 浏览器的默认字体大小是多少&#xff1f;怎么设计它的基准&#xff1f; 多数浏览器的默认字体大小均为16px。可设置CSS的font-size改变字体大小。 <style> html,body{ font-size: 16px; } </style> 也可设置font-size:62.5%&#xff0c;使得1rem 10px来约…
阅读更多...
python中urframe函数的用法_python类中的内置函数

python中urframe函数的用法_python类中的内置函数

__init__():__init__方法在类的一个对象被建立时&#xff0c;马上运行。这个方法可以用来对你的对象做一些你希望的初始化。注意&#xff0c;这个名称的开始和结尾都是双下划线。代码例子:#!/usr/bin/python# Filename: class_init.pyclass Person:def __init__(self, name):se…
阅读更多...
Hadoop中RPC机制

Hadoop中RPC机制

Hadoop中RPC机制 RPC(Remote Procedure Call Protocol)远程过程调用协议&#xff0c;它是一种通过网络从远程计算机程序上请求服务&#xff0c;而不需要了解底层网络技术的协议。Hadoop底层的交互都是通过rpc进行的。例如&#xff1a;datanode和namenode 、tasktracker和jobtra…
阅读更多...
C++中如何读取一个数的位数_求1000以内的水仙花数

C++中如何读取一个数的位数_求1000以内的水仙花数

点击上方 蓝字关注我们大家好&#xff0c;我是阿汤哥。看知乎上有朋友说还不明白怎么判断水仙花数&#xff0c;今天我们就来看看这个问题。(PS&#xff1a;“求1000以内的水仙花数”这道题阿汤哥记忆犹新。到现在还记得这是我大一上学期期末考试的编程题。)怎么求水仙花数&…
阅读更多...
[html] link标签的属性media有哪些值？都有什么作用？

[html] link标签的属性media有哪些值？都有什么作用？

[html] link标签的属性media有哪些值&#xff1f;都有什么作用&#xff1f; 根据w3c的介绍&#xff0c;media属性表示link的链接文档会应用于何种媒介&#xff08;设备&#xff09;上。用于为不同的媒介类型规定不同的样式。常用的值为screen(计算机屏幕&#xff0c;默认), pr…
阅读更多...
双向绑定v-bind

双向绑定v-bind

通过v-model绑定输出数据<script> 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样…
阅读更多...
python函数复用_【python学习-4】可复用函数与模块

python函数复用_【python学习-4】可复用函数与模块

1、自定义函数自定义函数格式如下&#xff1a;def (参数列表):return#!/usr/bin/python#定义函数&#xff0c;打印数字1~5defprintNum5():#range函数&#xff0c;生成列表集合&#xff0c;有3个入参&#xff1a;start(可选&#xff0c;起始数)&#xff0c;stop(终止数&#xff…
阅读更多...
(todo)数组名 有存储空间吗？

(todo)数组名 有存储空间吗？

转与csdn 对于数组b[]&#xff0c;b是数组的地址&#xff0c;但b不算变量&#xff0c;有没有一个地方存放b&#xff1f;而且b是不 是存放的就是自己所在的地址。 ------------------------------------------------------------- 数组名不是对象&#xff0c;数组才是对象&am…
阅读更多...
[html] 实现一个居中半透明的模态窗

[html] 实现一个居中半透明的模态窗

[html] 实现一个居中半透明的模态窗 .modal{ width: 400px; height: 250px; position: absolute; top: 50%; left: 50%; background: rgba(0,0,0,.5); transform: translateX(-50%) translateY(-50%); }个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容…
阅读更多...
xyz坐标图_“色觉地图”的建立（二）：辐照度与亮度、rgb空间、“颜色图”的混色方式...

xyz坐标图_“色觉地图”的建立（二）：辐照度与亮度、rgb空间、“颜色图”的混色方式...

上篇““色觉地图”的建立&#xff08;一&#xff09;&#xff1a;光感受器、色匹配实验与CIE RGB坐标系“中说到&#xff0c;人的色觉是线性的&#xff0c;我们可以用叠加原理“混色”——这意味着色觉的空间固定不变&#xff0c;我们可以任意选择一组基底&#xff08;或说坐标…
阅读更多...
Nginx的应用之动静分离

Nginx的应用之动静分离

Nginx 的动静分离 我们通过中间件将动态请求和静态请求进行分离&#xff0c;减少了不必要的请求消耗和延时。 动静分离后&#xff0c;即使动态服务不可用&#xff0c;但静态资源不会受到影响。 应用实例 1、准备环境 系统角色主机名IP服务CentOS 7.2反向代理Nginx_Proxy192.168…
阅读更多...
[html] 说说你对网格布局的理解

[html] 说说你对网格布局的理解

[html] 说说你对网格布局的理解 目前是最强大的布局方案&#xff0c;但兼容性差个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题
阅读更多...
【SQLSERVER】SQL SERVER 2008筛选表报错

【SQLSERVER】SQL SERVER 2008筛选表报错

【SQLSERVER】SQL SERVER 2008筛选表报错 错误详细&#xff1a;标题: Microsoft SQL Server Management Studio------------------------------无法为该请求检索数据。 (Microsoft.SqlServer.Management.Sdk.Sfc)有关帮助信息&#xff0c;请单击: http://go.microsoft.com/fwli…
阅读更多...
安装ipython失败 in error catcher_疯狂的Python：零基础小白入门帖子详情 - 网易云课堂...

安装ipython失败 in error catcher_疯狂的Python：零基础小白入门帖子详情 - 网易云课堂...

C:\Users\David>pip install IpythonCollecting IpythonUsing cached ipython-6.1.0-py3-none-any.whlCollecting pygments (from Ipython)Downloading Pygments-2.2.0-py2.py3-none-any.whl (841kB)53% |█████████████████▏ | 450kB 3.3kB/…
阅读更多...
3d打印英语文献_锐医学院 | 只需10分钟！解读康复医学文献+英语学习

3d打印英语文献_锐医学院 | 只需10分钟！解读康复医学文献+英语学习

文献解读英语学习只需10分钟锐医学院致力于专业康复教育培训同时&#xff0c;也在康复领域专家的合作下&#xff0c;一直在研究康复领域最前沿所取得的研究成果、存在的问题以及发展趋势进行系统和全面的叙述和评论与各领域康复专业人士分享。文献解读有助于发现前沿性问题&…
阅读更多...
node.js通过回调函数获取异步函数的返回结果

node.js通过回调函数获取异步函数的返回结果

html文件代码<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>我的node.js首页</title> </head> <body></body> </html> 通过buffer流读取html文件var fs require(fs);…
阅读更多...
[html] 写页面布局时你有考虑过分辨率因素吗？还要考虑哪些因素呢

[html] 写页面布局时你有考虑过分辨率因素吗？还要考虑哪些因素呢

[html] 写页面布局时你有考虑过分辨率因素吗&#xff1f;还要考虑哪些因素呢 1.支持的最大和最小分辨率 2.流式布局还是响应式布局个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起…
阅读更多...
StreamWriter打开文件报错：”不支持给定路径的格式。“

StreamWriter打开文件报错：”不支持给定路径的格式。“

StreamWriter swnew StreamWriter(path,false,Encoding.Default);这段话出异常&#xff0c;查下来发现文件名中还有:号&#xff0c;把半角的:变成全角的&#xff1a;问题即可解决。 转载于:https://www.cnblogs.com/yanzhenan/archive/2012/02/29/2373511.html
阅读更多...
bigdecimal 保留两位小数_一律使用 BigDecimal，避免后患？

bigdecimal 保留两位小数_一律使用 BigDecimal，避免后患？

你知道的越多&#xff0c;不知道的就越多&#xff0c;业余的像一棵小草&#xff01;你来&#xff0c;我们一起精进&#xff01;你不来&#xff0c;我和你的竞争对手一起精进&#xff01;编辑&#xff1a;业余草zhuanlan.zhihu.com/p/94144867推荐&#xff1a;https://www.xttbl…
阅读更多...
tcp 四次挥手_tcp三次握手和四次挥手

tcp 四次挥手_tcp三次握手和四次挥手

SYN&#xff1a;一个很小的包&#xff0c;tcp的第一个包&#xff08;同步序列编号&#xff09;ACK:确认响应SYN、ACK:为1表示确认连接FIN表示关闭连接&#xff0c;PSH表示有 DATA数据传输&#xff0c;RST表示连接重置。Acknowledge number(ack)&#xff1a;确认号&#xff0c;大…
阅读更多...
最新文章

Copyright @ 2022~2023