实训第一天之bootsrtap、html、js的使用_bootstarp 表单开关样式是否,及 js 获取该值的方式-优快云博客

本文介绍了BootStrap的引用与使用方法，包括如何在HTML中引入CSS文件，利用class属性设置样式。同时讲解了JavaScript获取元素值的方式，如getElementById和getElementsByName，强调了对空值判断的注意事项。还提到了jQuery的基础语法，并给出了一个简单的登录注册场景应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、.css 和 .min.css的区别：
.min文件为压缩版，去除了多余的空格和空行，只保留有用代码，便于加载
2、bootstrap的引用：在html中使用link标签进行加载：

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

3、bootstrap的使用：通过标签内的class属性来声明其样式，具体例子如下：

<input type="submit" class="form-control btn btn-danger" value="登陆" />

设置的登录按钮的颜色样式，效果图如下：

登陆样式效果图
相关的样式类型查询bootstrap官方文档：

全局 CSS 样式

下面为一个bootstrap应用实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    </head>
    <body>
        <div class="container" style="width: 400px; margin-top: 100px;">
            <h1 class="text-center">登陆</h1>
            <form>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="请输入用户名" />
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" placeholder="请输入密码" />
                </div>
                <div class="form-group">
                    <input type="submit" class="form-control btn btn-danger" value="登陆" />
                </div>
            </form>
        </div>
    </body>
</html>

在本界面中使用到的样式有container，form-group，text-center，form-control

//container源码
.container {
    padding-right: 15px;//设置元素的右内边距;
    padding-left: 15px;//设置元素的左内边距;
    margin-right: auto;//设置元素的右外边距：
    margin-left: auto//设置元素的左外边距：
}

//form-group源码
.form-group {
    margin-bottom: 15px//设置元素的下外边距：
}


//text-center源码
.text-center {
/**
设置 h1、h2、h3 元素的文本对齐方式：
left    把文本排列到左边。默认值：由浏览器决定。
right   把文本排列到右边。
center  把文本排列到中间。
justify 实现两端对齐文本效果。
*/
    text-align: center
}

//form-control源码
.form-control {
    display: block;   //display 属性规定元素应该生成的框的类型。
    width: 100%;   //   定义基于包含块（父元素）宽度的百分比宽度。
    height: 34px;     //height 属性设置元素的高度。
    padding: 6px 12px;  //padding 简写属性在一个声明中设置所有内边距属性。 对应顺序为上右下左
    font-size: 14px;    //font-size定义字体大小
    line-height: 1.42857143;  //line-height 属性设置行间的距离（行高）。 不允许为负
    color: #555;    //属性颜色
    background-color: #fff;  //背景颜色
    background-image: none;  //背景图片设置
    border: 1px solid #ccc;  //边框粗度 1像素 实线
    border-radius: 4px; //元素的圆角边框 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);  
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);  //box-shadow 属性向框添加一个或多个阴影。
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}

4、通过js给按钮添加点击事件后。用
var user=document.getElementById(“user”).value;来获取用户的账号，此处还有一种获取方式为
var user = document.getElementsByName(“user”);用此方式获取的是一个对象数组，将name为user的元素全部获取，所以使用的想要获取单个的值需要用下表进行索引，如user[0].value代表第一个name为user的元素的值。在进行值的判断的时候，选择用if(user == “”)进行判断，因为经过尝试，当执行了var user = document.getElementById(“user”).value 之后 user已经存在值，并且通过alert(typeof(user))输出的结果为String，所以对其判断空只能选择用”“进行判断。
另外常见的typeof()的类有：
Undefined “undefined”
Null “object”
Boolean “boolean”
Number “number”
String “string”
在进行事件绑定的时候，还要注意方法名字的取名，不能与js的关键字重名，不然出现会不识别的情况。

5、jquery ：
基础语法：
$(selector).action()：

jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 p元素。
$("p.intro") 选取所有 class="intro" 的 p 元素。
$("p#demo") 选取所有 id="demo" 的 p元素。

jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

6、div的显示和隐藏：

$('').show()   显示div
$('').hide()     隐藏div
在show()和hide()里可以添加数字来设置动画速度

7、登陆注册例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <script src="css/jquery.min.js"></script>
        <script src="css/bootstrap.min.js"></script>
        <script type="application/javascript">
            //显示登陆界面
            function showlog() {
                $('#reg').hide(500)
                $('#log').show(500)
            }
            //显示注册界面
            function showreg() {
                $('#reg').show(500)
                $('#log').hide(500)
            }

            $(function() {
                //产生登陆的随机数min - max的随机数
                function randomNumber(min, max) {
                    return Math.floor(Math.random() * (max - min + 1) + min);
                }
                //产生注册的随机数
                function randomNumber_reg(min, max) {
                    return Math.floor(Math.random() * (max - min + 1) + min);
                }
                //产生注册验证码
                function creatCheckCode_reg() {
                    $random1 = randomNumber_reg(65, 90)
                    $random2 = randomNumber_reg(65, 90)
                    $random3 = randomNumber_reg(65, 90)
                    $random4 = randomNumber_reg(65, 90)
                    $('#checkCode').text(String.fromCharCode($random1) + '' + String.fromCharCode($random2) + String.fromCharCode($random3) + '' + String.fromCharCode($random4))
                }
                //产生登陆验证码
                function creatCheckCode_log() {
                    $random1_log = randomNumber(2, 10)
                    $random2_log = randomNumber(6, 15)
                    $('#checkCode_log').text($random1_log + ' + ' + $random2_log + ' = ?')
                }
                //产生登陆随机数
                creatCheckCode_log()
                //产生注册随机数
                creatCheckCode_reg()

                //注册验证码刷新
                $('#checkCode').click(function() {
                    creatCheckCode_reg()
                })
                //登陆验证码刷新
                $('#checkCode_log').click(function() {
                    creatCheckCode_log()
                })


                //注册form表单提交验证
                $('#regform').submit(function() {
                    flag = true;
                    var $user = $('form [name=user]');
                    var $pwd = $('form [name=pwd]');
                    var $pwd1 = $('[name=pwd2]');
                    var $tel = $('form [name=tel]');
                    var $mail = $('form [name=mail]');
                    if (!$user.val()) {
                        $user.next().text('用户名为空')
                        flag = false
                    } else {
                        $user.next().empty();
                    }
                    if (!$pwd.val()) {
                        $pwd.next().text('密码为空')
                        flag = false
                    } else {
                        $pwd.next().empty();
                    }
                    if (!$pwd1.val()) {
                        $pwd1.next().text('重复密码为空')
                        flag = false
                    } else {
                        if ($pwd.val() != $pwd1.val()) {
                            $pwd1.next().text('两次输入不一致')
                            flag = false
                        } else {
                            $pwd1.next().empty();
                        }
                    }
                    if (!$tel.val()) {
                        $tel.next().text('手机号为空')
                        flag = false
                    } else {
                        $tel.next().empty();
                    }
                    if (!$mail.val()) {
                        $mail.next().text('邮箱为空')
                        flag = false
                    } else {
                        $mail.next().empty();
                    }
                    if ((String.fromCharCode($random1) + String.fromCharCode($random2) + String.fromCharCode($random3) + String.fromCharCode($random4)) == $('#inputCode').val()) {
                        $('#checkCode').parent().next().text('验证成功')
                    } else {
                        $('#checkCode').parent().next().text('验证失败')
                        flag = false;
                    }
                    if (flag) {
                        $.ajax({
                            type: "get",
                            url: "",
                            async: true,
                            success: function(result) {},
                            error: function(result) {}
                        });
                    }
                    return false;
                })


                $('#logform').submit(function() {
                    flag = true;
                    var $user = $('form [name=user_log]');
                    var $pwd = $('form [name=pwd_log]');
                    if (!$user.val()) {
                        $user.next().text('用户名为空')
                        flag = false
                    } else {
                        $user.next().empty();
                    }
                    if (!$pwd.val()) {
                        $pwd.next().text('密码为空')
                        flag = false
                    } else {
                        $pwd.next().empty();
                    }
                    if (parseInt($random1_log) + parseInt($random2_log) == parseInt($('#inputCode_log').val())) {
                        $('#checkCode_log').parent().next().text('验证成功')
                    } else {
                        $('#checkCode_log').parent().next().text('验证失败')
                        flag = false;
                    }
                    return flag
                })

            })
        </script>
    </head>

    <body>
        <div id="log" class="container" style="width: 400px; margin-top: 100px;">
            <h1 class="text-center">登陆</h1>
            <form id="logform">
                <div class="form-group">
                    <input type="text" name="user_log" class="form-control" placeholder="请输入用户名" />
                    <span style="color: red;"></span>
                </div>
                <div class="form-group">
                    <input type="password" name="pwd_log" class="form-control" placeholder="请输入密码" />
                    <span style="color: red;"></span>
                </div>
                <div class="form-group">
                    <div class="form-inline">
                        <input type="number" id="inputCode_log" placeholder="请输入验证码" />
                        <span id="checkCode_log"></span>
                    </div>
                    <span style="color: red;"></span>
                </div>
                <div class="form-group">
                    <button type="submit" class="form-control btn btn-danger" ">登陆</button>
                </div>
                <div class="form-group ">
                    <button onclick="showreg() " class="form-control btn btn-danger " ">注册新账号</button>
                </div>
            </form>
        </div>

        <div id="reg"class="container" style="display: none;width: 400px; margin-top: 100px;">
            <h1 class="text-center">注册</h1>
            <form id="regform">
                <div id="reg" class="form-group">
                    <input type="text" name="user" class="form-control" placeholder="请输入用户名" />
                    <span style="color: red;"></span>
                </div>
                <div class="form-group">
                    <input type="password" name="pwd" class="form-control" placeholder="请输入密码" />
                    <span style="color: red;"></span>
                </div>
                <div class="form-group">
                    <input type="password" name="pwd2" class="form-control" placeholder="请重复输入密码" />
                    <span style="color: red;"></span>
                </div>
                <div class="form-group">
                    <input type="text" name="tel" class="form-control" placeholder="请输入手机号" />
                    <span style="color: red;"></span>
                </div>
                <div class="form-group">
                    <input type="text" name="mail" class="form-control" placeholder="请输入邮箱" />
                    <span style="color: red;"></span>
                </div>
                <div class="form-group">
                    <div class="form-inline">
                        <input type="text" id="inputCode" placeholder="请输入验证码" />
                        <span id="checkCode"></span>
                    </div>
                    <span style="color: red;"></span>
                </div>
                <div class="form-group">
                    <button type="submit" class="form-control btn btn-danger" ">注册</button>
                </div>
                <div class="form-group ">
                    <button onclick="showlog() " class="form-control btn btn-danger " ">已有账号登陆</button>
                </div>

            </form>
        </div>

    </body>

</html>