自从知道了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:,

                expertin:['散打','泰拳']

            },

            jinerdidi:{

                name:'程劲',

                starinfo:{

                  age:,

                  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: .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: .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: .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: .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>

利用vue v-bind属性绑定bootstrap样式以及输出数据的更多相关文章

  1. 黑马vue---17、vue中通过属性绑定绑定style行内样式

    黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...

  2. 黑马vue---16、vue中通过属性绑定为元素设置class类样式

    黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...

  3. Vue 框架-05-动态绑定 css 样式

    Vue 框架-05-动态绑定 css 样式 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 cl ...

  4. 2-4 Vue中的属性绑定和双向数据绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 第二章 Vue快速入门-- 15 vue中通过属性绑定为元素设置class类样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. 第二章 Vue快速入门-- 16 vue中通过属性绑定为元素绑定style行内样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. Vue中通过属性绑定为元素绑定style行内样式

    1.直接在元素上通过:style的形式,书写样式对象 2.将样式对象定义在data中,并直接引用到:style中 3.在:style中通过数组,引用多个data上的样式对象

  8. Vue中src属性绑定的问题

    地址:https://blog.csdn.net/qq_25479327/article/details/80082520 地址:https://blog.csdn.net/sinat_3655513 ...

  9. vue学习2-bind属性绑定

    需要加上 v-html才能显示网页

随机推荐

  1. SQLite进阶-15.触发器

    目录 触发器(Trigger) 触发器(Trigger)的要点: 触发器应用 查看触发器 删除触发器 触发器(Trigger) 触发器(Trigger)是数据库的回调函数,它会在指定的数据库事件发生时 ...

  2. 【LOJ】#3051. 「十二省联考 2019」皮配

    LOJ#3051. 「十二省联考 2019」皮配 当时我在考场上觉得这题很不可做... 当然,出了考场后再做,我还是没发现学校和城市是可以分开的,导致我还是不会 事实上,若一个城市投靠了某个阵营,学校 ...

  3. （五）mybatis开发dao层

    目录 SqlSession 是线程不安全的 原始 dao 开发方法 Mapper 代理方法 关于代理对象 SqlSession 是线程不安全的 SqlSession 是 线程不安全 的: 对于它,我们 ...

  4. python学习-9 pycharm的安装

    1.python 开发IDE :  pycharm.eclipse等等 安装: 百度搜索pycharm 就可以了,去官网下载专业版.(百度有各种破解方法)                    #不要 ...

  5. 第5章：Linux系统管理

    1.文件读写 1).Python内置的open函数 f = open('data.txt', 'w') f.write('hello, world') f.close() 2).避免文件句柄泄露 tr ...

  6. JWT与Session比较和作用

    1. JSON Web Token是什么 JSON Web Token (JWT)是一个开放标准(RFC 7519),它定义了一种紧凑的.自包含的方式,用于作为JSON对象在各方之间安全地传输信息.该 ...

  7. Oracle设置权限和还原数据库

    Oracle还原数据库 ,在最高权限账户上,先将安装好的数据上创建一个账户 -- Create the user create user newsafe identified by newsafe d ...

  8. 【web安全】浅谈web安全之XSS

    XSS定义 XSS, 即为(Cross Site Scripting), 中文名为跨站脚本, 是发生在目标用户的浏览器层面上的,当渲染DOM树的过程成发生了不在预期内执行的JS代码时,就发生了XSS攻 ...

  9. OpenCl入门——实现简单卷积

    现在的卷积实现无非是那么几种:直接卷积.im2col+gemm.局部gemm.wingrod.FFT.如果直接卷积的话,其实kernel函数是比较好实现.以下代码参考至<OpenCL Progr ...

  10. python小知识- webbrowser模块 + join()方法

    一.join描述 将序列中的元素以指定的字符连接生成一个新的字符串. 语法 语法: ‘sep’.join(seq) 参数说明: sep:分隔符.可以为空 seq:要连接的元素序列.字符串.元组.字典 ...