• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Bootstrap 安装

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

在本教程中,我们将学习如何使用Twitter Bootstrap v3.0编译版本创建一个基本的Bootstrap模板。

下载引导程序文件

Bootstrap有两个版本可供下载,编译的Bootstrap和Bootstrap源文件。

编译下载包含CSS和JavaScript文件的编译和缩小版本以及字体格式的图标,用于更快的Web开发

源版本包含所有CSS和JavaScript的原始源文件,以及文档的本地副本。

我们将使用编译的Bootstrap文件。 这里是下载链接。

http://getbootstrap.com/

文件结构

一旦下载编译的Bootstrap,解压缩压缩文件夹。你将找到以下文件结构和内容。

bootstrap/
    +-- css/
    |   +-- bootstrap.css
    |   |-- bootstrap.min.css
    |   |-- bootstrap-theme.css
    |   |-- bootstrap-theme.min.css
    +-- js/
    |   |-- bootstrap.js
    |   |-- bootstrap.min.js
    +-- fonts/
        |-- glyphicons-halflings-regular.eot
        |-- glyphicons-halflings-regular.svg
        |-- glyphicons-halflings-regular.ttf
        |-- glyphicons-halflings-regular.woff

Bootstrap的编译版本提供了编译的CSS和JS文件(bootstrap.*),以及编译和缩小CSS和JS(bootstrap.min.*)。

在fonts文件夹中有四个字体文件(glyphicons-halflings-regular.*)。这些字体文件包括Glyphicon Halflings集中的200个图标。

请注意,所有JavaScript插件都需要包含jQuery。

使用Bootstrap创建Web页面

打开代码编辑器并创建一个新的HTML文件,如下。

<!DOCTYPE html>
<html>
<head>
<title>Basic HTML File</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>Hello, world! W3Cschool !</h1>
</body>
</html>

要使此HTML文件成为Bootstrap模板,需包括相应的Bootstrap CSS和JS文件。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
</head>
<body>
    <h1>Hello, world! W3Cschool !</h1>    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</body>
</html>
我们在页面底部包含JavaScript文件 - 在关闭<body>标签(即</body>)之前,以提高网页的性能。
注意css和Javascript的相对路径。

Staticfile CDN 推荐

国内推荐使用 Staticfile CDN 上的库:

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="stylesheet">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js" rel="external nofollow" ></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js" rel="external nofollow" ></script>



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Bootstrap4 首个Beta版发布:距上次发布已7月之久!发布时间:2022-01-31
下一篇:
Bootstrap CSS编码规范发布时间:2022-01-31
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap