基于Boostrap和Vue设计网页
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于Boostrap和Vue设计网页相关的知识，希望对你有一定的参考价值。
参考技术ABoostrap:
Vue.js:
首先先对要画的网页进行一个原型设计，由于是公司的主页，因此最主要的功能就是介绍这个公司的业务还有一些新闻，在初步设计后，我的原型图大致为：
接着就可以开始尝试用boostrap 教程 和Vue.js来实现。
1、首先我们在 <head> 中先引入boostrap和Vue
.js，其中顺序不要变：
2、 顶端文字跑马灯效果：
然后在CSS样式中，设置 news 的 float 和 width :
最后在js中写跑马灯的实现，用定时器 timer 来计时滚动，判断复制的信息是否到达 box 的最左边来进行无限循环。
3、 导航栏
接着用boostrap来实现一个导航栏，导航栏一般放在页面的顶部。
我们可以使用 navbar 类来创建一个标准的导航栏，后面紧跟: navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。导航栏上的选项可以使用 <ul> 元素并添加 class= navbar-nav 类； 然后在 <li> 元素上添加 nav-item 类， <a> 元素上使用 nav-link 类；
导航栏可以用 bg-dark 和 navbar-dark 来设置导航的样式：
其中， navbar-brand 类用于显示品牌logo，如果使用图片，可以使用 navbar-brand 类来设置图片自适应导航栏:
效果如图：
4、 轮播图片 ：
查阅Boostrap教程，大概了解到有这几个类：
实现效果如图：
5、 网格
我们可以结合网格和 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片：
实现效果如图：
6、 折叠
实现效果如图：
7、 链接列表组
实现效果如下：
8、最后再增加一个页尾，然后完善下就完成了一个公司页面：
页尾效果如图：
整个网页最后的实现效果为：
[图片上传失败...(image-6307a3-1628321072949)]
1、Boostrap和vue.js提供的组件很丰富而且实现起来很容易，值得深入学习。
2、vue.js还需要再深入学习下，在这里只用到了一点点。
以上是关于基于Boostrap和Vue设计网页的主要内容，如果未能解决你的问题，请参考以下文章
基于用户兴趣的个性化网页动态实时生成系统（论文+程序设计源码+数据库文件）
课程设计---快递管理系统（boostrap + servlet + jQuery + Redis + MySQL）