01.前端的一些网站
1.bootstrap
看这个名字就屌,一个快速开发的框架。一个做响应式页面的框架。
之前做响应式是用到@media
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> --> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title></title> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 --> <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 --> <!-- [if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]> --> <style type="text/css"> *{ padding: 0; margin: 0; } /*最小屏幕是1170px >=*/ @media screen and (min-width: 1170px){ body{ background-color: red; } } /*最小屏幕是992px*/ @media screen and (min-width: 992px) and (max-width:1170px){ body{ background-color: green; } } @media screen and (max-width: 992px) { body{ background-color: yellow; } } </style> </head> <body> </body> </html>
http://www.bootcss.com/
现在直接使用这个模块相对应的方法即可。
一、安装
通过 Bower 进行安装
还可以通过 Bower 安装并管理 Bootstrap 的 Less、CSS、JavaScript 和字体文件。
$ bower install bootstrap
通过 npm 进行安装
你还可以利用 npm 工具来安装 Bootstrap:
$ npm install bootstrap@3
require('bootstrap')
代码的作用是加载 Bootstrap 的所有 jQuery 插件。其中,bootstrap
模块自身并不导出任何内容。你可以通过加载安装包顶级目录下的 /js/*.js
文件的方式手动加载单个的 Bootstrap 插件。
Bootstrap 的 package.json
文件包含了一些额外的元数据:
less
- Bootstrap 源码的入口 Less 文件的路径style
- Bootstrap 的未压缩 CSS 文件的路径
通过 Composer 进行安装
通过 Composer (中文官网:Composer 中文网)也可以安装 Bootstrap 安装包,其中包括 Less、CSS、JavaScript 和 fonts 文件:
$ composer require twbs/bootstrap
编译 Less/Sass 源码需要注意的事项
Bootstrap 利用 Autoprefixer 自动为 某些 CSS 属性添加针对特定厂商的前缀。如果你是从 Less/Sass 源码编译 Bootstrap 的,并且没有使用 Bootstrap 自带的 Gruntfile 文件,那你就必须将 Autoprefixer 集成到你的编译工具和编译过程中。如果你使用的是我们预先编译好的 Bootstrap 文件或者使用的是我们提供的 Gruntfile 文件,那就无需操心了,我们已经将这些工作替你搞定了。
二。基本模板
使用以下给出的这份超级简单的 HTML 模版,或者修改这些实例。我们强烈建议你对这些实例按照自己的需求进行修改,而不要简单的复制、粘贴。
拷贝并粘贴下面给出的 HTML 代码,这就是一个最简单的 Bootstrap 页面了。
<!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="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>