摘要：
很多情况之一，设计师希望导航条固定在浏览器顶部或底部，这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了两种固定导航条的方式： .navbar-fixed-top：导航条固定在浏览器窗口顶部 .navbar-fixed-bottom：导航条固定在浏览器窗口底部 …我是... 阅读全文
随笔档案-2015年06月
Bootstrap系列 -- 42. 导航条中的按钮、文本和链接
2015-06-29 21:12 by 贺臣, 2512 阅读, 收藏, 编辑
摘要：
Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，还可以使用其他元素。框架提供了三种其他样式： 1、导航条中的按钮navbar-btn 2、导航条中的文本navbar-text 3、导航条中的普通链接navb... 阅读全文
Bootstrap系列 -- 41. 带表单的导航条
2015-06-29 20:43 by 贺臣, 955 阅读, 收藏, 编辑
摘要：
有的导航条中会带有搜索表单,在Bootstrap框架中提供了一个“navbar-form”，使用方法很简单，在navbar容器中放置一个带有navbar-form类名的表单。navbar-left”让表单左浮动，更好实现对齐。在Bootstrap框架中，还提供了“navbar-right”样式，... 阅读全文
Bootstrap系列 -- 40. 导航条二级菜单
2015-06-29 17:56 by 贺臣, 2059 阅读, 收藏, 编辑
摘要：
在导航条中添加二级菜单也非常简单 导航条 网站首页 系列教程 CSS3 JavaScript PHP ... 阅读全文
Bootstrap系列 -- 39. 导航条添加标题
2015-06-29 17:55 by 贺臣, 1040 阅读, 收藏, 编辑
摘要：
在Web页面制作中，常常在菜单前面都会有一个标题（文字字号比其它文字稍大一些），其实在Bootstrap框架也为大家做了这方面考虑，其通过“navbar-header”和“navbar-brand”来实现。 导航条 网站首页 系列教程 ... 阅读全文
Bootstrap系列 -- 38. 基础导航条
2015-06-29 17:52 by 贺臣, 544 阅读, 收藏, 编辑
摘要：
在制作一个基础导航条时，主要分以下几步： 第一步：首先在制作导航的列表()基础上添加类名“navbar-nav” 第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default” “.navbar”样式的主要功能就是设置左右padding和圆角等效果... 阅读全文
Bootstrap系列 -- 37. 基础导航样式
2015-06-26 23:04 by 贺臣, 861 阅读, 收藏, 编辑
摘要：
Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类。比如右侧代码编辑器中就有一个tab导航条的例子，他的实现方法就是为ul标签加入.nav和nav-tabs两个... 阅读全文
Bootstrap系列 -- 36. 向上弹起的下拉菜单
2015-06-26 23:00 by 贺臣, 3939 阅读, 收藏, 编辑
摘要：
有些菜单是需要向上弹出的，比如说你的菜单在页面最底部，而这个菜单正好有一个下拉菜单，为了让用户有更好的体验，不得不让下拉菜单向上弹出。在Bootstrap框架中专门为这种效果提代了一个类名“dropup”。使用方法正如前面所示，只需要在“btn-group”上添加这个类名（当然，如果是普通向上弹... 阅读全文
Bootstrap系列 -- 35. 按钮的向下向上三角形
2015-06-26 22:56 by 贺臣, 2717 阅读, 收藏, 编辑
摘要：
按钮的向下三角形，我们是通过在标签中添加一个“”标签元素，并且命名为“caret”. 按钮下拉菜单 按钮下拉菜单项 按钮下拉菜单项 按钮下拉菜单项 按钮下拉菜单项 阅读全文
Bootstrap系列 -- 34. 按钮下拉菜单
2015-06-26 22:55 by 贺臣, 479 阅读, 收藏, 编辑
摘要：
按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮（.btn）样式效果。简单点说就是点击一个按钮，会显示隐藏的下拉菜单。按钮下拉菜单其实就是普通的下拉菜单，只不过把“”标签元素换成了“”标签元素。唯一不同的是外部容器“div.dropdo... 阅读全文
Bootstrap系列 -- 33. 等分按钮
2015-06-26 22:54 by 贺臣, 962 阅读, 收藏, 编辑
摘要：
等分按钮也常被称为是自适应分组按钮，其实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名. 首页 产品展示 案例分析 联系我们 ... 阅读全文
Bootstrap系列 -- 32. 按钮垂直分组
2015-06-26 22:53 by 贺臣, 808 阅读, 收藏, 编辑
摘要：
实际运用当中，总会碰到垂直显示的效果。在Bootstrap框架中也提供了这样的风格。我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可。 首页 产品展示 案例分析 联系我们 关于我们 公司简介 ... 阅读全文
Bootstrap系列 -- 31.嵌套分组
2015-06-26 22:50 by 贺臣, 5526 阅读, 收藏, 编辑
摘要：
我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果。使用的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级 首页 产品展示 案例分析 联系我们 关于我们 公司简介 ... 阅读全文
Bootstrap系列 -- 30. 按钮工具栏
2015-06-26 22:46 by 贺臣, 684 阅读, 收藏, 编辑
摘要：
在富文本编辑器中，将按钮组分组排列在一起，比如说复制、剪切和粘贴一组；左对齐、中间对齐、右对齐和两端对齐一组.Bootstrap框架按钮工具栏也提供了这样的制作方法，你只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中. 如果按钮组中需要改变大小，可以使用.b... 阅读全文
Bootstrap系列 -- 29. 按钮组
2015-06-26 22:43 by 贺臣, 906 阅读, 收藏, 编辑
摘要：
单个按钮在Web页面中的运用有时候并不能满足我们的业务需求，常常会看到将多个按钮组合在一起使用，比如富文本编辑器里的一组小图标按钮等 按钮组和下拉菜单组件一样，需要依赖于button.js插件才能正常运行。不过我们同样可以直接只调用bootstrap.js文件。因为这个文件已集成了button... 阅读全文
Bootstrap系列 -- 28. 下拉菜单状态
2015-06-25 22:47 by 贺臣, 546 阅读, 收藏, 编辑
摘要：
下拉菜单项的默认的状态（不用设置）有悬浮状态（:hover）和焦点状态（:focus）。 下拉菜单项除了上面两种状态，还有当前状态（.active）和禁用状态（.disabled）。这两种状态使用方法只需要在对应的菜单项上添加对应的类名 下拉菜单 下拉菜单项 ... 阅读全文
Bootstrap系列 -- 27. 下拉菜单对齐方式
2015-06-25 22:44 by 贺臣, 14710 阅读, 收藏, 编辑
摘要：
Bootstrap框架中下拉菜单默认是左对齐，如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名。使用pull-right类使下拉菜单与父容器右边对齐 下拉菜单 ... 阅读全文
Bootstrap系列 -- 26. 下拉菜单标题
2015-06-25 22:28 by 贺臣, 732 阅读, 收藏, 编辑
摘要：
Bootstrap下拉菜单中使用dropdown-header 来显示菜单标题，和上一篇说道的分割线一样 下拉菜单 第一部分菜单头部 下拉菜单项 下拉菜单项 下拉菜单项 第二部分菜单头部 下拉菜单项 下拉菜单项 下... 阅读全文
Bootstrap系列 -- 25. 下拉菜单分割线
2015-06-25 22:23 by 贺臣, 3509 阅读, 收藏, 编辑
摘要：
在Bootstrap框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的，并且给这个添加类名“divider”来实现添加下拉分隔线的功能。 下拉菜单 下拉菜单项 下拉菜单项 下拉菜单项 下拉菜单... 阅读全文
Bootstrap系列 -- 24. 下拉菜单基本用法
2015-06-25 22:20 by 贺臣, 3219 阅读, 收藏, 编辑
摘要：
在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。当然，如果你使用的是未编译版本，在js文件夹下你能找到一个名为“dropdown.js”的文件。而Bootstrap.js 是依赖jQuery库的。所以在引入Bootstrap.js之前要... 阅读全文
Bootstrap系列 -- 23. 图片
2015-06-25 21:07 by 贺臣, 482 阅读, 收藏, 编辑
摘要：
图像在网页制作中也是常要用到的元素，在Bootstrap框架中对于图像的样式风格提供以下几种风格： 1、img-responsive：响应式图片，主要针对于响应式设计 2、img-rounded：圆角图片 3、img-circle：圆形图片 4、img-thumbnail：缩略图片 ... 阅读全文
Bootstrap系列 -- 22. 按钮详解
2015-06-25 20:37 by 贺臣, 1080 阅读, 收藏, 编辑
摘要：
Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格，然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。基本样式 几种不同样式风格的按钮 基础按钮.btn 默认按钮.... 阅读全文
Bootstrap系列 -- 22. 按钮
2015-06-25 20:36 by 贺臣, 643 阅读, 收藏, 编辑
摘要：
Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格，然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。基本样式 几种不同样式风格的按钮 基础按钮.btn 默认按钮.... 阅读全文
Bootstrap系列 -- 21. 表单提示信息
2015-06-25 11:53 by 贺臣, 1405 阅读, 收藏, 编辑
摘要：
平常在制作表单验证时，要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式，将提示信息以块状显示，并且显示在控件底部。 成功状态 你输入的信息是正确的 Bootstrap提供了一个行内提示信息，其使用了类名“help-inline”... 阅读全文
Bootstrap系列 -- 20. 禁用状态
2015-06-25 08:32 by 贺臣, 17502 阅读, 收藏, 编辑
摘要：
Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的，在相应的表单控件上添加属性“disabled” 在使用了“form-control”的表单控件中，样式设置了禁用表单背景色为灰色，而且手型变成了不准输入的形状。如果控件中不使用类名“form-control”，禁用... 阅读全文
Bootstrap系列 -- 19. 焦点状态
2015-06-25 08:18 by 贺臣, 5282 阅读, 收藏, 编辑
摘要：
表单主要用来与用户沟通，好的表单就能更好的与用户进行沟通，而好的表单一定离不开表单的控件状态。 表单状态的作用： 每一种状态都能给用户传递不同的信息，比如表单有焦点的状态可以告诉用户可以输入或选择东西，禁用状态可以告诉用户不可以输入或选择东西，还有就是表单控件验证状态，可以告诉用户的操作是否... 阅读全文
Bootstrap系列 -- 18. 表单控件大小
2015-06-25 08:14 by 贺臣, 11178 阅读, 收藏, 编辑
摘要：
前面看到的表单控件都正常的大小。可以通过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是： 1.input-sm:让控件比正常大小更小 2.in... 阅读全文
Bootstrap系列 -- 17. 复选框checkbox和单选择按钮radio
2015-06-24 22:16 by 贺臣, 3036 阅读, 收藏, 编辑
摘要：
Bootstrap框架中checkbox和radio有点特殊，Bootstrap针对他们做了一些特殊化处理，主要是checkbox和radio与label标签配合使用会出现一些小问题（最头痛的是对齐问题）。使用Bootstrap框架，开发人员无需考虑太多。 案例1 ... 阅读全文
Bootstrap系列 -- 16. 文本域textarea
2015-06-24 22:15 by 贺臣, 23541 阅读, 收藏, 编辑
摘要：
文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。 阅读全文
Bootstrap系列 -- 15. 下拉选择框select
2015-06-24 20:58 by 贺臣, 43780 阅读, 收藏, 编辑
摘要：
Bootstrap框架中的下拉选择框使用和原始的一致，多行选择设置multiple属性的值为multiple。Bootstrap框架会为这些元素提供统一的样式风格 阅读全文
Bootstrap系列 -- 14. 表单控件输入框input
2015-06-24 20:56 by 贺臣, 1505 阅读, 收藏, 编辑
摘要：
每一个表单都是由表单控件组成。离开了控件，表单就失去了意义。接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识。 单行输入框，常见的文本输入框，也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型... 阅读全文
Bootstrap系列 -- 13. 内联表单
2015-06-24 20:54 by 贺臣, 1867 阅读, 收藏, 编辑
摘要：
有时候我们需要将表单的控件都在一行内显示。在Bootstrap框架中实现这样的表单效果是轻而易举的，你只需要在元素中添加类名“form-inline”即可 如果你要在input前面添加一个label标签时，会导致input换行显示。如果你必须添加这样的一个label标签，并且不想让input换... 阅读全文
Bootstrap系列 -- 12. 水平表单
2015-06-24 20:50 by 贺臣, 8744 阅读, 收藏, 编辑
摘要：
Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格（标签居左，表单控件居右） 在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件： 1、在元素是使用类名“form-horizontal”。 2、配合Bootstrap框架的网格系统。 在元... 阅读全文
Bootstrap系列 -- 11. 基础表单
2015-06-24 20:48 by 贺臣, 1099 阅读, 收藏, 编辑
摘要：
表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同，而且不同的浏览器对表单控件渲染的风格都各有不同。 ... 阅读全文
Bootstrap系列 -- 10. 网格布局
2015-06-24 08:36 by 贺臣, 7152 阅读, 收藏, 编辑
摘要：
一. 实现原理 网格布局是通过容器的大小，平均分为12份(可以修改),再调整内外边距,和表格布局有点类似但是也存在区别。 实现步骤如下: (1) 数据行.row 必须包含在容器.container 中, 以便赋予核实的对齐方式和内间距设置 (2)在行(.row)中可以添加列(... 阅读全文
Bootstrap系列 -- 9. 表格
2015-06-19 22:43 by 贺臣, 1293 阅读, 收藏, 编辑
摘要：
一. Bootstrap 表格样式支持 Bootstrap提供了六种不同风格的样式支持,其中一个基础样式，4个附件样式,1个响应式设计样式 1..table：基础表格 2..table-striped：斑马线表格 3..table-bordered：带边框的表格 4..table-hove... 阅读全文
Bootstrap系列 -- 8. 代码显示
2015-06-19 22:19 by 贺臣, 1739 阅读, 收藏, 编辑
摘要：
一. Bootstrap中的代码块 代码块一般在博客中使用的较多，比较博客园中提供的贴代码. 在Bootstrap中提供了三种形式的代码显示 1.使用来显示单行内联代码 2.使用来显示多行块代码 3.使用来显示用户输入代码二. code 显示 Bootstrap的code代码风... 阅读全文
Bootstrap系列 -- 7. 列表排版方式
2015-06-19 16:35 by 贺臣, 1322 阅读, 收藏, 编辑
摘要：
一. 去点列表 1. 使用class=list-unstyled 无序列表项目 无序列表项目 无序列表项目 无序列表项目 无序列表项目 无序列表项目 无序列表项目 无序列... 阅读全文
Bootstrap系列 -- 6. 列表
2015-06-19 16:27 by 贺臣, 1113 阅读, 收藏, 编辑
摘要：
一. 普通无序列表 无序列表项目 无序列表项目 无序列表项目 无序列表项目 无序列表项目二. 有序列表 有序项目列表一 有序项目列表一 有序项目列表一三. 嵌条列表 有序列表... 阅读全文
Bootstrap系列 -- 5. 文本对齐方式
2015-06-19 16:17 by 贺臣, 5218 阅读, 收藏, 编辑
摘要：
一. 文本对齐样式 .text-left：左对齐 .text-center：居中对齐 .text-right：右对齐 .text-justify：两端对齐二. 使用方式我居左 我居中 我居右 这个强调动手、项目主导的合作项目将首先提供科技方面的硕士学位，过几年会提供其他学位... 阅读全文
Bootstrap系列 -- 4. 文本内容强调
2015-06-19 16:12 by 贺臣, 1198 阅读, 收藏, 编辑
摘要：
一. 文本强调基本样式 .text-muted：提示，使用浅灰色（#999） .text-primary：主要，使用蓝色（#428bca） .text-success：成功，使用浅绿色(#3c763d) .text-info：通知信息，使用浅蓝色（#31708f） .text-warnin... 阅读全文
Bootstrap系列 -- 3. 段落
2015-06-19 16:04 by 贺臣, 965 阅读, 收藏, 编辑
摘要：
一. 段落基本用法 1. 段落使用标签 2. 段落全局使用font-size=14px字体 ..... 更多请使用Firefox 查看 华盛顿大学和清华大学共同在西雅图发起了一个合作办学项目，关注科技和设计进步。对中美两国来说，技术近年来已经是关键点。本项目由微软出资 4000 ... 阅读全文
Bootstrap系列 -- 2. 标题
2015-06-19 15:55 by 贺臣, 3489 阅读, 收藏, 编辑
摘要：
一. Bootstrap标题 在Bootstrap中使用标题和Html本身没有太大的区别使用h1-h6, 而Bootstrap只是默认修改了H1-h6的样式,网上找到如下资料参考 二. Bootstrap 标题的修改 1.重新设置了margin-top和margin-bottom的值， h1~... 阅读全文
Bootstrap系列 -- 1. 如何使用Bootstrap
2015-06-19 15:39 by 贺臣, 2623 阅读, 收藏, 编辑
摘要：
一. Bootstrap 简介 Bootstrap 是一个前端框架,使用Bootstrap可以做出很多漂亮的页面,中文官网：http://www.bootcss.com/ 二. Bootstrap核心 Bootstrap核心是Bootstrap.css 和 Bootstrap.js , Boo... 阅读全文
Cordova4.0 系列 -- 常用命令(2)
2015-06-08 17:50 by 贺臣, 2027 阅读, 收藏, 编辑
摘要：
一.创建一个cordova工程create [ []] 二.列出该工程支持哪些平台platform [ls | list] 三.工程添加一个或多个平台支持platform add [ ...] 四.删除该工程的某个平台支持platform [rm | remove] [ ...] 五.更新该工... 阅读全文
服务器端解决JS跨域调用问题
2015-06-07 11:20 by 贺臣, 2788 阅读, 收藏, 编辑
摘要：
一. 使用JSONp方式调用 不做详细讲解，可以参考jq文档 二. 服务端配置 修改Web.config 文件 客户端调用代码如下 经过测试调用成功,可以用于手机端的调用 作者：情缘 出处：http://www.cnblogs.com/qingyuan/ 关于作者：从事仓库，生产软件方面的开发，在项 阅读全文
Cordova4.0 系列 -- 基本环境搭建(1)
2015-06-07 09:41 by 贺臣, 11475 阅读, 收藏, 编辑
摘要：
一. 安装Node.js基本环境 官网下载地址：https://nodejs.org/ 安装成功之后可以使用简单命令查看其版本node -v npm相关命令node cli.js install npm -gf //安装最新的NPMnode cli.js install npm... 阅读全文
