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 个 n 的序列的字符串。
n 匹配包含 X 至 Y 个 n 的序列的字符串。
n 匹配包含至少 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 快速入门

  1. 下载Bootstrap
  2. 将三个文件夹复制到项目中
  3. 创建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>

image

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"/>	相框

image

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>

image

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>

image

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>

image

13.5.2 分页条

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</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">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

image

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>
posted @   风吹头蛋凉OvO  阅读(34)  评论(0)  编辑  收藏  举报
相关博文：
·  HTML&CSS
·  JavaWeb入门
·  JavaScript
·  3_JavaScript
·  JavaScript
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 使用C#创建一个MCP客户端
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae