您的位置：首页 > Web前端 > BootStrap

57-004-1 bootstrap定义一个导航页面包括bootstrap面板，表格，分页，胶囊导航等样式

2016-05-14 18:00 721 查看

1. 在IDEA中建立一个bootstrapCase项目，并把此项目相关的开发包导入到项目中；
2. 建立一个new_list.htm页面，首先编写页面基本结构：

2.1 首先在页面顶部实现bootstrap导航条

<div class="container">
    <div class="row">
        <div class="col-md-12">
            
           <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
               <div class="navbar-header">
                   <a class="navbar-brand" href="http://www.baidu.com">baidu</a>
               </div>
               
               <div class="navbar-collapse collapse">
                   <ul class="nav navbar-nav">
                       <li><a tabindex="-1" href="#"><span class="glyphicon glyphicon-home"> 首页</span></a></li>
                       <li><a tabindex="-1" href="#"><span class="glyphicon glyphicon-folder-open"> 课程</span></a></li>
                       <li><a tabindex="-1" href="#"><span class="glyphicon glyphicon-comment"> 评论</span></a></li>
                       <li><a tabindex="-1" href="#"><span class="glyphicon glyphicon-list"> 用户</span></a></li>
                       <li><a tabindex="-1" href="#"><span class="glyphicon glyphicon-user"> 管理员</span></a></li>
                       <li><a tabindex="-1" href="#"><span class="glyphicon glyphicon-file"> 新闻</span></a></li>
                       <li><a tabindex="-1" href="#"><span class="glyphicon glyphicon-cog"> 设置</span></a></li>
                   </ul>
            </div>
      </nav>
     </div>
  </div>
</div>

效果图：

2.2 然后再页面的左侧边实现竖状列表导航（bootstrap胶囊导航）

<div class="row" style="margin-top:100px">
        <div class="col-md-2">
            
            <ul class="nav nav-pills nav-stacked">
                
                <li ><a tabindex="-1" href="#">左侧列表标题</a></li>
                <li ><a tabindex="-1" href="#">左侧列表标题</a></li>
                <li class="active" ><a tabindex="-1" href="#">左侧列表标题</a></li>
                <li ><a tabindex="-1" href="#">左侧列表标题</a></li>
            </ul>
        </div>

效果图：

3. 然后定义右半部份的面板表格，即定一个bootstrap样式的表格放到bootstrap样式的面板中；
3.1 首先定义面板的基本结构：

<div class="col-md-10">
        <div class="panel panel-info">
            <div class="panel-heading">
                <strong>面板的头部</strong>
            </div>
            <div class="panel-body">
            </div>
            <div class="panel-footer">
                <strong>面板的底部</strong>
</div>
</div>
</div>

效果图：

3.2 然后在面板中定义bootstrap样式的表格

<table class="table table-bordered tabel-hover table-striped">
                    <tr>
                        <td class="text-center"><input type="checkbox" id="selectedAll" name="selectedAll"></td>
                        <td class="text-center"><strong>标题</strong></td>
                        <td class="text-center"><strong>发布日期</strong></td>
                        <td class="text-center"><strong>操作</strong></td>
                    </tr>
                    <tr>
                        <td class="text-center"><input type="checkbox" id="nid" name="selectedAll" value="1"></td>
                        <td class="text-center"><strong>bootstrap</strong></td>
                        <td class="text-center"><strong>2016-05-13</strong></td>
                        <td class="text-center"><button class="btn btn-info bt-xs"><span class="glyphicon glyphicon-edit"> 修改</span></button></td>
                    </tr>
                    <tr>
                        <td class="text-center"><input type="checkbox" id="nid" name="selectedAll" value="2"></td>
                        <td class="text-center"><strong>Semantic</strong></td>
                        <td class="text-center"><strong>2016-05-14</strong></td>
                        <td class="text-center"><button class="btn btn-info bt-xs"><span class="glyphicon glyphicon-edit"> 修改</span></button></td>
                    </tr>
                    <tr>
                        <td class="text-center"><input type="checkbox" id="nid" name="selectedAll" value="3"></td>
                        <td class="text-center"><strong>JQuery</strong></td>
                        <td class="text-center"><strong>2016-05-14</strong></td>
                        <td class="text-center"><button class="btn btn-info bt-xs"><span class="glyphicon glyphicon-edit"> 修改</span></button></td>
                    </tr>
                </table>
          <button class="btn btn-info" id="delBtn"><span class="glyphicon glyphicon-trash"></span> 删除</button>
            </div>

        <div id="dividedPage" class="text-right">
          <ul class="pagination pagination-sm" id="pagecontrol">
            <li class="active"><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
            <li><a href="">4</a></li>
            <li><a href="">5</a></li>
          </ul>
        </div>

效果图：

4. 最后在面板中定义右下角的分页链接

效果图：

5. 此时页面基本完成，还可以在里面添加一些基本的动态应用，一个是checkbox的全选功能实现，一个是删除按钮功能的实现。现在新建一个util.js和main.js页面。
5.1 main.js

$(function(){
// alert("main.js") ;
checkboxSelectedAll($("#selectedAll"),$("input[id=nid]")) ;
}) ;

5.2 util.js

//触发全选的元素
// 被全选的元素
function checkboxSelectedAll(eleA,eleB){ //实现复选框全选操作
    eleA.on("click",function(){
        eleB.each(function(){
            this.checked = eleA.prop("checked") ;
        }) ;
    }) ;
}

// 删除按钮的选择器
// ajax异步处理的链接
// 所有被选上的复选框
function deleteBtn(ele,url,cele){

}

5.3 新建玩两个js文件后，需要把他们导入到首页中，同时还需要导入jquery的支持才能实现功能；
全选效果图：

6. 现在就实现删除按钮的操作，删除操作的实现需要把被选上的元素id拼成一个字符串；

6.1 首先在main.js文件中添加如下方法；

deleteBtn($("#delBtn"),"xxx.jsp",$("input[id=nid]"));

6.2 然后再util.js文件中添加如下代码；

// 删除按钮的选择器
// ajax异步处理的链接
// 所有被选上的复选框
function deleteBtn(ele,url,cele){
    ele.on("click",function(){
        var selectedItem = "" ; //保存所有要删除的数据
        cele.each(function(){ //针对每一个满足选择要求的元素都调用一次定义的函数
            if(this.checked){ //如果当前的元素有tmd被选中，那么就要执行下列语句
                selectedItem += this.value+"|" ;
            }
        });
        if(selectedItem == ""){
            alert("对不起，你他妈还没有选择任何元素，请先选择？");
        }else{
            if(window.confirm("你丫真要删除所选择的数据吗？")){
                // 如果要删除就通过ajax调用后台实现数据删除的操作
                $.post(url,{"ids":selectedItem},function(obj){
                    if(obj.trim("true")){
                        alert("恭喜，数据删除了") ;
                    }else{
                        alert("不妙，后台后勤没搞好，没有帮您删除掉数据") ;
                    }
                },"text") ;
            }

        }
    });
}

实现效果图：

最终效果图：

图文版：http://note.youdao.com/yws/public/redirect/share?id=745b5fa1a125c0a6959c69cd3563f8bf&type=false

资源文件下载：https://yunpan.cn/OcSfXDyybN8zLA 访问密码 a24b

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航