$(function () {var options = {url: prefix2 + "/list",id: "bootstrap-table—input",modalName: "经营参数",updateUrl: prefix2 + "/edit/{id}",removeUrl: prefix2 + "/remove",showSearch: false,showRefresh: false,showToggle: false,showColumns: false,showPageGo: true,pagination: false,columns: [{field: ‘id‘,title: ‘序号‘,visible: false},{field: ‘amountAssets‘,title: ‘上一年净资产数额(万元)‘,titleT...
移动设备优先为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：<meta name="viewport" content="width=device-width, initial-scale=1.0">width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有...
导航组件： 导航条组件： 导航条代码：<nav class="navbar navbar-default"><div class="container"><div class="navbar-header"><a href="#" class="navbar-brand">标题</a></div><ul class="nav navbar-nav"><li class="active"><a href="#">首页</a></li><li class="disabled"><a href="#">资讯</a></li><li><a href="#">产品</a></li><li><a href="#">关于</a></li></ul><form action="#" class="navbar-form navbar-right"><d...
checkbox复选，radio单选 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>Document</title> 6</head> 7<body> 8<!-- 复选框跟文字联动，需要label标签包裹，并且label里的for是input的id --> 9<label for="apple"><input type="checkbox" id="apple">苹果</label>10<label for="banana"><input type="checkbox" id="banana">香蕉</label>11<label for="peach"><input type="checkbox" id="peach">桃...
默认栅格系统： bootstrap的默认栅格系统为12列。形成一个940px宽的容器，默认没有启用 响应式布局 。如果加入响应式布局CSS文件，栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下，列将不再固定并且会在垂直方向堆叠。 简单布局：对于简单的两列式布局，创建一个 .row 容器，并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格，所有 .span* 列所跨越的栅格数之...
对于一些较为常用的功能模块，Bootstrap也进行了封装。包括下拉菜单、按钮组、导航、分页、缩略图、进度条等。 下面先总结下下拉菜单的使用。 直接看下面的例子： <!DOCTYPE html> <html lang="zh-cn"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="../../css/bootstrap.min.css" rel="stylesheet"><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery....
Bootstrap中任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观，再结合一些选项，可以定义各种按钮样式。 0x01 按钮样式 <!DOCTYPE html> <html lang="zh-cn"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="../../css/bootstrap.min.css" rel="stylesheet"><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script src="....
Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。 0x01 基本实例 Bootstrap实现轮播幻灯片的效果，只需要简单地使用class开发就可以了： <!DOCTYPE html> <html lang="zh-cn"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="../../css/bootstrap.min.css" rel="stylesheet"><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery...
本文主要来学习一下JavaScript插件--滚动监听。 1、案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记。你可以试试滚动这个页面，看看左侧导航的变化。 先把实现的代码上了，你可以通过测试代码先来看看效果。Bootstrap.scrollspy-example{height: 200px;overflow: auto;position: relative;border:1px solid red;}Toggle navigationProject Name@fat@mdoDropdownonetwothree@fatAd leggings keytar, brunch id art ...
第一次使用Bootstrap-table这个表格插件，记录一下使用过程中遇到的问题。 |引入CSS文件 <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="bootstrap-table.css"> |引入相关库 我们需要引入Jquery库、bootstrap库、以及bootstrap-table.js文件 <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script> <script src="bootstrap-table.js"></script> <-- put your locale f...
在使用过程中，一边看文档一边做，遇到了一些困难的地方，在此记录一下，顺便做个总结： 1、前端分页 2、后端分页 3、模糊查询前端分页相当简单，在我添加了2w条测试数据的时候打开的很流畅，没有卡顿。 $(function(){a();});function a () {$(#yourtable).bootstrapTable({url: "/user/getUserList/",method:"post",dataType: "json",striped:true,//隔行变色cache:false, //是否使用缓存showColumns:false,// 列pagination: tru...
1、简介Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。 2、栅格选项bootstrap3.x使用了四种栅格选项来形成栅格系统，这四种选项在官网上的介绍如下图，很多人不理解，这里跟大家详解一下四种栅格选项之间的区别，其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class...
Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。如果您想要单独引用该插件的功能，那么您需要引用 carousel.js,或者bootstrap.js 或压缩版的 bootstrap.min.js。 <!DOCTYPE html> <html> <head> <title>Bootstrap 轮播（Carousel）插件</title> <meta charset="utf-8"> <link rel="stylesheet" href="c...
1.基础进度条 要写在<div class="progress"></div>里面。 <div class="col-md-6"><div class="progress"><div class="progress-bar" style="width:30%;"></div></div> </div>2.多彩进度条<div class="col-md-6"><div class="progress"><div class="progress-bar" style="width:30%;"></div></div><div class="progress"><div class="progress-bar progress-bar-danger" style="width:40%;"></div></div><div class="progress"><d...
前序： 现在angular2已经除了集成的angular-cli，建议大家可以基于这个来快速开发ng2的项目，不用自己再搭建环境； 相关内容请前往：https://angular.cn/docs/ts/latest/cli-quickstart.html 正文： 以图片轮播组件carousel为例： 首先安装好ng2-bootstrap,bootstrap npm install ng2-bootstrap bootstrap --save在需要用到的模块中导入 import { CarouselModule } from ng2-bootstrap @NgModule({imports: [CarouselModule.forRoo...