自从知道了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. Object类的equals方法 常用API

    boolean equals (Object obj)(return this==obj):  p1.equals(p2): 基本数据类型比较的是值      引用数据类型:默认比较的是两个对象的地址 ...

  2. bootstrap-table的一些配置参数例子

    $('#reportTable').bootstrapTable({ method: 'post', url: '/qStock/AjaxPage', dataType: "json&quo ...

  3. [转帖]Vim全键盘操作

    https://www.cnblogs.com/pzqu/p/11416436.html Vim脱离鼠标第一步 平时不可缺少的会用到vim,但是避免不了鼠标,事实上,省略鼠标是完全可以的,没有想像中那 ...

  4. Oracle 查询id相同多个数据取一条

    涉及场景 需要查出同一ID下 COLUMN_A字段为数值型的 多条数据 只去COLUMN_A为最小值的那条 SELECT * FROM (SELECT A.ID, A.COLUMN_A, ROW_NU ...

  5. Django 用Session和Cookie分别实现记住用户登录状态

    简介 由于http协议的请求是无状态的.故为了让用户在浏览器中再次访问该服务端时,他的登录状态能够保留(也可翻译为该用户访问这个服务端其他网页时不需再重复进行用户认证).我们可以采用Cookie或Se ...

  6. 数据结构 -- 栈（Stack）

    一.栈的简介 定义 栈(英语:stack)又称为堆栈或堆叠,栈作为一种数据结构,它按照先进后出的原则存储数据,先进入的数据被压入栈底,最后的数据在栈顶,需要读数据的时候从栈顶开始弹出数据(最后一个数据 ...

  7. 网络流+最小生成树的最少割边数--How Many to Be Happy?

    题意:https://blog.csdn.net/Ratina/article/details/95200594 思路: 首先我们知道最小生成树就是按长度枚举边,能连就连. 那么,如果这条边在最小生成 ...

  8. Python学习2——使用字符串（完整版）

    """ 在C语言入门的时候字符串没有好好学习,导致后期语言根本没有入门, 更导致之后大量的codeing时间浪费,效率低下. 因此,借助这次Python入门,好好地将字符 ...

  9. python — lambda表达式与内置函数

    目录 1 lambda表达式 (匿名函数) 2 内置函数 1 lambda表达式 (匿名函数) 用于表示简单的函数 lambda表达式,为了解决简单函数的情况: def func(a1,a2): == ...

  10. python中sort和sorted用法的区别

    Python list内置sort()方法用来排序,也可以用python内置的全局sorted()方法来对可迭代的序列排序生成新的序列 一,最简单的排序 1.使用sort排序 my_list = [3 ...