发布于 2016-01-01 18:37:53 | 351 次阅读 | 评论: 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 "HelloWorld"简单入门教程
php bootstrap实现简单登录
Bootstrap学习之--开篇-登陆页
Bootstrap学习之--导航组件
Bootstrap学习之-列表组件
bootstrap实现的table列表示例代码
bootstrap中固定table的表头的方法
15 个很棒的 Bootstrap UI 界面编辑器
20 款最棒的 jQuery Bootstrap 插件
20 个免费的 Bootstrap 模板
Bootstrap简介,及如何下载、使用
最新网友评论  共有(0)条评论 发布评论 返回顶部

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