实训第二天之bootstrap首页框架（一)

最新推荐文章于 2022-04-01 18:22:27 发布

原创最新推荐文章于 2022-04-01 18:22:27 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

这篇博客主要介绍了Bootstrap的使用，包括a标签target属性的解释，如何利用栅格系统创建页面布局，以及Bootstrap的表格展示。同时，强调了JSON格式中数组的重要性和首页框架中iframe的应用。

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

1、a标签的 target 属性规定在何处打开链接文档。如果在一个 a> 标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。当用户第一次选择内容列表中的某个链接时，浏览器将打开一个新的窗口，将它标记为 “view_window”，然后在其中显示希望显示的文档内容。如果用户从这个内容列表中选择另一个链接，且这个 “view_window” 仍处于打开状态，浏览器就会再次将选定的文档载入那个窗口，取代刚才的那些文档。
在整个过程中，这个包含了内容列表的窗口是用户可以访问的。通过单击窗口中的一个连接，可使另一个窗口的内容发生变化。
不用打开一个完整的浏览器窗口，使用 target 更通常的方法是在一个显示中将超链接内容定向到一个或者多个框架中。可以将这个内容列表放入一个带有两个框架的文档的其中一个框架中，并用这个相邻的框架来显示选定的文档

2、bootstrap页面布局：
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。
这里写图片描述

这里写图片描述

3、bootstrap ：table：
这里写图片描述

这里写图片描述

4、json格式：
示例：

[{
    "id": "222",
    "user": "小明",
    "tel": "123456",
    "email": "1234@163.com"
}
]

此处突出 [] 的重要性。如果没有 [] 只是一个json元素，当只有一个对象时，用遍历数组的方法遍历单个对象对遍历其元素，产生错误。当有多个对象不加 [] 的时候，会自动转换为数组

5、首页的框架：
index.html:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
        <style type="text/css">
            ol{
                /*无列表序号显示*/
                list-style-type: none;
                padding-left: 0;
            }
            a{
                color: gray;
            }
            a:hover{
                /*去除下划线*/
                text-decoration: none;
            }
        </style>
        <script src="css/jquery.min.js" type="text/javascript" charset="UTF-8"></script>

    </head>

    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="clo-md-12 page-header">
                    <h1 style="float:left">管理系统</h1>
                    <div style="float: right; margin-right: 50;">
                        <span >
                            <b> 欢迎您，XX</b>
                        </span>
                        <button class="btn btn-default">注销</button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2">
                    <h2>导航栏</h2>
                    <div class="panel panel-default">
                        <div class="panel-heading">父菜单</div>
                        <div class="panel-body">
                            <ol>
                                <li><a href="right/right1.html" target="contentFrame">right1</a><br /></li>
                                <li><a href="right/right1.html" target="contentFrame">right1</a></li>
                            </ol>
                        </div>
                    </div>

                </div>
                <div class="col-md-10">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="breadcrumb">
                                <a href="#">主页</a>>><a href="#">子页</a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="embed-responsive embed-responsive-16by9">
                                    <iframe id="contentFrame" name="contentFrame" class="embed-responsive-item" src=""></iframe>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>

</html>

首页中的iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
left.html代码如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
        <script src="../css/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
        <script src="../css/bootstrap.min.js"></script>
        <script type="text/javascript">
            //删除:
            function del(obj) {
                $(obj).parent().parent().remove();
            }

            function add(id,user,tel,email) {
                var index = $('#tb').find("tr").length-1
                console.log(index)

                str = "<tr id='tr" + (index) + "'>";
                str +=
                    '<td>' + id + '</td>' +
                    '<td>' + user + '</td>' +
                    '<td>' + tel + '</td>' +
                    '<td>' + email + '</td>' +
                    '<td>' + '<button type="button"  onclick="del(this)">删除</button>' + '<button type="button" style="margin-left: 15px" onclick="update(this)">修改</button>' + '</td>'
                str += '</tr>'
                $('#tb').append(str)
            }

            function save(obj) {
                var tb1 = $(obj)
                var trid = tb1.parent().parent().attr('id')
                $td = $('#' + trid).find("td")
                str = "";
                str +=
                    '<td>' + $('#userid').val() + '</td>' +
                    '<td>' + $('#username').val() + '</td>' +
                    '<td>' + $('#usertel').val() + '</td>' +
                    '<td>' + $('#useremail').val() + '</td>' +
                    '<td>' + '<button type="button"  onclick="del(this)">删除</button>' + '<button type="button" style="margin-left: 15px" onclick="update(this)">修改</button>' + '</td>'
                $('#' + trid).html(str)
            }

            function update(obj) {
                var tb1 = $(obj)
                var trid = tb1.parent().parent().attr('id')
                var message = new Array()
                $td = $('#' + trid).find("td")
                $.each($td, function(index, item) {
                    item = $(item)
                    message.push(item.text())
                })
                str = "";
                str +=
                    '<td>' + '<input type="text" id="userid" value="' + message[0] + '" />' + '</td>' +
                    '<td>' + '<input type="text" id="username" value="' + message[1] + '" />' + '</td>' +
                    '<td>' + '<input type="text" id="usertel" value="' + message[2] + '" />' + '</td>' +
                    '<td>' + '<input type="text" id="useremail" value="' + message[3] + '" />' + '</td>' +
                    '<td>' + '<button type="button"  onclick="del(this)">删除</button>' + '<button type="button" style="margin-left: 15px" onclick="save(this)">保存</button>' + '</td>'
                $('#' + trid).html(str)
            }
            $( //加载
                function() {
                    $.ajax({
                        type: "get",
                        url: "../user.json",
                        async: true,
                        success: function(result) {
                            var str = '<tr>';
                            var index = 0;
                            $.each(result, function(index, item) {
                                str = "<tr id='tr" + (index++) + "'>";
                                str +=
                                    '<td>' + item.id + '</td>' +
                                    '<td>' + item.user + '</td>' +
                                    '<td>' + item.tel + '</td>' +
                                    '<td>' + item.email + '</td>' +
                                    '<td>' + '<button type="button"  onclick="del(this)">删除</button>' + '<button type="button" style="margin-left: 15px" onclick="update(this)">修改</button>' + '</td>'
                                str += '</tr>'
                                $('#tb').append(str)
                            });
                        },
                    });
                    //添加:
                    $('#add').click(function() {
                        $('#add-modal').modal('toggle')
                    })
                    $('#save').click(function() {
                        var id = $('#newid')
                        var user = $('#newuser')
                        var tel = $('#newtel')
                        var mail = $('#newmail')
                        add(id.val(),user.val(),tel.val(),mail.val())
                        return true;
                    })
                })
        </script>
        <title></title>
    </head>

    <body>
        <div class="container-fluid">
            <div class="form-inline">
                用户名：
                <input type="text" id="uname" class="form-control" /> 手机号:
                <input type="text" class="form-control" />
                <button id="search" type="button" class="btn btn-primary">检索</button>
                <button id="add" type="button" class="btn btn-danger">添加</button>
            </div>
            <h3>用户信息</h3>
            <table id="tb" class="table table-bordered table-striped table-hover ">
                <tr>
                    <td>id</td>
                    <td>用户名</td>
                    <td>手机号</td>
                    <td>邮箱</td>
                    <td>操作</td>
                </tr>

            </table>
        </div>
        <div class="modal fade" id="add-modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <div style="font-size: large; color: #204D74;">添加用户</div>
                    </div>
                    <div class="modal-body">
                        <div class="form-inline">
                        <table id="tb" class="table table-bordered table-striped table-hover ">
                                    <div class="form-control">
                                        id:<input id="newid" type="text"  placeholder="请输入id" />
                                    </div>

                            <tr>
                                <td>用户名:
                                    <input id="newuser" type="text" placeholder="请输入用户名" />
                                </td>
                            </tr>
                            <tr>
                                <td>手机号:
                                    <input id="newtel" type="text"  placeholder="请输入手机号" />
                                </td>
                            </tr>
                            <tr>
                                <td>邮箱:
                                    <input id="newmail" type="text"  placeholder="请输入邮箱" />
                                </td>
                            </tr>
                        </table>>
                            </div>
                    </div>
                    <div class="modal-footer">
                        <button id="save" type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </body>

</html>