自从知道了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. Unsupported major.minor version 52.0——解决

    Unsupported major.minor version 52.0 就是编辑用的是jdk8 而运行用的是jdk7, 改成jdk8就好了 参考文章:https://blog.csdn.net/qq ...

  2. python3中django-admin找不到core的解决方法

    今天在测试django-admin startproject mysite时,出现以下问题: ImportError: No module named django.core 在执行此命令之前,我将d ...

  3. poj1269 (叉积求直线的交点)

    题目链接:https://vjudge.net/problem/POJ-1269 题意:给出4个顶点,表示两条直线,求这两条直线的相交情况,重合输出LINE,平行输出NONE,相交于一点输出该点的距离 ...

  4. POJ 1015 Jury Compromise （记录路径的背包问题）

    (点击此处查看原题) 题意 为了审判某一个人,需要在n个人当中选出m个人组成陪审团,n个人中每个人都有作为起诉方的价值p和作为辩护方的价值d,为了保证公平性,要求m个人作为起诉方的价值之和P和作为辩护 ...

  5. Docker的安装和学习

    dockers学习 2019年2月23日开始     docker系统要求             centos 7 核心为3.1以上         centos6.5以上 核心为 2.6以上    ...

  6. mydumper,myloader原理及实战

    mydumper 特性 (1)多线程备份(和mysqlpump的多线程不同,mysqlpump多线程备份的粒度是表,mydumper多线程备份的粒度是行,这对于备份大表特别有用)(2)因为是多线程逻辑 ...

  7. MySQL 官方样板数据库sakila

    Sakila示例数据库最初由MySQL AB文档团队的前成员Mike Hillyer开发,旨在提供可用于书籍,教程,文章,样本等示例的标准模式. Sakila示例数据库还用于突出MySQL的最新功能, ...

  8. 超详细，新手都能看懂 ！使用SpringBoot+Dubbo 搭建一个简单的分布式服务

    来自:JavaGuide Github 地址:https://github.com/Snailclimb/springboot-integration-examples 目录: 使用 SpringBo ...

  9. django+uwsgi+nginx: websock 报502/400

    耽搁了近2个月,终于解决了,主要是nginx/uwsgi/django相关的配置: 一.django工程settings.py,添加 WEBSOCKET_FACTORY_CLASS = "d ...

  10. 选项卡TAB

    一.基础信息 关键class名:nav 写法: (1)头部选中状态:class="active" (2)头部按钮进行切换:<a>加data-toggle="t ...