- 什么是响应式网页
- 如何编写响应式网页
- Bootstrap 起步
- 全局CSS样式
- 组件
- bootstrap插件函数，less语言
什么是响应式网页：
可以适应用户的使用设备，进行相应的布局，无需编写各种不同的版本。
如何编写
- 流式网格布局
- 可伸缩的图片和文字 （字体和图片的大小都用相对单位）
- CSS3 meida query技术:media queries写法实例/W3Cplus/自己整理
- 代码演示
<!doctype html> <html> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial scale=1,user-scalable=no"> </head> <body> </body> </html> css部分 @media screen and (min-width:992px){ .container { width: 750px; margin: 0 auto; } .left { width: 25%; } } @media screen and (min-width:768px)and(max-width:991px){ .container { width: 750px; margin: 0 auto; } .left { width: 25%; } .middle { width: 75%; } } @media screen and (max-width: 767px){ .container { width: 100%; } .middle { width: 100%; } }
bootstrap起步
- 环境搭建
-
声明
<!DOCTYPE html> <html lang="zh-cn"> -
元数据和兼容性
<meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial scale=1'> <meta http-equiv="X-UA-Compatible" content="IE=edge"> -
引入CSS样式
<link rel="stylesheet" href="css/bootstrap.css"> -
脚本
<srcipt src="js/jquery-1.11.3.js"></script> <script src="js/bootstrap.js"></script>完整代码演示：
<!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"> <title></title> <link href="css/bootstrap.css" rel="stylesheet"> </head> <body> <h1>This is TITLE ONE</h1> <h1>这是一号标题</h1> <br><br><br><br><br><br><br><br><br><br><br><br><br> <script src="js/jquery-1.11.3.js"></script> <script src="js/bootstrap.js"></script> </body> </html>
-
CSS全局样式
-
CSS全局样式（即一些通用样式）按钮，图片，列表，表格，栅格布局系统
- body{ background:#fff; }- 为所有的链接设置了基本颜色@link-color,并且当链接状态处于hover时候，才添加下划线。
-
按钮
- 按钮的五种颜色
btn btn-danger:红色，危险色
btn btn-warning：黄色，警告色
btn btn-success：绿色，成功色
btn btn-info：蓝色，提示色
btn btn-primary：深蓝色，基础色 - 按钮的四种大小
btn-lg:大号
btn-sm:小号
btn-xs:超小号
综合按钮大小，颜色写法：<a href="#" class="btn btn-danger btn-xs">操作</a>
- 按钮的五种颜色
图片
圆角图片： img-rounded
圆形图片: ing-circle
响应式图片: img-response/垂直分布/列表
取消项目提示符的列表：<ul class="list-unstyled">/没有前面的小图标/
行内列表：<ul class="list-inline">/列表在一行显示/-
表格
基础类：<table class="table">
带边框的：<table class="table table-bordered">
隔行变色：<table class="table table-striped">
带鼠标悬停：<table class="table table-hover">
响应式表格：<div class="table-responsive">/需要在父元素设置/
<table class="table">
- 小知识点：如何给每行每列设置单独的颜色<tr class="warning"> <td class="success">1001</td> <td>唐牧</td> <td>13501234567</td> <td>海淀区万寿西街201号</td> <td> <a class="btn btn-success btn-xs" href="#">详情</a> </td> </tr> - 小知识点：Bootlint 的页面上，它能自动检查某些常见的 HTML、CSS使用方面的错误。 使用方法： <script> (function () { var s = document.createElement("script"); s.onload = function () { bootlint.showLintReportForCurrentDocument([]); }; s.src = "js/bootlint.js"; document.body.appendChild(s) })(); </script>
-
栅格布局系统
1.最外层需要使用容器 .container .container-fluid
2. 容器中声明行 div.row
3. 行中声明列 div.col
语法解释:<h3>一行中不等宽的多列</h3> <!--1:2:1的三列--> <div class="container"> <div class="row"> <div class="col-md-3">MD-3</div> <div class="col-md-6">MD-6</div> <div class="col-md-3">MD-3</div> </div> </div> -
表单（默认表单，水平表单，内联表单）
默认表单：
水平表单
1491482072(1).png
1491482110(1).png
内联表单
1491482248(1).png
1491482110(1).png
组件
- 字体图标
1491482943(1).png
1491482969(1).png
- 按钮组
1491483330(1).png
1491483506(1).png
- 下拉菜单
