7. 前端整合

Automatic_tester

已于 2022-05-18 16:18:27 修改

阅读量416

点赞数

分类专栏：前端基础文章标签：前端 bootstrap jquery

于 2022-05-08 18:47:37 首次发布

本文链接：https://blog.csdn.net/qq_41891186/article/details/124652374

版权

前端基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

7. 前端整合

HTML
CSS
JavaScript、jQuery
BootStrap（动态效果依赖jQuery）。

案例：添加数据页面

人员信息录入功能，需要提供用户信息：

用户名、年龄、薪资、部门、入职时间（*）

对于时间的选择：不能输入；选择；（插件） datetimepicker

下载插件
应用插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="static/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css">
</head>
<body>
<div class="container">
    <form class="form-horizontal" style="margin-top: 20px">
        <div class="row clearfix">
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="姓名">
                    </div>
                </div>
            </div>

            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">年龄</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="年龄">
                    </div>
                </div>
            </div>

        </div>

        <div class="row clearfix">
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">薪资</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="薪资">
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">部门</label>
                    <div class="col-sm-10">
                        <select class="form-control">
                            <option>IT部门</option>
                            <option>销售部门</option>
                            <option>运营部</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">入职日期</label>
                    <div class="col-sm-10">
                        <input type="text" id="dt" class="form-control" placeholder="入职日期">
                    </div>
                </div>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-xs-6">
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary">提 交</button>
                    </div>
                </div>
            </div>
        </div>

    </form>

</div>


<script src="static/js/jquery-3.6.0.min.js"></script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.js"></script>
<script src="static/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="static/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>

<script>
    $(function () {

        $('#dt').datepicker({
            format: 'yyyy-mm-dd',
            startDate: '0',
            language: "zh-CN",
            autoclose: true
        });

    })
</script>
</body>
</html>

总结

了解HTML标签、标签结构，基于他可以实现简单的页面。
CSS，了解基本样式；在别人模板的基础改就可以。
JavaScript、jQuery，了解基本使用
- 事件绑定/寻找标签/操作标签。
- 导入现成插件。

后续开发过程中，对于前端就是在BootStrap的基础整改。

Automatic_tester

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
7. 前端整合

7. 前端整合HTMLCSSJavaScript、jQueryBootStrap（动态效果依赖jQuery）。案例：添加数据页面人员信息录入功能，需要提供用户信息：用户名、年龄、薪资、部门、入职时间（*）对于时间的选择：不能输入；选择；（插件） datetimepicker下载插件应用插件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫