sublime上使用插件快速生成模板文件

第一,你要先下载package control的插件,这是一款用来管理插件的插件 。

可能会由于你所在的网络通过代理访问而导致安装失败,你可以通过下面的步骤来手动安装

  1. 点击菜单Preferences > Browse Packages

  2. 然后打开上一级文件夹到已安装的Packages所在文件夹 Installed Packages

  3. 从 https://sublime.wbond.net/Package%20Control.sublime-package 下载后,复制该文件到上面打开的目录

  4. 重启Sublime Text,完成对Package Control的安装

第二,记得要重新开启才能用。然后使用shift+Ctrl+ P来打开面板。下载一些插件,输入install,然后输入emmet,点击下载它,这个插件会提供一些小片段的快速生成代码,例如,

HTML文档需要包含一些固定的标签,比如<html>、<head>、<body>等,现在你只需要1秒钟就可以输入这些标签。

比如输入“!”或“html:5”,然后按Tab键: 

<!DOCTYPE html>

<html lang="en">

<head>

       <meta charset="UTF-8">

       <title>Document</title>

</head>

<body>

</body>

</html>

第三,bootstrap 3框架,这个是需要到网上去下载。

首先我们要知道,我们所有快速生成模板都是存放在preference—browse packages—user里面。

所以首先要去网站下载该插件https://github.com/JasonMortonNZ/bs3-sublime-plugin  然后解压存放到user文件中就可以使用

使用语句类似于bs3-template:html5即可以快速生成模板

<!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="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

           <!-- 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.0/html5shiv.js"></script>

                 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

           <![endif]-->

      </head>

      <body>

           <h1 class="text-center">Hello World</h1>

           <!-- jQuery -->

           <script src="//code.jquery.com/jquery.js"></script>

           <!-- Bootstrap JavaScript -->

           <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

      </body>

</html>

sublime上直接运行html文件

1,安装view in browoser

看左下角是否successed,成功了就可以设置快捷键啦

preference->key binding ,加入这句话:{ "keys": ["ctrl+shift+enter"], "command": "open_in_browser" },保存,使用ctrl+shift+enter就可以在浏览器上运行写好的html文件啦

爱用bootstrap系列一:Sublime上写H5及运行的更多相关文章

  1. 浏览器上写代码,4核8G微软服务器免费用,Codespaces真香

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 一图胜千言 先上图,下面是欣宸在自己的iPad Pro ...

  2. USB系列之四:向U盘上写数据

    在<USB系列之三>中,我们实现了一系列的SCSI命令,在这个系列中,我们要实现向U盘上写扇区的命令,所以,本文相对比较容易,更多地是给出一个实现的源程序. 在<USB系列之三> ...

  3. 反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑) C#中缓存的使用 C#操作redis WPF 控件库——可拖动选项卡的TabControl 【Bootstrap系列】详解Bootstrap-table AutoFac event 和delegate的分别 常见的异步方式async 和 await C# Task用法 c#源码的执行过程

    反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑)   背景介绍: 为了平衡社区成员的贡献和索取,一起帮引入了帮帮币.当用户积分(帮帮点)达到一定数额之后,就会“掉落”一定数量的“帮帮 ...

  4. ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件

    阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...

  5. 在github上写博客

    在github上混了几个月,收获颇多.作为一个开源的坚定信仰者,深深觉得每一个码农都应该参与到开源社区中,github提供了一个平台,让你为开源项目提交代码变得异常简单和直接.以前由于工作异常繁忙和繁 ...

  6. Mac上写C++

    用惯Windows的同学可能刚开始用Mac的时候并不知道如何写C++,我刚开始在Mac上写C++的时候也遇到过这个困扰,Mac上并没有Windows上自己用习惯的Visual C++,下面我分享一下个 ...

  7. [大数据从入门到放弃系列教程]在IDEA的Java项目里,配置并加入Scala,写出并运行scala的hello world

    [大数据从入门到放弃系列教程]在IDEA的Java项目里,配置并加入Scala,写出并运行scala的hello world 原文链接:http://www.cnblogs.com/blog5277/ ...

  8. Git学习系列之Windows上安装Git详细步骤(图文详解)

    前言 最初,Git是用于Linux下的内核代码管理.因为其非常好用,目前,已经被成功移植到Mac和Windows操作系统下. 鉴于大部分使用者使用的是Windows操作系统,故,这里详细讲解Windo ...

  9. BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...

随机推荐

  1. 使用JAVASCRIPT进行数据完整性验证

    页面输入完整性是编写BS经常遇到的问题,如果那里需要就到那里写,那可是要花不少的时候,并且造成不必要的浪费,下面是一个通过校验脚本,使用非常方便,通过传入FORM名就可以进行校验,通过在页面控件中增加 ...

  2. java-----四种引用

    java的四种引用,强弱软虚,用到的场景 标签: java的引用 强弱软虚 2016-05-11 22:59 1237人阅读 评论(0) 收藏 举报 1.强引用(StrongReference) 强引 ...

  3. (转)android从应用到驱动之—camera(1)---程序调用流程

    一.开篇 写博客还得写开篇介绍,可惜,这个不是我所擅长的.就按我自己的想法写吧. 话说camera模块,从上层到底层一共包含着这么几个部分: 1.apk------java语言 2.camera的ja ...

  4. PyQT实现扩展窗口,更多/隐藏

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVcAAAFeCAIAAAC+XMuHAAAgAElEQVR4nOy9Z5Ac153g2fx0F2fiYi ...

  5. 【SSH】远程下载

    scp -r root@123.67.11.93:/var/lamp/abc.txt   ./

  6. 灵活的javaScript

    通常我们不像下面这样声明函数,因为会创建很多全局变量. function checkName() { // code } function checkEmail() { // code } 所以,我们 ...

  7. 正则表达式Regex

    1.概念 正则表达式,又称规则表达式.(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表通常被用来检索.替换那些符合某个模式( ...

  8. 怎么在android实现通过浏览器点击链接打开apk

    intent://scan/#Intent;scheme=appname://appname/[频道]/[id];package=com.appname.package;end http://m.ch ...

  9. js 正则 exec() 和 match() 数据抽取

    js 的正则表达式平常用的不多,但以前抽取数据的时候用到过,主要是有这样的需求: var text='<td class="data">2014-4-4</td& ...

  10. spring-boot 打包成 war包发布

    1.用maven打包成war包 2.将war包用zip方式打开,删除里面的tomcat-embed相关的4个包,删除spring-boot-tomcat包 3.将删除了tomcat相关嵌入包后的war ...