BootStrap3.0学习--起步

发布时间：2020-12-17 21:07:04 所属栏目：安全来源：网络整理

导读：Bootstrap简介 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架；基于HTML5、CSS3和jQuery开发的，由动态CSS语言LESS编写而成。 ◆由@mdo和@fat?在Twitter工作时创建的，2011 年8月在GitHub上发布的开源产品，使用LESS CSS并用Node编译，托管在G

Bootstrap简介

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架；基于HTML5、CSS3和jQuery开发的，由动态CSS语言LESS编写而成。

◆由@mdo和@fat?在Twitter工作时创建的，2011 年8月在GitHub上发布的开源产品，使用LESS CSS并用Node编译，托管在GitHub上，方便大家使用这一框架构建更好的web应用。

◆一个框架，可以在多种设备上运行，使你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备，这一切都是CSS媒体查询（Media Query）的功劳。

◆具有丰富的特色，12列的响应式栅格结构、丰富的组件、JavaScript插件、排版、表单控件，还有基于web的定制工具。

◆Bootstrap 是完全开源的。它的代码托管、开发、维护都依赖 GitHub 平台。

注：

1.LESS是一种基于CSS之上的高级语言，其目的是使得CSS开发更灵活和更强大。快速入门：http://www.w3cschool.cc/manual/lessguide/

2.Twitter是

一个社交网络及微博客服务的网站，是全球互联网上访问量最大的十个网站之一。

3.GitHub 项目主页https://github.com/twbs/bootstrap

下载

在官网下载一个用于生产环境的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
如上图所示，可以看到已编译的 CSS 和 JS（bootstrap.*），以及已编译压缩的 CSS 和 JS（bootstrap.min.*）。同时也包含了Glyphicons 的字体，这是一个可选的Bootstrap主题。

1.字体图标文件来自于Glyphicons字体，替代了先前的glyphicons-halflings.png图片

2.jQuery库的版本>=1.9.0即可

3.各个文件都有CDN加速服务，可以任意调用服务器毫无压力，在你的项目中直接调

其他引用请查看：http://www.bootcdn.cn/

基础模板

复制代码

<!DOCTYPE html>
<html lang="zh-cn">
  head>
    meta charset="utf-8"http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 包含头部信息用于适应不同设备 -->
    name="viewport"="width=device-width,initial-scale=1"title>Bootstrap基础模板</ 包含 bootstrap 样式表 link href="css/bootstrap.min.css" rel="stylesheet" 修复HTML5在IE9以下的浏览器不支持的标签 [if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  bodyh1>你好，世界！ jQuery是Bootstrap所必须的js插件 script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script 合并了Bootstrap JavaScript 插件 ="js/bootstrap.min.js"html>

复制代码

1.X-UA-Compatible是IE8的一个专有属性，用来设置IE浏览器兼容模式，IE=edge来指示IE8使用它支持的最高模式。

2.Respond.js 是一个快速、轻量的polyfill，用于为IE6-8以及其它不支持CSS3 Media Queries 的浏览器提供媒体查询的?min-width 和 max-width 特性，实现响应式网页设计（Responsive Web Design）。

3.BootStrap前缀boot是长靴的意思，BootStrap.js放在body的底部，这样加载速度会更快^_^

4.jquery.js的位置是放在BootStrap.js上方的，因为BootStrap.js是基于jquery开发哒！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!