Bootstrap环境搭建及常用内容

最新推荐文章于 2024-06-01 00:10:59 发布

攀岩巨峰的程序猿

最新推荐文章于 2024-06-01 00:10:59 发布

阅读量365

点赞数

分类专栏：环境搭建文章标签： bootstrap

本文链接：https://blog.csdn.net/zhangyuliang6430/article/details/105652509

版权

环境搭建专栏收录该内容

0 篇文章 0 订阅

订阅专栏

Bootstrap官网
官网：https://getbootstrap.com/
中文网：http://www.bootcss.com/

首先，观察Bootstrap文件树（下图）不难发现，文件都是我们常见的一些css、js文件。
压缩版文件树：
在这里插入图片描述
源码包文件树：

Bootstrap为我们写好测试了各种兼容、疑难问题，并构建了一套非常优秀成熟的响应式类，并及时提供了移动端优先的响应式系统，我们只需使用Bootstrap已经封装好的class。

引入Bootstrap

我们需要引入的文件有以下：

（1）css/bootstrap.min.css
CDN：<link href=“https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css” rel=“stylesheet”>

（2）js/bootstrap.min.js
CDN：<script src=“https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js”></script>

（3）还需要有JQuery的支持：js/JQuery.min.js
CDN：<script src=“https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js”></script>

示例代码：

<!DOCTYPE html>
<html>
   <head>
      <title>完整的Bootstrap模板</title>
      <!-- 移动设备优先，确保适当的绘制和触屏缩放 -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
      <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[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.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <h1>Hello, world!</h1>
 
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

常用框架内容：

js:只需要留一个bootstrap.min.js即可
css:只需要一个bootstrap.min.css即可
Fonts:一个都不要删

注： bootstrap中的js文件依赖于jQuery，所以使用bootstrap需要先导入jQuery

布局容器:
https://v3.bootcss.com/css/#overview-container

栅格系统
https://v3.bootcss.com/css/#grid

表格标签
https://v3.bootcss.com/css/#tables

表单
https://v3.bootcss.com/css/#forms

按钮
https://v3.bootcss.com/css/#buttons

导航条
https://v3.bootcss.com/components/#nav

分页
https://v3.bootcss.com/components/#pagination

面板
https://v3.bootcss.com/components/#panels

巨幕
https://v3.bootcss.com/components/#jumbotron

大家可以从 https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip 下载用于生产环境的 Bootstrap。

攀岩巨峰的程序猿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Bootstrap环境搭建及常用内容

Bootstrap官网官网：https://getbootstrap.com/中文网：http://www.bootcss.com/首先，观察Bootstrap文件树（下图）不难发现，文件都是我们常见的一些css、js文件。压缩版文件树：源码包文件树：Bootstrap为我们写好测试了各种兼容、疑难问题，并构建了一套非常优秀成熟的响应式类，并及时提供了移动端优先的响应式系统，我们只...
复制链接

扫一扫

专栏目录