基础导航条。样式：class="navbar navbar-default"，属性：role="navigation"<div class="navbar navbar-default" role="navigation"><ul class="nav navbar-nav"><li class="active"><a href="##">网站首页</a></li><li><a href="##">系列教程</a></li><li><a href="##">名师介绍</a></li><li><a href="##">成功案例</a></li><li><a href="##">关于我们</a></li></ul></div>View Code效果图1）带二级菜单，表单元素<div class="na...
?? Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。
1）如下开头html标签：<!DOCTYPE html>
<html lang="zh-CN">...
</html> 2）Bootstrap3是按照移动设备优先设计的框架。为了确保适当的绘制和触屏缩放，需要添加viewport元数据标签：<meta name="viewport" content="width=device-width, initial-scale=1"> 如果要在移动设备浏览器上禁用其缩放（zooming）功能，可以这样设置vi...
按钮（补充）块级按钮（ps：按钮占一整行）六>' ref='nofollow'>bootstrap学习笔记<六>原文：http://www.cnblogs.com/MirageFox/p/5029756.html
栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。Bootstrap 栅格系统的工作原理: 1. 行（row）必须包含在 .container （固定宽度）或 .containe...
Bootstrap中文网对于其下载及其环境搭建已经描述的很清楚了，本文列举了一下我在学习过程中重点关注的一些地方（注我在学习时Bootstrap的是v3.2.0），需要注意的 是Bootstrap的js组件都是基于JQuery进行开开发的，所以你要Bootstrap提供的js就必须提前引入JQuery。开发者版本(用于生产环境的Bootstrap) 下载压缩包之后，将其解压缩到任意目录即可看到以下（压缩版的）目录结构： 这是最基本的 Bootstrap 文件组织形式：...
$(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...
