随笔分类 -  BootStrap

一款好用的js和css框架
摘要:这是bootstrap提供的样式,只需要引入bootstrap.css即可.需要使用的class样式:navbarnavbar-inversenavbar-innernavbar-fixed-top //悬浮顶部样式navbar-fixed-bottom //悬浮底部样式container-flui... 阅读全文
posted @ 2014-05-21 09:25 石奈子0314 阅读(21640) 评论(0) 推荐(0) 编辑
摘要:stickUp一个 jQuery 插件这是一个简单的jQuery插件,它能让页面目标元素 “固定” 在浏览器窗口的顶部,即便页面在滚动,目标元素仍然能出现在设定的位置。此插件可以在多页面的网站上工作,也能在单页面上面实现导航功能。滚动当前页面看看导航条的效果吧。首先我们去下载我们需要的js和css文... 阅读全文
posted @ 2014-05-19 16:14 石奈子0314 阅读(6345) 评论(1) 推荐(1) 编辑
摘要:bootstrap提供了成功执行、警告和错误信息的样式.在使用该功能的时候需要引入以下几个文件:bootstrap.cssjquery.js(需放在bootstrap.js之前)bootstrap.js(官方推荐引入的是bootstrap-alert.js)主要使用的样式:.span4.alert(... 阅读全文
posted @ 2014-05-13 11:58 石奈子0314 阅读(4964) 评论(1) 推荐(0) 编辑
摘要:Bootstrap中提供了面包屑导航的实现方法:只需要引入bootstrap.css文件即可.主要引用的样式有:.span6.breadcrumb实例代码如下: bootstrap面包屑导航 我是面包屑导航的例子 ... 阅读全文
posted @ 2014-05-13 11:28 石奈子0314 阅读(1785) 评论(0) 推荐(0) 编辑
摘要:Bootstrap ScrollSpy(滚动监听)是bootstrap插件提供的一个非常有趣的功能.当页面空间有限的时候我们可以利用它来显示我们想要显示的内容官方说的想要利用此功能需要引入以下文件:bootstrap/css/bootstrap.css jquery.1.9.1.js bootstr... 阅读全文
posted @ 2014-05-13 10:33 石奈子0314 阅读(721) 评论(0) 推荐(0) 编辑
摘要:要想使用Bootstrap Popover(弹出框)则必须引入其依赖的文件:jquery.js这个必须的(还是要写在其他js前面,bootstrap是依赖jquery的哦)bootstrap-tooltip.jsbootstrap-popover.jsbootstrap.css我试过不引入boots... 阅读全文
posted @ 2014-05-13 09:19 石奈子0314 阅读(1568) 评论(0) 推荐(0) 编辑
摘要:最近在尝试使用bootstrap的模态框使用模态框主要要引入一下几个js和css:bootstrap.cssjquery.1.9.1.js(这个可以灵活选择)bootstrap.jshtml页面的写法如下: 在写模态框的时候使用的class主要有:modal hide fade inm... 阅读全文
posted @ 2014-05-13 08:19 石奈子0314 阅读(7288) 评论(12) 推荐(1) 编辑
摘要:在本文中,您将学习如何使用 Bootstrap 工具包来创建基于导航、标签、胶囊式标签的导航。基于标签的导航nav nav-tabs Bootstrap 基本的基于标签的导航实例 Home ... 阅读全文
posted @ 2014-05-07 16:00 石奈子0314 阅读(673) 评论(0) 推荐(0) 编辑
摘要:价格表是销售产品或服务的任何网站的主要成分之一。即使 Boortstrap 3(与之前的版本一样)没有直接提供价格表组件,但是它提供了列表组组件。设计该组件的目的是为了渲染复杂的定制内容。利用这个特征,我们将在本教中创建 一个简单的价格表,并解释制作一个列表组所用到的 CSS 规则,并说明如何定制它... 阅读全文
posted @ 2014-05-07 15:33 石奈子0314 阅读(815) 评论(0) 推荐(0) 编辑
摘要:一般的样式在我们讨论 Bootstrap 3 提供的定义图像样式的特殊的 class 之前,我们将看到 Bootstrap 3 提供的定义图像的一般的样式。img { border: 0;}这是在 Bootstrap 3 的 CSS 中找到的第一个为图像定义的 CSS 规则,当图像呈现时用来移除边... 阅读全文
posted @ 2014-05-05 07:32 石奈子0314 阅读(717) 评论(0) 推荐(0) 编辑
摘要:Bootstrap 图标由 Glyphicons 提供。详情可以去bootstrap官网进行查看。用法: 实例:一个搜索表单 Example of using icons in search form - Bootstrap version 2.0 ... 阅读全文
posted @ 2014-04-30 14:00 石奈子0314 阅读(1110) 评论(0) 推荐(0) 编辑
摘要:自版本 2.0 起,Bootstrap 提供了四中类型的表单布局 -垂直(默认)搜索内联水平默认是垂直布局创建垂直表单布局View Code效果如图:创建搜索表单布局View Code效果如图:创建内联表单布局View Code效果如图:创建水平表单布局View Code效果如图:Bootstrap... 阅读全文
posted @ 2014-04-30 13:19 石奈子0314 阅读(421) 评论(1) 推荐(0) 编辑
摘要:Bootstrap 的简单表格实例 Example of Table with twitter bootstrap Student-ID First Name Last Name ... 阅读全文
posted @ 2014-04-30 07:55 石奈子0314 阅读(478) 评论(0) 推荐(0) 编辑
摘要:Bootstrap 排版实例 Example of Typography with bootstrap This is heading 1 / H1This is heading 2 / H2This is heading 3 / H3This is heading 4 / H4This ... 阅读全文
posted @ 2014-04-30 07:37 石奈子0314 阅读(309) 评论(0) 推荐(0) 编辑
摘要:bootstrap提供的布局主要有两种,固定布局和流动布局。Bootstrap 固定布局用法 ... 实例:Example of Fixed Layout with Bootstrap version 2.0 from w3cschool.ccHomeAboutContactw3csch... 阅读全文
posted @ 2014-04-30 07:20 石奈子0314 阅读(845) 评论(0) 推荐(0) 编辑
摘要:自版本 2.3.2 起,Bootstrap 提供了两种类型的网格,默认网格系统和流动网格系统。默认的网格系统是 940px 宽和 12 列。本文主要讲解第一种。首先让我们看,怎么来应用默认网格系统 Fixed layout example with Bootstrap ... 阅读全文
posted @ 2014-04-29 22:41 石奈子0314 阅读(754) 评论(0) 推荐(0) 编辑