自从知道了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. Flutter、Weex、RN，Native对比

  2. Ural 1238 Folding 题解

    目录 Ural 1238 Folding 题解 题意 题解 程序 Ural 1238 Folding 题解 题意 定义折叠.展开为: 单个大写英文字母是一个折叠的串,把它展开后是它本身. 如果\(S\ ...

  3. Python之random.seed()用法

    import random # 随机数不一样 random.seed() print('随机数1:',random.random()) random.seed() print('随机数2:',rand ...

  4. 以太坊再爆高危漏洞！黑客增发ATN 1100万枚token事件始末

    事情发生在5月中旬,ATN技术人员发现Token合约由于存在漏洞受到攻击.不过ATN基金会随后透露,将销毁1100万个ATN,并恢复ATN总量,同时将在主链上线映射时对黑客地址内的资产予以剔除,确保原 ...

  5. SpringBoot热启动让开发更便捷

    在开发过程中,当写完一个功能我们需要运行应用程序测试,可能这个小功能中存在多个小bug,我们需要改正后重启服务器,这无形之中拖慢了开发的速度增加了开发时间,SpringBoot提供了spring-bo ...

  6. 怎样使用js将文本复制到系统粘贴板中

    需要使用到三个document方法: 1. document.execCommand(); 执行某个命令 2. document.queryCommandSupported(); 检测浏览器是否支持某 ...

  7. java lesson10homework

    1.    输入三个整数x, y, z,请把这三个数由小到大输出. 2.  package Homework10; 3.  //:类方法 4.  public class Sort { 5.  voi ...

  8. AutoFac实现程序集级别的依赖注入

    1.介绍      所谓程序集级别的依赖注入是指接口和实现的依赖不使用配置文件或硬代码实现(builder.RegisterType<UserInfoService>().As<IU ...

  9. Hexo折腾记--小白修改新主题

    UPDATE 2019.5.28 不好意思我又换了个新主题ARIA啦...这回没有个人定制了 前言 如果您曾经来过我的博客,就会发现我的个人博客(https://rye-catcher.github. ...

  10. spring cloud EurekaClient 多网卡 ip 配置 和 源码分析（转）

    https://blog.csdn.net/qq_30062125/article/details/83856655 1.前言对于spring cloud,各个服务实例需要注册到Eureka注册中心. ...