使用Bootstrap

最新推荐文章于 2023-03-24 13:07:49 发布

_時_

最新推荐文章于 2023-03-24 13:07:49 发布

阅读量1.6k

点赞数

分类专栏：前端文章标签： bootstrap

本文链接：https://blog.csdn.net/PurpleGalaxy/article/details/38437315

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1、不安装使用bootstrap

使用Bootstrap ，要先安装。

如果不安装，可以直接引用网上的文件。

在

http://www.w3cschool.cc/bootstrap/bootstrap-progress-bars.html

网站中，有很多示例，点击 尝试一下 ，之后就会发现类似

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 进度条</title>
   <span style="color:#FF0000;"><strong><link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script></strong></span>
</head>
<body>

<div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="60" 
      aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
      <span class="sr-only">40% 完成</span>
   </div>
</div>

</body>
</html>

这样的例子。如果想要达到相同的效果，只要在自己的文件中引用这些文件即可，也就是说不用安装 bootstrap 也可以使用其功能了。

2、安装使用bootstrap

http://v3.bootcss.com/getting-started/

可以直接下载

预编译版

下载压缩包之后，将其解压缩到任意目录即可看到以下（压缩版的）目录结构：

Copy

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 文件组织形式：未压缩版的文件可以在任意web项目中直接使用。我们同时提供了压缩（bootstrap.min.*）与未压缩 (bootstrap.*) 的 CSS 和 JS 文件。字体图标文件来自于 Glyphicons。

解压缩之后放到工作目录内，然后在文件中引入这些文件即可。