选项卡Tabs是Web中一种非常常用的功能。用户点击或悬浮对应的菜单项，能切换出对应的内容。 一 . 结构分析 Bootstrap框架中的选项卡主要有两部分内容组成： 选项卡组件（也就是菜单组件），对应的是 Bootstrap的 nav-tabs 底部可以切换的选项卡面板，在 Bootstrap 中通常 tab-pane 来表示 二. data-toggle触发选项卡(无需JS) 声明式触发选项卡需要满足以下几点要求： 1、选项卡导航链接中要...
一 . 结构分析 一个轮播图片主要包括三个部分： ? 轮播的图片 ? 轮播图片的计数器 ? 轮播图片的控制器 第一步：设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式，并且给这个容器定义一个 ID 值，方便后面采用 data 属性来声明触发。 第二步：设计轮播图片计数器。在容器 div.carousel 的内部添加轮播图片计算器，采用 carousel-indicators 样式，其主要...
栅格布局系统的特点： (1)所有的行必须放在容器中： .container或.container-fluid (2)分为多行(row)，一行中平均分为12列(col) (3)网页内容只能放在列(col)中，不能直接放在行(row) (4)可以在col中再嵌套row (5)col分为四大类： col-xs col-sm col-md col-lg (6)col-md-* *值可为1~12，值就为某个列的宽度( */12 ) (7)可以为一个列指定不同屏幕下的不同宽度 (8) col-lg-* 只对大PC屏幕...
响应式导航条：在PC和平板中默认要显示所有的内容；但在手机中导航条中默认只显示“LOGO/Brand”，以及一个“菜单折叠展开按钮”，只有单击折叠按钮后才显示所有的菜单项。 基础class： .navbar 1、Bootstrap中导航条的按位置： 1)顶部导航条 2)底部导航条 Bootstrap中导航条的按颜色： 1)浅色底深色的字 .navbar-default 2)深色底浅色的字 .navbar-inverse Bo...
触发手风琴可以通过自定义的 data-toggle 属性来触发。其中data-toggle值设置为 collapse，data-target="#折叠区标识符"。 第一步，设计一个面板组合，里面有三个折叠区： 第二步：给面板添加内容，每个面板包括两个部分，第一个是面板标题 panel-heading，并且在这里面添加标题 panel-title。第二个部分是面板内容，也就是折叠区，使用 panel-collapse 样式。 ...
分享一款基于bootstrap后台登录界面代码。这是一款基于基于bootstrap和css3实现的自适应移动端优先的登录界面代码。实现的效果图如下： 在线预览 源码下载 实现的代码。 html代码： via：http://www.w2bc.com/article/bootstrap-user-login-form
对于网站开发者来说，对展示内容增加一个滑动或者是轮播效果的是非常常见的需求。收费和免费的轮播插件多的是不胜枚举。其中很多提供很多有用的配置选项和动态效果。 很多时候，如果你的项目需要的是一个轻量级的轮播，不需要很多的功能。同时你的项目是采用Bootstrap，（一个最流行的开源前端框架）的话。你可以参考一下bootstrap官方组件。 这篇文章将展示如何在 Bootstrap轮播上添加有趣的动画效果。同时确保这个js组件自...
1， Bootstrap Bundle （http://bootstrapbundle.com/）: 提供了15中不同的MVC Bootstrap模板。【扩展和更新】中搜索“Bootstrap Bundle” 下载安装。新建项目的时候就可以直接选择模板了。 2，Bootswatch (http://bootswatch.com/): 提供了一些不同色调的bootstraps css文件,可以直接下载所需主题的css文件覆盖项目中的css: 3，Bootstrap Snippets(http://bootsnipp.com/): 可以直接在vs中插入bootstr...
HTML 5 文档类型（Doctype） Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。 因此，请在使用 Bootstrap 项目的开头包含下面的代码段。 . 如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型（Doctype），您可能会面临一些浏览器显示不一致的问题，甚至可能面临一些特定情境下的不一致，以致于您的代码不能通过 W3C 标准的验证。 移动设备优先 移动...
Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap，讨论 Bootstrap 文件结构，并通过一个实例演示它的用法。 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页： 您会看到两个按钮： Download Bootstrap ：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本...
先说下遇到这个问题的背景吧。 就是在页面中有个div，这个div右上角（或者其他位置）有个 的图标（这个图标添加tooltip工具提示），光标移到这个图标时，触发tooltip，提示“点击移除”这样类似的字样，然后点击后，把这个div作remove()这样的删除操作。 然后，问题来了，因为这个div被remove()了，导致生成的tooltip对应的 图标也被remove()，因为找不到，所以对应的mouseout（可能是mouseleave事件，参考了一下bootstrap...
一、引言 很久没有写过博客了，但是最近这段时间都没有闲着，接触了很多方面。比如一些前端框架和组件、还有移动开发React-Native、以及对.NET框架设计的一些重新认识。这些内容在接下来的时间都会一一和大家分享的。我为什么放置了这么久又重新写博客呢？因为在这段时间里面，我虽然接触了这么多东西，自己也没有停下来学习，但是没有写博文总结的话，总感觉这些东西还不是我的。心里总感觉空荡荡的。今天先介绍了一个前端...
前言：很多时候我们在项目中需要用到树，有些树仅仅是展示层级关系，有些树是为了展示和编辑层级关系，还有些树是为了选中项然后其他地方调用选中项。不管怎么样，树控件都是很多项目里面不可或缺的组件之一。今天，博主打算结合自己的使用经历和网上找到的一些不错的树控件在这里做一个分享，希望能帮大家找到最合适的控件。还是那句话：控件没有最好，只有最合适。 一、JQuery树形控件 Jquery树形控件是一款基于JQuery+boo...
我自己做了一个网站，使用的是bootstrap技术作为设计界面，但是使用360浏览器的时候，出现了图片不兼容的问题，总的来说是网页出现了不兼容的问题。 我的网站解决方法：在页面中加入了一个meta的标签 就把问题解决了。
什么是Bootstrap？ Bootstrap 是由Twitter推出的一个用于快速开发 Web 应用程序和网站的前端框架。 基于html5、css3的bootstrap，具有下面这些诱人特性： （1）移动设备优先； （2）漂亮的设计； （3）友好的学习曲线； （4）卓越的兼容性； （5）响应式设计； （6）12列响应式栅格结构； （7）样式向导文档。 自定义JQuery插件，完整的...