JavaScript&Bootstrap
1. JS介绍
JS诞生主要是完成页面的数据验证。因此它运行在客户端，需要浏览器来执行JS代码
JS最早取名LiveScript；为了吸引更多的Java程序员，更名JavaScript
JS是弱类型，Java是强类型
特点：
- 交互性（它可以做的就是信息的动态交互）
- 安全性（不允许直接访问本地硬盘）
- 跨平台（只要是可以解释JS的浏览器就可以执行，和平台无关）
2. JS和HTML的结合和方式
第一种方式
只需要在head标签中，使用script标签来书写JS代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//alert是JS提供的一个警告框函数，
//它可以接收任意类型的参数，这个参数就是警告框提示的信息
alert("Hello JavaScript！");
</script>
</head>
<body> </body>
</html>
第二种方式
使用script标签引入单独的JS代码文件
<!--导入外部的JS文件-->
<script type="text/javascript" src="1-hello.js"></script>
<!--src属性专门用来引入JS文件路径（可以是相等路径，也可以是绝对路径）-->
两种方式二选一，不能同时使用两个方式
可以写入两个Script标签来使用两种方法，执行时顺序执行
3. 变量
JS的变量类型：
- 数值类型：number
- 字符串类型：string
- 对象类型：object
- 布尔类型：boolean
- 函数类型：function
JS里特殊的值：
- undefined：未定义，所有JS变量为赋于初始值时，默认值都是undefined
- null：控制
- NAN：全称是Not a Number。非数字、非数值
JS中的定义变量格式：
var 变量名;var 变量名 = 值;
<script type="text/javascript">
var i;//undefined
//alert(i);
i = 12;
// alert(i);//12
// alert(typeof (i));//number
i = "abc";
// alert(typeof (i));//string
var a = 12;
var b = "abc";
alert(a * b);//NaN
</script>
4. 关系（比较）运算
- > < >= <=
- ==：等于。是简单的做字面值的比较
- ===：全等于 。除了做字面值的比较还会比较两个变量值的类型
<script type="text/javascript">
var a = "12";
var b = 12;
// alert(a == b);//true
alert(a===b);//false
</script>
5. 逻辑运算
- 且运算： &&
- 或运算： ||
- 取反运算： !
在JS中所有的变量都可以作为一个boolean类型的变量去使用
0、null、undefined、""（空串）都认为是false
<script type="text/javascript">
var a = 0;
if (a) {
alert("零为真");
} else {
alert("零为假");//√
}
</script>
6. 数组
JS中数组的定义格式：
var 数组名 = [];
var 数组名 = [1,'abc',true];
<script type="text/javascript">
var arr = [];//定义一个空数组
// alert(arr.length);//0
arr[0]=1;
alert(arr.length);//1
</script>
JS语言中的数组，只要我们通过数组下标赋值，最大的下标值就会自动地给数组进行扩容
7. 函数
函数的两种定义方式
可以使用function关键字来定义函数
使用的格式如下
function 函数名(形参列表){
函数体}<script type="text/javascript">
//无参函数
function f() {
alert("我是无参函数");
} //函数调用
f(); //有参函数
function f1(a, b) {
alert("我是有参函数，参数是" + a + b);//1aaa
} f1(1, "aaa"); //带有返回值的函数
function f2(num1, num2) {
var result = num1 + num2;
return result;
} alert(f2(10,20));//30
</script>
第二种格式如下
var 函数名 = function(形参列表){
函数体}
<script type="text/javascript">
var f3 =function () {
alert("我是第二种无参函数定义方式")；
}
f3();
</script>
JS不允许函数重载
函数的arguments隐形参数（只在function函数内）
就是在function函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管他叫隐形参数。
隐形参数特别像Java中的可变长参数一样
public void fun( Object .. args);
可变长参数其实是一个数组
<script type="text/javascript">
var f4=function () {
alert("隐形参数在哪里");
alert(arguments.length);//查看参数个数 2
alert(arguments[0]);//1
}
f4(1,"隐形参数");
</script>
8. 事件
什么是事件
事件就是电脑输入设备与页面进行交互的相应。我们称之为事件
两种事件注册
什么是事件的注册（绑定）？
其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或绑定
静态注册事件
通过HTML标签的事件属性直接赋予事件响应后的代码，这种方式叫做静态注册
动态注册事件
是指先通过JS代码得到标签的dom对象，然后再通过dom对象.事件名=function(){}，这种形式赋予事件响应后的代码叫动态注册。
动态注册基本步骤：
- 获取标签对象
- 标签对象.事件名=function(){}
常用的事件
onload 加载完成事件：页面加载完成后，常用作页面代码JS代码初始化操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onloadFunction() {
alert("静态注册onload事件,所有代码");
} <!--动态注册onload事件，是固定写法-->
window.onload=function (){
alert("动态注册onload事件");
}
</script>
</head>
<!--静态注册onload事件-->
<!--onload事件是浏览器解析完页面后就会自动出发的事件-->
<!--<body onload="alert('静态注册onload事件')">-->
<!--<body onload="onloadFunction()">-->
<body> </body> </html>onclick 点击事件：常用于按钮的点击响应操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function f() {
alert("按钮点下去了");
} //动态注册onclick使劲按
window.onclick = function () {
//1.获取标签对象
var btnObj = document.getElementById("button2");
//document是JS提供的一个对象，代表整个页面所有内容
//getElementById 获取 元素（标签） 通过Id
// alert(btnObj);
//2.通过标签对象.事件名=function(){}
btnObj.onclick=function () {
alert("按钮2点下去了");
}
}
</script>
</head>
<body>
<!--静态注册onclick事件-->
<button onclick="f()">按钮1</button>
<button id="button2">按钮2</button>
</body>
</html>
onblur 失去焦点事件：常用于输入框离开/失去焦点后验证其内容输入是否合法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//静态注册失去焦点事件
function onblurFunction() {
//console是控制台对象，是由JS语言提供，专门用来向浏览器的控制器打印输出，用于测试
//log是打印的方法
console.log("静态注册失去焦点事件");
} //动态注册onblur事件
window.onload = function () {
// 1.获取标签对象
var passwordObj = document.getElementById("psd");
// alert(passwordObj);
// 2.标签对象.事件名=function(){};
passwordObj.onblur =function () {
console.log("动态注册失去焦点事件")
}
}
</script>
</head>
<body>
用户名：<input type="text" onblur="onblurFunction()"><br/>
密码：<input type="password" id="psd"><br/>
</body>
</html>
onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作\
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onchangeFunction() {
alert("游戏已经选择")
} <!--动态注册-->
window.onload = function () {
var XianKaObj = document.getElementById("XianKa");
XianKaObj.onchange = function () {
alert("显卡已经选择完毕")
}
}
</script> </head>
<body>
请选择你要畅玩的游戏：
<!--静态注册-->
<select onchange="onchangeFunction()">
<option>英雄联盟</option>
<option>绝地求生</option>
<option>反恐精英：全球攻势</option>
<option>地下城与勇士</option>
</select>
<br/> 请选择你需要的显卡:
<select id="XianKa">
<option>1660Ti</option>
<option>2060</option>
<option>3060</option>
<option>3080Ti</option>
</select>
</body>
</html>
- 静态、动态注册表单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 静态注册表单提交事件
function onsubmitFunction() {
//要验证所有表单项是否合法，若有一个不合法就阻止表单提交
alert("提交表单---发现不合法");
return false;
}
// 动态注册表单提交事件
window.onload=function () {
var DongTaiObj = document.getElementById("DongTai");
DongTaiObj.onsubmit= function () {
alert("提交表单---发现不合法");
return false;
}
}
</script>
</head>
<body>
<!--onsubmit的值return为false可以阻止表单提交-->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFunction()">
<input type="submit" value="静态注册">
</form>
<form action="http://localhost:8080" id="DongTai">
<input type="submit" value="动态注册">
</form>
</body>
</html>
9.BOM模型
- BOM的全称：Browser Object Model 浏览器对象模型
- 将浏览器的各个组成部分封装成对象
- 组成：
- Window：窗口对象
- Navigator：浏览器对象
- Screen：显示器屏幕对象
- History：历史记录对象
- Location：地址栏对象
10. DOM模型
DOM的全称是Document Object Model，文档对象模型
就是把文档中的标签、属性、文本转换为对象来管理
Document对象的理解：
- Document它管理了所有的HTML文档内容
- Document它是一种树形结构的文档，有层级关系
- 他让我们所有的标签都对象化
- 我们可以通过doucument访问我们所有的标签对象
什么是对象化？
有一个人，年龄 22 ，性别 女，名字，陈某
我们把这个人的对象信息化应该怎么做？
class Person{
private int age;
private String sex;
private String name;
}
模拟HTML标签对象化
<body>
<div id="div01">div01</div>
</body>
class Dom{
private String id="div01";//id属性
private String tagName="div";//标签名
private Don parentNode;//父亲
private List<Dom> children;//孩子结点
private String innerHTML;//起始标签和结束标签中间的内容
}
Document对象中的方法
document.getElementById(elementID)
通过标签的id属性查找dom对象
document.getElementsByName(elementName)
通过标签的name属性查找标签dom对象集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//全选
function checkAll() {
//让所有复选框都选中
var hobbies = document.getElementsByName("hobby");//返回name属性为hobby的多个标签对象集合，操作与数组一样
//集合中每个元素都是DOM对象
//alert(hobbies);
// 这个集合中的顺序是他们在HTML页面中从上倒下的顺序
//alert(hobbies[0].value);//cpp
//checked表示复选框的状态，选中是true，未选中是false
//这个属性可读可写
// alert(hobbies[0].checked);//false
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = true;
} } //全不选
function checkNone() {
var hobbies = document.getElementsByName("hobby"); for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = false;
}
} // 反选
function checkReverse() {
var hobbies = document.getElementsByName("hobby"); // for (var i = 0; i < hobbies.length; i++) {
// if (hobbies[i].checked==true){
// hobbies[i].checked=false;
// }else{
// hobbies[i].checked=true;
// }
// }
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked=!(hobbies[i].checked);//取反
}
}
</script>
</head>
<body>
兴趣爱好：
<input type="checkbox" name="hobby" value="cpp">C++
<input type="checkbox" name="hobby" value="java">Java
<input type="checkbox" name="hobby" value="JS">JavaScript
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNone()">全不选</button>
<button onclick="checkReverse()">反选</button> </body>
</html>
document.getElementsByTagName(tagname)
通过标签名查找dom对象
三个方法使用的顺序： 有id属性，优先使用id查询 没有id属性，优先使用name查询
document.createElement(tagname)
通过给定的标签名，创建一个标签对象
节点的常用属性和方法：
节点就是标签对象
HTML DOM
标签体的设置和获取：innerHTML
使用HTML元素对象的属性
控制元素样式
使用元素的style属性来设置
var div1 = document.getElementById("div1");
div1.onclick = function () {
//修改样式方式1
div1.style.border = "1px solid red"; div1.style.width = "200px"; div1.style.fontSize = "20px";
}
提前定义好类选择器的样式，然后通过元素的className属性来设置其class属性值
<style>
.d1{
border: 1px solid red;
width: 100px;
height: 100px;
}
.d2{
border: 1px solid yellow;
width: 200px;
height: 200px;
}
</style>
var div2 = document.getElementById("div2");
div2.onclick = function () {
div2.className="d1";
}
动态表格案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title> <style>
table {
border: 1px solid;
margin: auto;
width: 500px;
} td, th {
text-align: center;
border: 1px solid;
} div {
text-align: center;
margin: 50px;
}
</style> </head>
<body> <div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div> <table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr> <tr>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr> <tr>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr> <tr>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr> </table> <script>
//添加
// document.getElementById("btn_add").onclick = function () {
// var id = document.getElementById("id").value;
// var name = document.getElementById("name").value;
// var gender = document.getElementById("gender").value;
//
// var td_id = document.createElement("td");
// var text_id = document.createTextNode(id);
// td_id.appendChild(text_id);
//
// var td_name = document.createElement("td");
// var text_name = document.createTextNode(name);
// td_name.appendChild(text_name);
//
// var td_gender = document.createElement("td");
// var text_gender = document.createTextNode(gender);
// td_gender.appendChild(text_gender);
//
// var td_a = document.createElement("td");
// var ele_a = document.createElement("a");
// ele_a.setAttribute("href", "javascript:void(0)");
// ele_a.setAttribute("onclick", "delTr(this)");
// var text_a = document.createTextNode("删除");
// ele_a.appendChild(text_a);
// td_a.appendChild(ele_a);
//
//
// var tr = document.createElement("tr");
//
// tr.appendChild(td_id);
// tr.appendChild(td_name);
// tr.appendChild(td_gender);
// tr.appendChild(td_a);
//
// var table = document.getElementsByTagName("table")[0];
// table.appendChild(tr);
// } // 使用innerHTML添加
document.getElementById("btn_add").onclick = function () {
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value; var table = document.getElementsByTagName("table")[0]; table.innerHTML += "<tr>\n" +
" <td>"+id+"</td>\n" +
" <td>"+name+"</td>\n" +
" <td>"+gender+"</td>\n" +
" <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\">删除</a></td>\n" +
" </tr>";
} //删除
function delTr(obj) {
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
} </script> </body>
</html>
11. 正则表达式
RegExp是正则表达式的缩写
正则表达式是描述字符模式的对象。
正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。
11.1 语法
var patt=new RegExp(pattern,modifiers);
或者更简单的方式：
var patt=/pattern/modifiers;
<script type="text/javascript">
//表示要求字符串中，是否必须包含字母e
// var patt = new RegExp("e");
// alert(patt);// /e/
var patt=/e/;//与上语句功能相同，写法不同
// var str = "abcd";
// alert(patt.test(str));//false
var str = "abcde";
alert(patt.test(str));//true
</script>
11.2 方括号
方括号用于查找某个范围内的字符：
| 表达式 | 描述 |
|---|---|
| [abc] | 查找方括号之间的任何字符。 |
| [^abc] | 查找任何不在方括号之间的字符。 |
| [0-9] | 查找任何从 0 至 9 的数字。 |
| [a-z] | 查找任何从小写 a 到小写 z 的字符。 |
| [A-Z] | 查找任何从大写 A 到大写 Z 的字符。 |
| [A-z] | 查找任何从大写 A 到小写 z 的字符。 |
| [adgk] | 查找给定集合内的任何字符。 |
| [^adgk] | 查找给定集合外的任何字符。 |
| (red|blue|green) | 查找任何指定的选项。 |
<script type="text/javascript">
var patt=/[abc]/;查找字符串中是否包含abc
// var str = "123";
// alert(patt.test(str));//false
var str = "ddabcefg";
alert(patt.test(str));//true
</script>
11.3 元字符
元字符（Metacharacter）是拥有特殊含义的字符：
| 元字符 | 描述 |
|---|---|
| . | 查找单个字符，除了换行和行结束符。 |
| \w | 查找单词字符。 |
| \W | 查找非单词字符。 |
| \d | 查找数字。 |
| \D | 查找非数字字符。 |
| \s | 查找空白字符。 |
| \S | 查找非空白字符。 |
| \b | 匹配单词边界。 |
| \B | 匹配非单词边界。 |
| \0 | 查找 NUL 字符。 |
| \n | 查找换行符。 |
| \f | 查找换页符。 |
| \r | 查找回车符。 |
| \t | 查找制表符。 |
| \v | 查找垂直制表符。 |
| \xxx | 查找以八进制数 xxx 规定的字符。 |
| \xdd | 查找以十六进制数 dd 规定的字符。 |
| \uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
11.4 量词
| 量词 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一个 n 的字符串。 |
| n* | 匹配任何包含零个或多个 n 的字符串。 |
| n? | 匹配任何包含零个或一个 n 的字符串。 |
| n{X} | 匹配包含 X 个 n 的序列的字符串。 |
| n{X,Y} | 匹配包含 X 至 Y 个 n 的序列的字符串。 |
| n{X,} | 匹配包含至少 X 个 n 的序列的字符串。 |
| n$ | 匹配任何结尾为 n 的字符串。 |
| ^n | 匹配任何开头为 n 的字符串。 |
| ?=n | 匹配任何其后紧接指定字符串 n 的字符串。 |
| ?!n | 匹配任何其后没有紧接指定字符串 n 的字符串。 |
<script type="text/javascript">
// var patt=/[abc]/;//与上语句功能相同，写法不同
var patt=/a+/;//字符串中是否至少包含一个a
// var str = "123";
// alert(patt.test(str));//false
var str = "ddabcefg";
alert(patt.test(str));//true
</script>
数据验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFunction() {
var usernameObj = document.getElementById("username");
var usernameText = usernameObj.value;
var patt=/^\w{8,18}$/;//要求8-18个字符
var usernameSpanObj = document.getElementById("usernameSpan");
// alert(usernameSpanObj.innerHTML);
//innerHTML表示起始标签和结束标签中内容
//innerHTML这个属性可读可写
// usernameSpanObj.innerHTML="哈哈哈";
//修改起始标签和结束标签中内容为哈哈哈
//test方法：检索字符串中指定的值。返回 true 或 false。
if(patt.test(usernameText)){
usernameSpanObj.innerHTML="用户名合法";
}else{
usernameSpanObj.innerHTML="用户名不合法";
}
}
</script>
</head>
<body>
用户名:<input type="text" id="username" value="DH_CC">
<span id="usernameSpan" style="color: red"></span>
<button onclick="onclickFunction()">校验</button>
</body>
</html>
12.Global
特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。
方法名();方法：JavaScript 全局函数
函数 描述 decodeURI() 解码 URI。 decodeURIComponent() 解码 URI 组件。 encodeURI() 对 URI 进行编码。（编码字符更多） encodeURIComponent() 对 URI 组件进行编码。 eval() 将字符串作为脚本来执行 isFinite() 确定值是否是有限的合法数。 isNaN() 确定值是否是非法数字。（NaN参与的==比较全部为false，因此使用isNaN()进行判断是否为NaN） Number() 将对象的值转换为数字。 parseFloat() 解析字符串并返回浮点数。 parseInt() 解析字符串并返回整数。（从头开始逐一判断每一个字符是否位数字，直到不是数字为止，将前面数字部分转换为number） String() 将对象的值转换为字符串。
13.Bootstrap框架
13.1 概念
（会用即可）
- 概念：一个前端开发的框架，基于HTML、CSS、JavaScript。
- 框架：一个半成品软件，开发人员可以再框架基础上，再进行开发，简化编码
- 好处：
- 定义了很多CSS样式和JS插件，开发人员可以直接使用这些样式和插件得到丰富的页面效果
- 响应式布局：同一套界面可以支持不同分辨率的设备
13.2 快速入门
- 下载Bootstrap
- 将三个文件夹复制到项目中
- 创建HTML页面，引入必要的资源文件
使用模板
<!doctype html>
<html lang="zh-CN">
<head>
<!--编码-->
<meta charset="utf-8">
<!--支持IE-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口（窗口） 宽度是设备的宽度 缩放比例1:1-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>HelloWorld</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
13.3 响应式布局
同一套页面可以兼容不同分辨率的设备
实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
步骤：
定义容器。相当于之前的table
- 容器分类：
container：两边有留白container-fluid：100%宽度
- 容器分类：
定义行。相当于之前的tr 样式：
row定义元素。指定该元素在不同设备上所占格子的数目 样式：
col-设备代号-格子数目超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px) .col-xs-.col-sm-.col-md-.col-lg-
注意
- 一行中格子数目超出12，超出部分会自动换行
- 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或者等于分界点大小的设备
- 如果真实设备的宽度小于了设置栅格类属性的设备代码的最小值，会一个元素占满一整行
13.4 全局CSS样式
13.4.1 按钮
class="btn btn-default" 默认按钮样式
<a class="btn btn-default" href="#">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
<br>
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
13.4.1 图片
class="img-responsive" 图片在任意尺寸都占100%
<img src="img/banner_1.jpg" class="img-responsive"/>
<img src="img/banner_1.jpg" class="img-responsive img-rounded"/> 方图片
<img src="img/banner_1.jpg" class="img-responsive img-circle"/> 圆图片
<img src="img/banner_1.jpg" class="img-responsive img-thumbnail"/> 相框
13.4.1 表格
class = "table"
<table class="table table-bordered table-hover">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>22</td>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>22</td>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>22</td>
</tr>
</table>
13.4.1 表单
给表单项添加class="form-control"
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
13.5 组件
13.5.1 导航条
<nav class="navbar navbar-default"><!--反色的导航条 navbar-inverse-->
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!--定义汉堡按钮-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<!--汉堡按钮的线-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--首页logo/文字-->
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
13.5.2 分页条
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="disabled"><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
13.6 插件
轮播图
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/banner_1.jpg" alt="...">
</div>
<div class="item">
<img src="img/banner_2.jpg" alt="...">
</div>
<div class="item">
<img src="img/banner_3.jpg" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
JavaScript&Bootstrap的更多相关文章
- BootStrap基本控件
简介 BootStrap是一个用于快速开发web应用程序和网站的前端框架. BootStrap是基于HTML, CSS, JavaScript. BootStrap是由Twitter的Mark Ott ...
- bootstrap插件学习
转自http://v3.bootcss.com/javascript/ bootstrap javascript插件学习 模态框 打开模态框 <button type="button& ...
- 实战web前端之：Bootstrap框架windows下安装与使用
Bootstrap是前端开发中比较受欢迎的框架,简洁且灵活.它基于HTML.CSS和JavaScript,HTML定义页面元素,CSS定义页面布局,而JavaScript负责页面元素的响应.Boots ...
- BootStrap学习从现在开始
前言 原文链接 http://aehyok.com/Blog/Detail/6.html 当下最流行的前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢.本文总结了Boo ...
- bootstrap table使用总结
使用bootstrap table可以很方便的开发后台表格,对数据进行异步更新,编辑.下面就来介绍一下bootstrap table的详细使用方法: 因为之前在官网也找了很久的教程,源码感觉隐藏的比较 ...
- 开源项目推荐：e-example / Springboot+bootstrap + ……
前言: 我想要找一个 springboot + bootstrap 的例子介绍,然后搜索到了这个开源项目. 所有能跑起来的项目都有研究价值,看看这个项目的文档.目前正好满足我想要的功能.推荐 正文: ...
- 12 Essential Bootstrap Tools for Web Designers
12 Essential Bootstrap Tools for Web Designers Posted by vikas on June 6, 2014, filed in: Tools, Web ...
- [转]ASP.NET MVC 5 List Editor with Bootstrap Modals
本文转自:https://www.codeproject.com/articles/786085/asp-net-mvc-list-editor-with-bootstrap-modals With ...
- Angularjs环境搭建
Angularjs架构搭建 1.搭建Angularjs项目 1)在package.json中配置如下,然后 npm install下载包 { "na ...
随机推荐
- Spring 08: AOP面向切面编程 + 手写AOP框架
核心解读 AOP:Aspect Oriented Programming,面向切面编程 核心1:将公共的,通用的,重复的代码单独开发,在需要时反织回去 核心2:面向接口编程,即设置接口类型的变量,传入 ...
- Jenkins+SpringCloud（多模块）+Vue项目详细配置
一.Jenkins安装及所需插件安装 安装过程略. 我这用到工具包括JDK.Git.Maven.NodeJS:可以选择自行在服务器安装,也可以通过Jenkins自动安装,位置在系统管理 >全局工 ...
- ZooKeeper 组件安装配置
ZooKeeper 组件安装配置 下载和安装 ZooKeeper ZooKeeper最新的版本可以通过官网 http://hadoop.apache.org/zookeeper/ 来获取,安装 Zoo ...
- 使用 Mypy 检查 30 万行 Python 代码，总结出 3 大痛点与 6 个技巧！
作者:Charlie Marsh 译者:豌豆花下猫@Python猫 英文:Using Mypy in production at Spring (https://notes.crmarsh.com/u ...
- 数据库基础操作 part1
初识数据库 数据库相关概念 数据库管理软件: 本质就是一个C/S架构的套接字程序 服务端套接字 客户端套接字 操作系统: Linux 操作系统: 随意 计算机(本地文件) 计算机硬件 应用流程: 服务 ...
- KingbaseES 数据库删除功能组件
关键字: KingbaseES.卸载.删除功能 一.安装后检查 在安装完成后,可以通过以下几种方式进行安装正确性验证: 1. 查看安装日志,确认没有错误记录; 2. 查看开始菜单: 查看应用程 ...
- Dapr 证书过期了怎么办？ 别慌，有救！
一.背景 Dapr 默认证书有效时间是1年,证书过期后就不能执行相关控制面和数据面的交互了,如下图: 二.查看证书有效时间 通过dapr mtls expiry 看到期时间,具体参见命令https:/ ...
- 重要参考文档---MySQL 8.0.29 使用yum方式安装，开启navicat远程连接，搭建主从，读写分离(需要使用到ProxySQL，此文不讲述这个)
yum方式安装 echo "删除系统默认或之前可能安装的其他版本的 mysql" for i in $(rpm -qa|grep mysql);do rpm -e $i --nod ...
- k8s-ingress配置websocket支持
具体来说,使用的ingress-controller不一样,有关的设置也不太一样 Kubernetes Ingress Controller (k8s官方) 参考 http://github.com/ ...
- Spring Boot 使用 Micrometer 集成 Prometheus 监控 Java 应用性能
转载自:https://cloud.tencent.com/developer/article/1508319 文章目录1.Micrometer 介绍2.环境.软件准备3.Spring Boot 工程 ...