实训第一天之bootsrtap、html、js的使用_bootstarp form 表单如何调用 js函数-CSDN博客

本文链接：https://blog.csdn.net/qq_34839150/article/details/78771471

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

摘要由CSDN通过智能技术生成

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;