VSCode Bootstrap使用方法
Bootstrap简介
Bootstrap 是 Twitter 推出的一个开源的用于前端开发的工具包。是一个CSS/HTML/JavaScript框架。Bootstrap 是基于HTML5和CSS3开发的,包含丰富的组件,根据这些组件可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件:下拉菜单、按钮组、导航、导航条等等。可以说 Bootstrap 是一个简洁简单的前端开发框架,可以让Web开发更迅速更简单
官方网站:https://getbootstrap.com/
中文镜像网站 :https://www.bootcss.com/
可以下载和查看文档。(如果不想下载,可以使用CDN连接,Bootstrap专门构建的自己的免费CND加速服务,基于国内云厂商速度快)
Bootstrap使用方法
插件安装
打开vscode,选择扩展功能(ctrl+shit+x),搜索bootstrap 3 snippets 和bootstrap 4 snippets,安装后,重新加载。
在html文件中输入
这里是的jQuery的引入我们如果想使用jQuery会出现问题,所以我们可以自己写一个代码片段,方便下次使用。
我们把jQuery的引入文件换一下 进如bootstrap的官网
进入上面BootCDN主页中找到jQuery进去选择上面相同的版本
VSCode 如何操作用户自定义代码片段(快捷键)
文件 > 首选项 > 用户代码片段
选择代码片段文件 html.json
输入要自定义的快捷键 和 模板代码段
进入 html文件中 按快捷键 bs3-html5 后按 tab 键 即可实现快速输入代码段
以最高的ie浏览器渲染
<meta http-equiv="X-UA-Compatible" content="IE=edge">
视口设置:移动设备有限 支持移动端 在多个设备上适应 pc iphone 安卓(只要牵扯到移动端)
<meta name="viewport" content="width=device-width, initial-scale=1">
必须引入bootstrap,本地有就可以修改直接使用本地的bootstrap框架
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
为了兼容IE9,让其支持响应式。如果想使用,取消注释
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
使用bootstrap插件,必须使用jquery,再引用bootstrap内部查找
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边)--> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrap JavaScript 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
在bootstrap中,最外层盒子必须有container类或者contain-fluid类
container:固定宽度,并支持响应式布局的容器(width会随着页面大小变化而变化)
contain-fluid:100%宽度,占全部视口(宽度是整个浏览器的宽度)
轮播图:
设置自动播放:data-ride=“carousel”
设置播放的时间间隔(这里设置的时间间隔是2000毫秒):data-interval=“2000”
<!DOCTYPE html>
<html lang="">
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title Page</title> <!-- Bootstrap CSS --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body> <div class="container"> <!--轮播区域--> <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000"> <!--轮播指标--> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1" ></li> <li data-target="#myCarousel" data-slide-to="2" ></li> <li data-target="#myCarousel" data-slide-to="3" ></li> </ol> <!--轮播指标--> <!--轮播项目--> <div class="carousel-inner"> <div class="item active" > <img src="img/img1.jpg" alt="First slide" width="100%"> <div class="carousel-caption">杀破狼</div> </div> <div class="item"> <img src="img/img2.jpg" alt="First slide" width="100%"><div class="carousel-caption">杀破狼</div> </div> <div class="item"> <img src="img/img3.jpg" alt="First slide" width="100%" > <div class="carousel-caption">杀破狼</div> </div> <div class="item"> <img src="img/img0.jpg" alt="First slide" width="100%" > <div class="carousel-caption">杀破狼</div> </div> </div> <!--轮播控制器--> <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> <!--轮播控制器--> </div> </div> <!-- jQuery --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Bootstrap JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></body>
</html>
参考
VSCode Bootstrap使用方法相关推荐
- code的bootstrap如何有提示 vs_VSCode Bootstrap使用方法
Bootstrap简介 Bootstrap 是 Twitter 推出的一个开源的用于前端开发的工具包.是一个CSS/HTML/JavaScript框架.Bootstrap 是基于HTML5和CSS3开 ...
- Bootstrap table方法,Bootstrap table事件,配置
调用 BootStrap Table 方法的语法: $('#table').bootstrapTable('method', parameter); 例如: $('#my_table').bootst ...
- root用户无法启动vscode的解决方法
root用户无法启动vscode 的解决方法 1. vscode with root 2. 解决方法 3. 总结 1. vscode with root 今天切换到Ubuntu的root用户进行编码调 ...
- Web基础(从零开始)——Bootstrap使用方法(文档下载、引入及使用)
Bootstrap基于HTML.CSS和JS,使得Web开发更加快捷. 中文网站:http://www.bootcss.com/ 官网:http://getbootstrap.com/ 推荐使用: B ...
- 【Vue】Vue引入bootstrap的方法
方法一:在main.js中引入(1) npm i jquerynpm i bootstrap 在main.js中 import 'jquery/dist/jquery.min'import 'boot ...
- Bootstrap统计学方法简介以及中心极限定理
一.概念 Bootstrap 一词出自英文习语"pull yourself up by your bootstraps".它的隐含意是"improve your situ ...
- VScode快速下载方法和快捷键
Vscode使用速查 一.下载慢,慢到无法下载 二.快速下载方法 三.常用快捷键 3.1 vscode开发提升效率的快捷键 3.3 vscode文件相关快捷键 一.下载慢,慢到无法下载 二.快速下载方 ...
- BootStrap使用方法为BootStrap3添加jquery.min.js文件(简单易懂)_☆往事随風☆的博客
为BootStrap3添加jquery.min.js文件 一.前言 二.BootStrap简介 三.BootStrap3的使用方法 (1)先去官网找到BootStrap3这个版本的文档. (2)配置B ...
- bootstrap使用方法以及创建bootstrap模板
创建bootstrap项目 1.进入官网进行下载 Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML.CSS 和 JavaScript 框架,用于开发响应式布局.移动设 ...
最新文章
- ajax发不出去请求_Ajax请求发送成功但不进success的解决方法
- mysql 同步 存储过程_mysql 存储过程 实现数据同步
- oracle asm spfile丢失,Oracle 11g RAC ASM磁盘全部丢失后的恢复
- Memcached主从复制+keepalived高可用架构
- python故事书_python的故事
- keepalived(5)——lvs和arrp集成操作(1)
- 【BZOJ-2937】建造酿酒厂 前缀和 + 展环为链 + 乱搞
- Libevent源码分析-----配置event_base
- mysql端口隐藏_修改MySQL端口以及出现的问题
- Maven入门实战笔记-11节[7-11]
- 安卓手机怎么彻底清理手机内存_手机内存难清理?试试直接删掉这3个文件夹...
- elasticsearch怎么实现拼音首字母查询
- 证照之星下载证件照制作软件ps及使用教程,附序列号秘钥激活码
- Kylin使用Spark构建Cube
- 2012年2月有29天
- python3怎么将函数的用法通过help导出到文件
- 全网搜php,PHP实现中文全文搜索的原理介绍
- iOS APP 反编译
- 【推荐】推荐一个听音乐越,放松的小网站 音乐视频都不错
- 美团 R 语言数据运营实战
热门文章
- 游戏直播哪家强?虎牙、斗鱼、熊猫三强App大PK
- 敢问路在何方?国外安卓大神对Android原生开发现状剖析
- 《细节决定成败》语录
- python如何给字加颜色_python之如何输出带颜色的文字
- python 3d渲染_python渲染_python 渲染_python三维渲染 - 云+社区 - 腾讯云
- gateway网关负载均衡策略
- Excel 2010实用技巧:智能的数据分列与表格打印
- project展开和折叠任务
- linux下QQ配置文件路径,EasyWine安装及配置指南
- 微信封杀今日头条小程序;英特尔敲定新 CEO;快手成央视春晚官方合作伙伴 | 雷锋早报...