Bootstrap前端框架学习(一):Bootstrap在Vue项目中的安装及可视化布局
Bootstrap前端框架学习(一):Bootstrap在Vue项目中的安装及可视化布局
- node.js的安装
- bootstrap的安装
- bootstrap快速布局
node.js的安装
我们需要安装node.js,使用node.js的npm包管理器来完成Bootstrap的安装。
前往Node.js中文网下载并安装node.js,安装程序会自动把node添加到环境变量,在安装完成后重启即可生效。
重启后在终端中输入以下命令查看node.js是否安装成功:
node -v
然后输入以下命令查看npm是否安装成功:
npm -v
若能查看版本号即安装成功。
bootstrap的安装
我选择bootstrap的最新版本bootstrap4进行安装,前往bootstrap4的官方网站(或bootstrap4中文站),参考官方教程进行下载安装。
(注意,bootstrap中的js插件依赖于jquery,因此安装了bootstrap后,还要安装jquery并在bootstrap之前引用。并且bootstrap4中增加了对popper.js的依赖,因此,也要安装popper.js并在bootstrap之前引用。)
在官方教程中给出了HTML模板,如下:
<!doctype html>
<html lang="en"><head><!-- Required meta tags --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap CSS --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><title>Hello, world!</title></head><body><h1>Hello, world!</h1><!-- Optional JavaScript --><!-- jQuery first, then Popper.js, then Bootstrap JS --><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script></body>
</html>
我们可以直接按照模板通过网络直接引用bootstrap及对应的依赖库,但这容易受网络波动影响,我选择用npm直接手动下载到本地。
我以vue-cli创建的vue项目为例,在vue项目根目录中执行以下语句:
npm install bootstrap@4.3.1
然后根据HTML模板,bootstrap-4.3.1对应jquery-3.3.1和popper-1.14.7,所以我们下载指定版本的依赖库:
npm install jquery@3.3.1
npm install popper.js@1.14.7
这样,bootstrap、jquery、popper包会被下载到node_modules/
文件夹下,接下来便是在代码中引用上述包。
若是普通的HTML项目,则按照上述HTML模板的位置和顺序在HTML文件中引用即可。但是在vue-cli项目中,不能在index.html
文件里引用,这样子引用是无效的,应该在main.js
文件里通过import引用,如下:
import "jquery/dist/jquery.min";
import "popper.js/dist/popper.min";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min";
注意bootstrap的引用放在最后。
bootstrap快速布局
完成了bootstrap的安装与引用,接下来便是bootstrap的布局和实现。
我们可以直接用代码手动构建bootstrap布局页面,但这样比较麻烦,推荐使用在线可视化工具:
- 官方的在线可视化布局工具Layoutit!,支持bootstrap4
- 还有国内的中文版在线可视化布局工具,支持bootstrap3,不支持bootstrap4
利用在线工具可以迅速生成期待的布局,并下载对应的HTML代码,如下图:
Bootstrap前端框架学习(一):Bootstrap在Vue项目中的安装及可视化布局相关推荐
- bootstrap 按钮样式单选效果_【20201117】Bootstrap前端框架学习笔记
1. 介绍 1.1 介绍 Bootstrap是一个免费的web前端框架,它将HTML.CSS.Javascript结合到一起,制定了一系列的前端开发规则,使设计网页就像搭积木一样简单. 今天我们就跟着 ...
- Vue项目中 sass安装
1. sass-loader依赖于node-sass,所以要安装node-sass cnpm install node-sass --save-dev //安装node-sass cnpm insta ...
- vue学习笔记一:vue项目中设置背景图片
这几天在用vue开发一个项目,真的是到处都是坑啊,就连设置图片背景,也和前面用的不一样了,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来, background:url( ...
- cytoscape.js在vue项目中的安装及案例
1. 安装: npm i cytoscape --save 2. 引入:main.js import cytoscape from 'cytoscape'; Vue.prototype.$cytosc ...
- 【转】常用前端框架(类似Bootstrap)
转自博客园:http://www.cnblogs.com/Renyi-Fan/p/9287632.html 目录 一.总结 一句话总结:框架大同小异,可以多去各自官网看看效果(比较一下各自的不同点(也 ...
- html5前端开发框架模板,HTML5中50个免费的Bootstrap前端框架模板
原标题:HTML5中50个免费的Bootstrap前端框架模板 毫无疑问,Bootstrap模板的受欢迎程度依然如雨后春笋般迅速增长,这股力量就在不久前还被低估了呢,Bootstrap前端框架基于最新 ...
- 前端框架Vue——vue-i18n ,vue项目中如何实现国际化,$t的用法
前端框架Vue--vue-i18n ,vue项目中如何实现国际化,$t的用法 vue中html页面写入$t('')怎么显示
- 搭建vue前端框架或微信小程序vue框架步骤
搭建vue前端框架或微信小程序vue框架步骤 1.下载node.js 下载地址:https://nodejs.org/en/download/ 查看node.npm版本,确保环境正确 node --v ...
- vue项目中引入bootstrap的方法
vue项目中引入bootstrap?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 相关教程推荐:<bootstrap教程> 在 vue 项目 ...
最新文章
- 图像和视频的快速去雾算法研究
- 安卓的java无法访问网络_Android网络访问的基本方法
- vSphere Datacenter设计– vSphere 6.0中的vCenter体系结构更改–第2部分
- android 系统联系人,Android读取系统联系人
- linux常用ipc技术,LINUX系统编程之IPC
- python数据包之利器scapy用法!
- jQuery事件委托
- Atitit 转移特效attilax总结
- Android中热更新实现--Sophix方案
- Jmeter---脚本录制
- 一阶高通滤波+二阶Mahony滤波的四元数姿态解算
- Slot-Gated Modeling for Joint Slot Filling and Intent Prediction论文笔记
- ###好好好###异质信息网络分析与应用综述(石川)--阅读
- 关于小程序上传图片到服务器
- Debian 11 Linux生产环境配置(Git2.30.2 Python3.9.2 Golang1.18 Docker20.10.4 Nginx1.21.6)
- ANDROID 65536错误
- java咖啡机提示除钙,请注意:咖啡机的14种错误用法!
- PDF如何转Word?分享几个实用办公软件给你
- 19.2、Javaweb案例_Servlet代码抽取优化分页数据redis缓存优化分页数据展示
- rot5/rot13/rot18/rot47
热门文章
- python二维码生成识别代码_Python3+qrcode+zxing生成和识别二维码教程
- xmpp服务器性能测试,TSung测试XMPP协议 集群配置
- 如何进行Linux中的火墙策略设计优化
- 如何显示计算机中本地用户和组,win10电脑管理界面如何显示出“本地用户和组”功能...
- java hadoop mahout_一个基于Mahout与hadoop的聚类搭建
- O2OA (翱途) 平台 V8.0 发布新增数据台账能力
- win7摄像头软件_菜鸟记400旧手机当摄像头,网课直播设备不用愁
- LeakCanary 详解
- Tailscale 学习资料:Headscale 的部署方法和使用教程
- GMap.net 涉及标绘源码