Bootstrap Table学习笔记

资料: 官网   2017.7.10

入门实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Table</title>
    <link href="Styles/css/bootstrap.min.css" rel="stylesheet" />
    <link href="Styles/css/bootstrap-table.min.css" rel="stylesheet" />
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="Scripts/Core/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script src="Scripts/Core/bootstrap.min.js"></script>
    <script src="Scripts/Extensions/bootstrap-table.js"></script>
    <script src="Scripts/Extensions/bootstrap-table-locale-all.js"></script>
    <script src="Scripts/Main.js"></script>
</head>
<body>
    <table id="table"></table>
</body>
</html

通过JavaScript激活Bootstrap Table, coding在Main.js内

$(function () {
    $(‘#table‘).bootstrapTable({
        columns: [{
            field: ‘id‘,
            title: ‘Item ID‘
        }, {
            field: ‘name‘,
            title: ‘Item Name‘
        }, {
            field: ‘price‘,
            title: ‘Item Price‘
        }],
        data: [{
            id: 1,
            name: ‘Item 1‘,
            price: ‘$1‘
        }, {
            id: 2,
            name: ‘Item 2‘,
            price: ‘$2‘
        }]
    })
})

内置方法:bootstrapTable(), 内置属性: columns, data  请参看Document

时间: 2024-10-10 21:06:44

Bootstrap Table学习笔记的相关文章

Bootstrap快速学习笔记(1)排版系列之二

欢迎收看大奥编写的Bootstrap快速学习笔记(1)排版系列之二 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: 表格 表格行的类 详细介绍 表格表格是Bootstrap的基础组件之一,有一个基础样式和四个附加样式以及一个响应式样式,全部通过class类来实 现,.table:基础表格,这是无论哪种类型的表格都必不可少的类:.table-striped:斑马线表格,更具可读性:.table- bordered:带边框的表格:.table-hover:鼠

bootstrap 新手学习笔记 代码整理

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 滚动监听(Scrollspy)插件方法</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jqu

Bootstrap快速学习笔记(2)表单系列之二

欢迎收看大奥编写的Bootstrap快速学习笔记(2)表单系列之二 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: 表单控件大小 表单控件状态 按钮 图像 详细介绍 表单控件大小表单控件大小可以通过给表单控件添加class类来实现,如果想要比较大,则添加input-lg类,如果想要比较小, 则添加input-sm类,但这仅是对高度进行了处理,如果要对宽度进行处理,需要在每个input控件外围添加div容器并带有col-xs-4类,并 且要在这组控件的外围

Bootstrap快速学习笔记(1)排版系列之一

欢迎收看大奥编写的Bootstrap快速学习笔记(1)排版系列之一 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: 标题 段落 强调内容 粗体和斜体 强调相关的类 文本对齐风格 列表 代码展示 详细介绍 标题 Bootstrap重写了h1-h6标题的样式属性并自定义了.h1-.h6类,并用small标签来显示副标题 段落 Bootstrap重写了p标签的样式属性 强调内容 .lead类改变文本样式 粗体和斜体 粗体<strong><b>斜体

Bootstrap快速学习笔记(2)表单系列之一

欢迎收看大奥编写的Bootstrap快速学习笔记(2)表单系列之一 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: .form-control类 水平表单 内联表单 详细介绍 form-control类把该类直接添加到控件上: 1.宽度变成了100%:2.设置了一个浅灰色(#ccc)的边框:3.具有4px的圆角:4.设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化:5.设置了placeholder的颜色为#999 水平表单最外层form标签要

.Net MVC+bootstrap Table学习

一.效果展示 二.使用方法 1).相关css和js的引用 <link href="~/Themes/Bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Themes/Bootstrap/css/bootstrap-table.css" rel="stylesheet" /> <!-----------------------

Bootstrap(基础)学习笔记1

Bootstrap到底是什么? 欢迎来到Bootstrap课堂,加入高端大气上档次的web前端开发团队.上一小节Bootstrap做了简单的介绍,下面我们再来了解一下Bootstrap的前世今缘,在右侧是用Bootstrap预设的组件样式,包括按钮.表格.标签.导航等,感兴趣的小伙伴可以先睹为快,后面的章节我们会对这些组件做详细讲解. 2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootSt

Boostrap Table学习笔记

最近要对项目上的table进行调整,让表格能够支持更多的操作,于是接触到了boostrapTable这个插件.研究了一天,记录下学习的内容. Boostrap Table可以支持表的分页及动态显示表的列等等功能.个人的理解是这款插件从后台请求到数据后,再进行一些js的操作,将请求到的数据填充到单元格上,达到动态的操作表格的效果.和thymeleaf这些模版引擎不太一样.Boostrap Table是在页面加载完成后,去填充数据,而模版引擎在返回html时数据已经在页面上了. 先附上一些参考资料:

Bootstrap 基础学习笔记(一)

排版 (1)标题 Bootstrap标题样式进行了以下显著的优化重置: 1.重新设置了margin-top和margin-bottom的值,  h1~h3重置后的值都是20px:h4~h6重置后的值都是10px.2.所有标题的行高都是1.1(也就是font-size的1.1倍),而且文本颜色和字体都继承父元素的颜色和字体.3.固定不同级别标题字体大小,h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px. 代码 1 <!DOCTYPE HTML> 2