[Bootstrap入门][第一章 Bootstrap介绍]

最新推荐文章于 2025-03-26 08:48:38 发布

zy691357966

最新推荐文章于 2025-03-26 08:48:38 发布

阅读量664

点赞数

文章标签：前端

本文链接：https://blog.youkuaiyun.com/zy691357966/article/details/79549848

版权

[Bootstrap入门][第一章 Bootstrap介绍]

标签（空格分隔）：未分类

视频网址

一.Bootstrap概述

Twitter公司发明的框架，基于HTML,CSS,JavaScript的开源框架。该框架代码简洁，视觉优美，可用于快速，简单的构建基于PC及移动端设备的Web 页面需求。

国内文档官网:http://wwww.bootcss.com

二.Bootstrap特点

跨设备，跨浏览器
响应式布局
提供全面的组件
内置jQuery插件
支持HTML5，CSS3
支持LESS动态样式

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

四.Bootstrap简单例子

js放在后面是为了之后加载，显得看起来快点。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Boottstrap介绍</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-info">Bootstrap</button>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>