自从知道了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. [CF707D]Persistent Bookcase_主席树_bitset

    Persistent Bookcase 题目链接:http://codeforces.com/contest/707/problem/D 注释:略. 题解: 发现虽然$q\le 10^5$但是网格是$ ...

  2. kafka 名词解释(四)

    为什么要了解这些名词的解释呢?因为在学一个新的知识或者领域的时候,我们需要知道它所定义的概念和名词意思,因为只有这样我们才能理解和掌握这个新的知识点,才能更加系统的掌握这个技术. 一.名词解释 1.b ...

  3. Oracle数据库连接工具的使用（二）

    一.SQL Plus介绍 1.简介 Oracle的sql plus是与oracle进行交互的客户端工具.在sql plus中,可以运行sql plus命令与sql语句. 我们通常所说的DML.DDL. ...

  4. Win7 Eclipse 搭建spark java1.8(lambda)环境：WordCount helloworld例子

    [学习笔记] Win7 Eclipse 搭建spark java1.8(lambda)环境:WordCount helloworld例子 lambda表达式是java8给我们带来的一个重量的新特性,借 ...

  5. 使用 Mybatis-plus 进行 crud 操作

    1 Mybatis-Plus简介 1.1 什么是Mybatis-Plus MyBatis-Plus(简称 MP)是一个 MyBatis 的增强工具,在 MyBatis 的基础上只做增强不做改变,为简化 ...

  6. Kubernetes---启动及退出动作

    apiVersion: v1 kind: Pod metadata: name: lifecycle-demo spec: containers: - name:lifecycle-demo-cont ...

  7. MongoDB的复合唯一索引

    一 创建 JavaScript Shell db.room.ensureIndex({'floor':1,'num':1}) Spring Data @Data // lombok @Document ...

  8. js判断变量是否为整数

    //返回false则不为整数数字,返回ture则反之 var isIntNumber=function(val){ if (isNaN(val) || Math.floor(val) != val) ...

  9. Install CUDA 6.0 on Ubuntu 14.04 LTS

    Ubuntu 14.04 LTS is out, loads of new features have been added. Here are some procedures I followed ...

  10. vue-cli之加载ico文件

    vue-cli之加载ico文件 vue-cli加载ico文件需要在vue.config.js设置ico加载,代码如下: module.exports = { publicPath: process.e ...