[历史归档]本文原发布于 cstriker1407.info 个人博客内容为历史存档仅供参考。发布时间2019-05-07 标题bootstrap最简单上手笔记分类编程 / web / Bootstrap 标签html·css·bootstrapbootstrap最简单上手笔记官网helloworld本地环境搭建最近自己写了一个html页面需要美化下问了一圈大拿大拿推荐使用bootstrap这个前段框架说是非常适合小白。这里简单笔记下如何使用。官网【 https://v3.bootcss.com/ 】helloworld参考【 https://v3.bootcss.com/getting-started/ 】的基本模板实例我们在本地新建一个helloworld.html文件内容如下!DOCTYPEhtmlhtml langzh-CNheadmeta charsetutf-8meta http-equivX-UA-CompatiblecontentIEedgemeta nameviewportcontentwidthdevice-width, initial-scale1!--上述3个meta标签*必须*放在最前面任何其他内容都*必须*跟随其后--titleBootstrap101Template/title!--Bootstrap--link hrefhttps://cdn.jsdelivr.net/npm/bootstrap3.3.7/dist/css/bootstrap.min.cssrelstylesheet!--HTML5shim 和 Respond.js 是为了让IE8支持HTML5元素和媒体查询media queries功能--!--警告通过 file://协议就是直接将 html 页面拖拽到浏览器中访问页面时 Respond.js 不起作用--!--script srchttps://cdn.jsdelivr.net/npm/html5shiv3.7.3/dist/html5shiv.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/respond.js1.4.2/dest/respond.min.js/script!--/headbodyh1你好世界/h1!--jQuery(Bootstrap 的所有 JavaScript 插件都依赖 jQuery所以必须放在前边)--script srchttps://cdn.jsdelivr.net/npm/jquery1.12.4/dist/jquery.min.js/script!--加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。--script srchttps://cdn.jsdelivr.net/npm/bootstrap3.3.7/dist/js/bootstrap.min.js/script/body/html浏览器打开就可以看到效果了。本地环境搭建通过实例html和文档介绍可以看出bootstrap提供了免费的CDN服务支持快速部署加速访问速度但是我们的使用环境可能无法连接外网而且我们不是开发者所以我们下载一个bootstrap生产环境包和jQuery下载地址可以参考 文件目录如下├── bootstrap-3.3.7-dist │ ├── css │ │ ├── bootstrap.css │ │ ├── bootstrap.css.map │ │ ├── bootstrap.min.css │ │ ├── bootstrap.min.css.map │ │ ├── bootstrap-theme.css │ │ ├── bootstrap-theme.css.map │ │ ├── bootstrap-theme.min.css │ │ └── bootstrap-theme.min.css.map │ ├── fonts │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.svg │ │ ├── glyphicons-halflings-regular.ttf │ │ ├── glyphicons-halflings-regular.woff │ │ └── glyphicons-halflings-regular.woff2 │ └── js │ ├── bootstrap.js │ ├── bootstrap.min.js │ └── npm.js ├── custom_css │ ├── ie10-viewport-bug-workaround.css │ └── navbar-fixed-top.css ├── helloworld.html ├── jquery └── 1.12.4 └── jquery.min.js修改后的html文件如下!DOCTYPEhtmlhtml langzh-CNheadmeta charsetutf-8meta http-equivX-UA-CompatiblecontentIEedgemeta nameviewportcontentwidthdevice-width, initial-scale1!--上述3个meta标签*必须*放在最前面任何其他内容都*必须*跟随其后--titleBootstrap101Template/title!--Bootstrap--link hrefbootstrap-3.3.7-dist/css/bootstrap.min.cssrelstylesheet/headbodyh1你好世界/h1!--jQuery(Bootstrap 的所有 JavaScript 插件都依赖 jQuery所以必须放在前边)--script srcjquery/1.12.4/jquery.min.js/script!--加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。--script srcbootstrap-3.3.7-dist/js/bootstrap.min.js/script/body/html这样一个本地化环境就OK了。
