Bootstrap CSS

最新推荐文章于 2024-05-14 14:08:38 发布

半侠

最新推荐文章于 2024-05-14 14:08:38 发布

阅读量1.7k

点赞数

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/wulinbanxia/article/details/72789893

版权

Bootstrap CSS学习的是Bootstrap第3版. 1 Bootstrap 介绍 1.1 Bootstrap 概述Bootstrap 是由Twitter公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。--Bootstrap包含了写好的.css和.js文件，只要引用这些文件，并在HTML中为元素添加

摘要由CSDN通过智能技术生成

Bootstrap CSS

学习的是Bootstrap第3版.

1 Bootstrap 介绍

1.1 Bootstrap 概述

Bootstrap 是由Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。

--Bootstrap包含了写好的.css 和.js 文件，只要引用这些文件，并在HTML中为元素添加对于的属性class data-*就可以获得特定的效果。不用自己写.css 和.js 了。

--Bootstrap 最为重要的部分就是它的响应式布局，通过这种布局可以兼容PC 端、PAD以及手机移动端的页面访问。

Bootstrap 下载及演示：

国内文档翻译官网：http://www.bootcss.com

瓢城Web 俱乐部官网：http://www.ycku.com

1.2 Bootstrap 特点

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

1.3 Bootstrap 下载

您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页：

您会看到两个按钮：

Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。(我们选这个)

Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。

1.4 Bootstrap 结构

主要分为三大核心目录：css(样式)、js(脚本)、fonts(字体)。

1.css 目录中有四个css 后缀的文件，其中包含min字样的，是压缩版本，一般使用

这个；不包含的属于没有压缩的，可以学习了解css 代码的文件；而map 后缀的文件则是

css 源码映射表，在一些特定的浏览器工具中使用。

2.js 目录包含两个文件，是未压缩和压缩的js 文件。

3.fonts 目录包含了不同后缀的字体文件。Bootstrap3与Bootstrap2的最大差异在于使用了font文件来替代图片，用于显示图标，这些font图片称为Glyphicons--象形文字图标。

1.5 Bootstrap 范例

<!DOCTYPE html>                                           
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">
  <!-- Bootstrap 核心 CSS 文件-->
  <link rel="stylesheet" href="css/bootstrap-3.3.7.min.css">
 
<!-- HTML5 Shim 和 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]-->
 
  <!-- Bootstrap 的 JavaScript 插件需要引入 jQuery -->
  <scriptsrc="js/jQuery.min.js"></script>
  <!-- Bootstrap 核心 JavaScript 文件 -->
  <scriptsrc="js/bootstrap-3.3.7.min.js"></script>
</head>
<body>
</body>
</html>

注1：HTML 5 文档类型（Doctype）

Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。

注2：移动设备优先是 Bootstrap 3 的最显著的变化。

在之前的 Bootstrap 版本中（直到 2.x），您需要手动引用另一个 CSS，才能让整个项目友好的支持移动设备。

现在不一样了，Bootstrap 3 默认的 CSS 本身就对移动设备友好支持。

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加viewport meta 标签，如下所示：

width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width可以确保它能正确呈现在不同设备上。

initial-scale=1.0 确保网页加载时，以

最低0.47元/天解锁文章

半侠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap CSS

Bootstrap CSS学习的是Bootstrap第3版. 1 Bootstrap 介绍 1.1 Bootstrap 概述Bootstrap 是由Twitter公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。--Bootstrap包含了写好的.css和.js文件，只要引用这些文件，并在HTML中为元素添加
复制链接

扫一扫

专栏目录