用boostrap，js，vue前端实现切换导航栏实现简单的管理系统

已于 2023-12-01 19:50:35 修改
阅读量102 收藏
点赞数
文章标签： javascript 前端 vue.js
于 2023-11-24 14:49:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75886962/article/details/134598750
版权

<!DOCTYPE html>

<html lang="en">

aaa

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        ul {

            background-color: aquamarine;

            width: 20%;

            height: 100%;

            /* height: 8vmin; */

            /* margin: 10vmin auto; */

        }

        li {

            line-height: 25vmin;

            text-align: center;

            /* display: inline-block; */

            list-style-type: none; /* 去掉无序列表的小黑点 */

            /* width: 20%; */

        }

        li:hover {

            background-color: orangered;

        }

        .color {

            background-color: red;

        }

        .item{

            /* font-family: "华文新魏"; */

            font-size: 4em;

            font-family: "华文行楷"

        }

        .a {

            font-family: 'Courier New', Courier, monospace;

            font-size: 20px;

            /* vertical-align: middle; */

        }

        .small{

            font-family: "华文行楷";

            font-size: 4em;

        }

        .main {

            width: 80%;

        }

        .main div{

            text-align: center;

            height: 100px;

            margin: 0 auto;

        }

        .mains {

            display: flex;

            justify-content:space-between;

        }

    </style>

</head>

<body>

    <div class="mains">

        <ul>

            <li class="color">企业简介</li>

            <li>企业动态</li>

            <li>产品展示</li>

            <li>成功案例</li>

            <li>行业资讯</li>

        </ul>

        <div class="main" id="app-4">

            <div class="item" style="display: block;">

                鲜衣怒马少年郎，对镜自怜夜不眠

                <table class="table">

                    <thead>

                      <tr>

                        <th scope="col" v-for="(item,key,index) in liZhicheng[0]" :key="index">{{key}}</th>

                      </tr>

                    </thead>

                    <tbody class="a">

                      <tr v-for="(item,key,index) in liZhicheng" :key="index">

                        <th v-for="(item,key,index) in item" :key="index">

                            <template v-if="key == 'image'">

                                <img :src="item" alt="Image" width="50px" height="50px">

                              </template>

                              <template v-else>

                                {{ item }}

                              </template>

                        </th>

                      </tr>

                    </tbody>

                  </table>

            </div>

            <div class="item" style="display: none;">

                我与春风携过客，你携秋水揽星河

            </div>

            <div class="item" style="display: none;">

                远赴人间惊鸿宴，一睹人间盛世颜

            </div>

            <div class="item" style="display: none;">

                少年曾许凌云志，取得人间第一流

            </div>

            <div class="item" style="display: none;">

                别人笑我太疯颠，我笑他人看不穿

            </div>

        </div>

    </div>

    <div>

    </div>

</body>

</html>

<script>

    var app4 = new Vue({

        el: '#app-4',

        data: {

            todos: [

                { text: '学习 JavaScript' },

                { text: '学习 Vue' },

                { text: '整个牛项目' }

            ],

            liZhicheng: 'sdvgvdg'

        },

        mounted() {

            axios.get('http://localhost:8080/student/page', {

            params: {

                page: 1,

                pageSize: 2

            }

        }).then((result) => {

            console.log(result.data)

            this.liZhicheng = result.data.data.records;

            var a = Object.keys(this.liZhicheng);

            console.log(a);

            console.log(this.liZhicheng[0]);

        })

        },

        methods: {

  isURL(value) {

    // 使用正则表达式验证是否为 URL

    // 这里只是一个简单示例，请根据实际情况进行更复杂的验证

    if (value.contains('http')) {

        return true;

    }

  }

}

    })

    var lis = document.querySelectorAll('li')

        var items = document.querySelectorAll('.item')

        for (i = 0; i < lis.length; i++) {

            lis[i].setAttribute('index', i)

            lis[i].onclick = function () {

                for (var i = 0; i < lis.length; i++) {

                    lis[i].className = ''

                }

                this.className = 'color'

                var index = this.getAttribute('index')

                for (var i = 0; i < items.length; i++) {

                    items[i].style.display = 'none'

                }

                items[index].style.display = 'block'

            }

        }

</script>

limmlzc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue-cli+bootstarp响应式导航条
12-13
vue-cli搭建的项目，要做成响应式的，bootstarp提供的又不太美观，所以自己封装了一个，方便以后的使用。用到了bootstarp的一些辅助类还有媒体查询代码不多
vue页面导入bootstrap的nav导航栏或者其他样式部分不生效。
最新发布
weixin_43843602的博客
01-12 514
后经过检查发现是bootstrap4的版本过于高，将版本将到3.X即可正常显示。
【转载】bootstrap自定义样式-bootstrap侧边导航栏的实现
学习 记录 总结 分享
02-28 1730
bootstrap自带的响应式导航栏是向下滑动的，但是有时满足不了个性化的需求:侧滑栏使用定位fixed使用bootstrap响应式使用工具类 visible-sm visible-xs hidden-xs hidden-sm等对不同屏幕适配
做一个导航网站 vue+Bootstrap单html导航网站
多才多多
06-10 471
作为Bootstrap入门案例是一个不错的选择.采用vue和Bootstrap框架。制作一个属于自己的导航网站.只需一个html文件,
Vue项目实现动态路由和动态导航菜单栏
qq_42797527的博客
11-30 1500
用于前端存储数据，Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。Vuex中的状态存储是响应式的，当Vue组件从store中读取状态时，若store中的状态发生变化，相应的组件也会得到更新。而全局对象的状态存储是静态的，无法自动更新组件中的状态。根据后端返回的用户的菜单地址进行处理拼装成路由格式，存储到vuex中，并添加到路由里面，若vuex中有用户路由数据，直接放行。2每次路由跳转会通过permission.js进行判断和加载，若vuex中无用户路由数据则请求后端，
Bootstrap实现响应式导航栏效果
11-22
为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-...
Vue实现导航栏菜单
10-14
在Vue.js中实现导航栏菜单是一项基础而重要的任务，它能为用户提供清晰的页面结构和交互体验。在提供的代码示例中，我们看到一个简单的Vue应用，用于创建一个左侧导航栏菜单，当用户点击菜单项时，右侧内容区域会...
《Web前端框架技术Bootstrap/Vue》技能考核试题
07-04
《Web前端框架技术Bootstrap/Vue》技能考核试题 一、请使用学习过的Bootstrap框架和Vue框架技术实现如下图所示网页： 1、创建项目Food，完成如下页面。 要求商品列表使用列表渲染指令v-for实现。 提示：导航栏、...
Vue Cli与BootStrap结合实现表格分页功能
08-29
BootStrap提供了多种组件，例如导航栏、表单、按钮、表格等，可以帮助开发人员快速构建Web应用程序的UI组件。 三、使用BootStrap实现表格分页功能 要使用BootStrap实现表格分页功能，需要首先在Vue Cli项目中配置...
vue.js通过路由实现经典的三栏布局实例代码
10-18
Vue.js 是一个流行的前端JavaScript框架，它提供了丰富的功能来构建用户界面。在本文中，我们将探讨如何使用Vue.js的路由功能实现经典的三栏布局。这种布局通常包括一个头部、一个侧边栏和一个主要内容区域，它们...
【前端开发】bootstrap框架：导航栏
`雾博客
06-18 6329
导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开 默认的导航栏 向 <nav>标签添加 class .navbar、.navbar-default。 向上面的元素添加role="navigation"，有助于增加可访问性 向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class nav.
【前端】Vue中使用自适应屏幕响应式的导航栏NavBar组件
鹏啊鹏
05-08 4170
Vue中使用开源组件实现手机端/电脑端响应式导航栏
The resource has been blocked.
xif3681的博客
08-07 7561
问题： Failed to find a valid digest in the 'integrity' attribute for resource 'http://localhost:4200/assets/css/bootstrap.min.css' with computed SHA-256 integrity 'nvT75FkXevX06WR8vlhFFP02xzhq9qFxLQOuS...
【前端】bootstrap4实现导航栏（非nav）
diyinqian的博客
10-28 5740
效果展示： html代码： &amp;lt;!-- 右侧边栏 --&amp;gt; &amp;lt;div class=&quot;list-group&quot;&amp;gt; &amp;lt;button class=&quot;list-group-item all-type-div&quot;&amp;gt; &amp;lt;p class=&quot;list-group-item-h
基于Bootstrap的标准的固定在顶部的导航栏
热门推荐
LeachZhou的博客
03-06 1万+
这是一个基于Bootstrap的标准的固定在顶部的导航栏。后期文章会将响应式导航栏加进去。 html> html> head lang="en"> meta charset="UTF-8"> link rel="stylesheet" href="css/index.css" /> link rel="stylesheet" href="css/bootstrap
【vue】用vue-cli+bootstarp手动写一个响应式的导航条
hello world_
12-13 4552
一、应用场景 在很多时候，我们的网站都是要求设计成响应式 也就是网站可以适应于 PC 端、平板和手机端 关于响应式的设计网上有很多教程，大致分为两种： 1.使用一套代码，利用媒体查询来适配不同的屏幕 2.使用两套代码，根据用户的终端不同切加载不同的代码来适配 两种方法各有优势和劣势，自己根据项目需求来确定具体使用哪种方法 本篇博客介绍第一种方法，利用 bootstarp 的栅格系统 ...
用bootstrap做一个导航栏（自适应）
upup
02-16 1958
----------------中国加油！陕西加油！武汉加油！！！------------------------------------- 上图 上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=...
bootstrap+vue.js实现简单的购物车功能
努力小菜籽的博客
09-22 3250
因为此前做过一段时间Django的后端开发，前端方面的知识一直非常欠缺，总觉得前端的知识太繁杂，无从下手。最近工作比较闲，就研究了一阵子，从最基础的html、js开始看，这个星期学习了一下vue.js，觉得真是棒极了。这篇是使用bootstrap+vue.js实现的一个简单的购物车功能。大部分跟着https://segmentfault.com/a/1190000010801357做的，html的部
"前端Bootstrap Es6 vue学习笔记-基础环境配置和样式排版
通过路由来实现单页面应用的页面切换------------前端Bootstrap Es6 vue学习笔记，内容围绕着前端开发的三大核心技术：Bootstrap、Es6和Vue.js展开。 首先，介绍了Bootstrap框架的基础环境配置。通过开发者工具的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值