第一章 Bootstrap基础
发布时间:2020-12-17 20:50:07 所属栏目:安全 来源:网络整理
导读:1 什么是Bootstrap 由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架 简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。 2 Bootstrap版本 BootStrap2 BootStrap3 BootStrap4 3 Bootstrap下载 用于生产环境的Bootstrap Boots
1 什么是Bootstrap
2 Bootstrap版本
3 Bootstrap下载用于生产环境的Bootstrap Bootstrap Less 源码 Bootstrap Sass 源码 4 CDN服务<!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件(一般不用引入) --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 5 目录结构生产环境版 bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── 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
└── glyphicons-halflings-regular.woff2
6 基本模板<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// --> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好,世界!</h1> <!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below),or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html> 7 浏览器兼容让IE8 支持H5新标签页面中引入respond.js <!-- 注意: 页面必须通过服务器访问 --> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> IE兼容模式 页面中添加如下代码 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 国产浏览器切换webkit内核页面中添加如下代码 <meta name="renderer" content="webkit"> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- WebService(4)_标准JDK发布WebService
- angular.js和ionic框架搭建一个webApp
- WebService 的简单部署
- unit-testing – 执行包含在函数中的specs2示例
- 如何创建UNIX / Linux命令?
- angularjs – Angular UI-Router无法解析Internet Explorer
- Angular – 无法绑定到’ngValue’,因为它不是’mat-option
- AngularJS:在多重选择上预选选项
- windows-7 – Docker:当试图运行docker run hello-world
- angularjs – 如果缺少,则在配置阶段添加哈希前缀