本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章就给大家介绍BootStrap是什么以及怎样部署安装。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。大家也可以访问bootstrap教程来获取和学习更多的bootstrap相关视频教程。Bootstrap简介
什么是 Bootstrap ?
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。
Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。
Bootstrap 支持响应式布局,兼容多个终端 (电脑,平板,手机) 设备访问。
部署安装 Bootstrap
1. 在官网 https://v3.bootcss.com/ 下载bootstrap框架。
2. 把下载好的框架放到根目录,然后引入文件。
支持移动设备优先的语句,需要放到 head 标签里的上面
1 | < meta name = "viewport" content = "width=device-width, initial-scale=1" >
|
然后引入 bootstrap 的 css 文件。
bootstrap 框架依赖于jQuery,所以要先引入jQuery库,然后再引入bootstrap的 js 文件。
以下是一段完整的把框架引入进来的代码
(bootstrap 的 js 文件最好放在 body 的最下面)
1 2 3 4 5 6 7 8 9 10 11 12 | <head>
<meta charset= "UTF-8" >
<!--支持移动设备优先-->
<meta name= "viewport" content= "width=device-width,initial-scale=1" >
<title>测试文档</title>
<!--引入 Css 文件-->
<link rel= "stylesheet" type= "text/css" href= "css/bootstrap.css" />
<!--引入 jQuery 文件-->
<script src= "js/jquery-1.11.0.js" type= "text/javascript" charset= "utf-8" ></script>
<!--引入 bootstrap 框架 js 文件-->
<script src= "js/bootstrap.js" type= "text/javascript" charset= "utf-8" ></script>
</head>
|
3. 也可以使用官方提供的 CDN
放在 head 标签里,jQuery 文件的下面
访问的时候必须有网络才可以。
1 2 3 4 5 6 7 8 | <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel= "stylesheet" href= "https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity= "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin= "anonymous" >
<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
<link rel= "stylesheet" href= "https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity= "sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin= "anonymous" >
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src= "https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity= "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin= "anonymous" ></script>
|
总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。
以上就是BootStrap简介以及怎样部署安装(介绍)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
bootstrap表单怎么居中
bootstrap该怎么安装
一般用bootstrap干什么用的
如何使用bootstrap制作form表单
bootstrap如何学习
聊聊jsp页面中导入bootstrap的方法
详解bootstrap中的辅助类
浅谈bootstrap中的panel布局
如何运用bootstrap进行页面布局
bootstrap框架怎么自适应手机
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » BootStrap简介以及怎样部署安装(介绍)