初次接触Bootstrap,简单谈一下理解。bootstrap是一个简单有强悍的前端框架,它是一个开源项目。当我们需要一些样式等,可以了解bootstrap的相关class、标签名称等所代表的意思,然后搭建页面时,导入bootstrap的js、css等,就可展现相同的效果。

1、首先进入bootstrap官网,中文文档,bootstrapCdn,css only 复制标签,然后在index.html中粘贴,这就引入好了bootstrap。

2、在Header中使用bootstrap,

<template>
<header>
<!-- class中设置了导航栏背景的基本样式 :中文文档中的components中的navbar,
复制其中的背景nav class="navbar navbar-expand-lg navbar-light bg-light"-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- 导航栏中的矢量图:实例中product,右键查看源代码,复制a标签的内容,粘贴如下 -->
<a class="py-2" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mx-auto">
<circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94">
</line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06">
</line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16">
</line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
</a>
<a href="/" class="navbar-brand">Pizza点餐系统</a>
<!-- 水平导航 -->
<ul class="navbar-nav">
<!-- nav-link是取消前面的点 -->
<li><a href="#" class="nav-link">主页</a></li>
<li><a href="#" class="nav-link">菜单</a></li>
<li><a href="#" class="nav-link">管理</a></li>
<li><a href="#" class="nav-link">关于我们</a></li>
</ul>
<!-- ml-auto目的是使ul位置在右边 -->
<ul class="navbar-nav ml-auto">
<li><a href="#" class="nav-link">登陆</a></li>
<li><a href="#" class="nav-link">注册</a></li>
</ul>
</nav> </header>
</template>

效果图如下:

vue项目1-pizza点餐系统1-利用bootstrap4制作导航栏的更多相关文章

  1. 【VIP视频网站项目一】搭建视频网站的前台页面(导航栏+轮播图+电影列表+底部友情链接)

    首先来直接看一下最终的效果吧: 项目地址:https://github.com/xiugangzhang/vip.github.io 在线预览地址:https://xiugangzhang.githu ...

  2. 一 创建一个springboot项目之(微信点餐系统的设计与开发)

    第一步:收到项目需求,进行数据库表的设计. 1.角色的划分: 卖家:  订单,类目 买家:  商品列表 2.功能模块的划分: 商品:商品列表 订单:  订单创建,订单查询,订单取消 类目:基于管理的功 ...

  3. 项目管理理论与实践(6)——利用Excel制作项目文档的设计技巧

    这篇是使用的Excel 2007 进行文档设计,Excel的设计也是一门学问,这里主要介绍一些Excel的设计技巧,后面也会陆续更新该文章. 1. 固定某行某列 首先设计这样的任务管理文档: 现在我想 ...

  4. 基于SpringBoot前后端分离的点餐系统

    基于SpringBoot前后端分离的点餐系统 开发环境:主要采用Spring boot框架和小程序开发 项目简介:点餐系统,分成卖家端和买家端.买家端使用微信小程序开发,实现扫码点餐.浏览菜单.下单. ...

  5. 在vue项目中,解决如何在element表格中循环出图片列!

    效果图: 1,vue项目环境 2,引入element-ui组件 3,制作表格 此处省去制作循环表格数据那步,想看的可以找回我的博客:element中的表格处理:循环出表格数据 今天想在表格出循环出一列 ...

  6. Vue项目中同级组件传值的例子

    大家好,今天给大家带来Vue项目中同级组件之间传值的例子,父子组件之间的通信比较简单,这里不做讨论. 假设该项目中的需求如下: 图中左上角有一个按钮,我们的需求是点击它时,侧边导航栏收缩且主界面放大, ...

  7. iOS不得姐项目--appearance的妙用,再一次设置导航栏返回按钮,导航栏左右按钮的封装(巧用分类)

    一.UI_APPEARANCE_SELECTOR 彩票项目中appearance的用法一直没有搞明白,这次通过第二个项目中老师的讲解,更深一层次的了解到了很多关于appearance的作用以及使用方法 ...

  8. ios 导航栏(自己定义和使用系统方式)

    系统方式: //1.设置导航栏背景图片 [self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] ini ...

  9. vue项目1-pizza点餐系统2-配置路由跳转

    功能目标:点击导航栏中的菜单.主页.路由跳转到不同的组件,点击谁就在在导航栏下展示谁. 1.在router文件夹中(在用脚手架cli搭建项目时,有个couter的选yes)的index.js中,导入如 ...

随机推荐

  1. EDA cheat sheet

    %config InlineBackend.figure_format = 'svg' 在jupyter notebook中使用这个命令绘制更清晰的图像,注意百分号后不能有空格. 1. Univari ...

  2. Spring boot之全局异常捕捉

    在一个项目中的异常我们我们都会统一进行处理的,那么如何进行统一进行处理呢? 新建一个类GlobalDefaultExceptionHandler, 在class注解上@ControllerAdvice ...

  3. Jmeter性能测试环境搭建(Windows下)

    最近刚开始接触Jmeter性能测试,现总结环境搭建如下: 一.windows安装JDK步骤与环境变量配置: 1.先将下载的JDK安装到其默认目录:C:\Program Files\Java\jdk1. ...

  4. Tomcat权威指南(第二版)下载pdf 高清完整中文版-百度云下载

    本书是一本万能工具,其主题涵盖了Apache Tomcat这一广受欢迎的开源servlet.JSP容器和高性能的web server. <Tomcat权威指南>对管理员和web站点管理员而 ...

  5. 学习曲线(learning curves)

    假定假设函数为一个二次函数,只是参数未定: 每给定一个样本大小,就能训练出对应的假设函数,从而利用这个假设函数可以计算出Jtrain(仍然在之前拿来训练的那些样本里面),然后将训练好的假设函数用在全部 ...

  6. docker 安装kafka(快速)

    下载镜像 docker pull wurstmeister/zookeeper docker pull wurstmeister/kafka 启动镜像 docker run -d --name zoo ...

  7. dnSpy

    https://github.com/0xd4d/dnSpy 下载压缩包之后,解压,发现目录里面有3个exe文件 需要用管理员运行dnSpy.exe,然后打开exe文件,设置好断点,然后start 使 ...

  8. leetcode 76最小覆盖子串

    time O(n) spaceO(n) 的方法: 还是借助哈希表,所有字母初始化为0,将t中出现的所有字母次数全都记录在哈希表里: 采用双指针,分别为一个头指针head,和尾指针tail.flag记录 ...

  9. Flutter路由(一)

    第一点:push使用 1.pushNamed——Navigator.of(context).pushNamed('routeName') Navigator.of(context).pushNamed ...

  10. 【miscellaneous】华为智能视频监控系统设计解决方案

    [导读] 近年来,随着经济的快速增长.社会的迅速进步,校园.工厂园区.中小企业.楼宇等领域对安全防范和现场记录报警系统的需求与日俱增,视频监控在工作.生活各方面得到了非常广泛的应用. 1.中小型视频监 ...