基础导航条。样式: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...