发布于 2016-01-01 18:37:53 | 512 次阅读 | 评论: 0 | 来源: PHPERZ

这里有新鲜出炉的Bootstrap v3教程,程序狗速度看过来!

Bootstrap Web前端CSS框架

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。


1、Bootstrap Table简介

    Bootstrap Table是基于Bootstrap的轻量级表格插件,只需要简单的配置就可以实现强大的支持固定表头、单复选、排序、分页、搜索以及自定义表头等功能。

2、所需要的库:

    bootstrap.min.css

    bootstrap-table.css

    jquery.min.js

    bootstrap.min.js

    bootstrap-table.js

3、Bootstrap Table获取数据的方式:

    Bootstrap Table通过data属性标签或者JavaScript来显示表格数据:

    (1)、通过data属性标签

                在表格中设置data-toggle=“table”,此方式可以在不写JavaScript的情况下启用Bootstrap Table。

<table data-toggle="table" data-url="data.json">
    <thead>
        ...
    </thead>
</table>

     (2)、通过JavaScipt向表格传入数据: 

<table id="table"></table>

            <1>、简单的静态数据

                $('#table').bootstrapTable({                
                    columns: [{
                        field: 'id',
                        title: 'Item ID'
                    }, {
                        field: 'username',
                        title: 'Item Username'
                    }, {
                        field: 'password',
                        title: 'Item Passowrd'
                    }],
                    data: [{
                        id: 1,
                        username: 'Item 1',
                        passowrd: '$1'
                    }, {
                        id: 2,
                        username: 'Item 2',
                        password: '$2'
                    }]});

                     <2>、通过url获取数据

                $('#table').bootstrapTable({                
                    url: 'data1.json',
                    columns: [{
                        field: 'id',
                        title: 'Item ID'
                    }, {
                        field: 'username',
                        title: 'Item Username'
                    }, {
                        field: 'passowrd',
                        title: 'Item Passowrd'
                    }, ]});

4、Bootstrap Table简单的demo:

<!doctype html>
<html>
    <head>
    
        <meta charset="utf-8">
        
        <title>Bootstrap Table的demo</title>
        
        <link rel="stylesheet" href="bootstrap.css">
        
        <link rel="stylesheet" href="bootstrap-table.css">
    
    </head>
    
<body>
 <table id="table"></table>
<!--引入相关的js文件-->
 <script src="jquery.min.js"></script>
 <script src="bootstrap.js"></script>
 <script src="bootstrap-table.js"></script>
    
 <!--自定义javaScript-->
  <script>
     $('#table').bootstrapTable({
       columns: [{
            field: 'id',
            title: 'Item ID'
           }, {
            field: 'username',
            title: 'Item Username'
           }, {
            field: 'passsword',
            title: 'Item Password'
       }],
       data: [{
            id: 1,
            username: 'Item 1',
            passowrd: '123'
           }, {
            id: 2,
            username: 'Item 2',
            passowrd: '123
           }]
      });
  </script>
</body>
</html>

5、Bootstrap Table学习文档

http://wenzhixin.net.cn/p/bootstrap-table/docs/documentation.html



相关阅读 :
Bootstrap Table简单例子学习
Bootstrap table简单使用总结
bootstrap table 服务器端分页例子分享
Bootstrap table表格简单操作
Bootstrap table学习笔记(2) 前后端分页模糊查询
第一次记录Bootstrap table学习笔记(1)
Bootstrap "HelloWorld"简单入门教程
php bootstrap实现简单登录
Bootstrap Table服务器分页与在线编辑应用总结
BootStrap Table 分页后重新搜索问题的解决办法
Bootstrap Table使用方法详解
JS组件Bootstrap Table使用实例分享
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务