摘要：
并非闲的蛋疼,做技术也经常喜欢蛋疼,纠结于各种技术,各种需求变更，还有一个很苦恼的就是UI总是那么不尽人意。前不久自己开源了自己做了多年的仓储项目(开源地址:https://github.com/hechenqingyuan/gitwms),虽然比较简单业务也不算特别复杂，但终究是做出来了而且还有客 阅读全文
随笔分类 - bootstrap
Bootstrap系列 -- 44. 分页导航
2015-07-05 21:40 by 贺臣, 3068 阅读, 收藏, 编辑
摘要：
带页码的分页导航，可能是最常见的一种分页导航，特别是在列表页内容超多的时候，会给用户提供分页的导航方式。平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法。 在Boots 阅读全文
Bootstrap系列 -- 43. 固定导航条
2015-06-29 21:13 by 贺臣, 3055 阅读, 收藏, 编辑
摘要：
很多情况之一，设计师希望导航条固定在浏览器顶部或底部，这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了两种固定导航条的方式： .navbar-fixed-top：导航条固定在浏览器窗口顶部 .navbar-fixed-bottom：导航条固定在浏览器窗口底部 …我是... 阅读全文
Bootstrap系列 -- 42. 导航条中的按钮、文本和链接
2015-06-29 21:12 by 贺臣, 2505 阅读, 收藏, 编辑
摘要：
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 贺臣, 952 阅读, 收藏, 编辑
摘要：
有的导航条中会带有搜索表单,在Bootstrap框架中提供了一个“navbar-form”，使用方法很简单，在navbar容器中放置一个带有navbar-form类名的表单。navbar-left”让表单左浮动，更好实现对齐。在Bootstrap框架中，还提供了“navbar-right”样式，... 阅读全文
Bootstrap系列 -- 40. 导航条二级菜单
2015-06-29 17:56 by 贺臣, 2037 阅读, 收藏, 编辑
摘要：
在导航条中添加二级菜单也非常简单 导航条 网站首页 系列教程 CSS3 JavaScript PHP ... 阅读全文
Bootstrap系列 -- 39. 导航条添加标题
2015-06-29 17:55 by 贺臣, 1034 阅读, 收藏, 编辑
摘要：
在Web页面制作中，常常在菜单前面都会有一个标题（文字字号比其它文字稍大一些），其实在Bootstrap框架也为大家做了这方面考虑，其通过“navbar-header”和“navbar-brand”来实现。 导航条 网站首页 系列教程 ... 阅读全文
Bootstrap系列 -- 38. 基础导航条
2015-06-29 17:52 by 贺臣, 541 阅读, 收藏, 编辑
摘要：
在制作一个基础导航条时，主要分以下几步： 第一步：首先在制作导航的列表()基础上添加类名“navbar-nav” 第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default” “.navbar”样式的主要功能就是设置左右padding和圆角等效果... 阅读全文
Bootstrap系列 -- 37. 基础导航样式
2015-06-26 23:04 by 贺臣, 855 阅读, 收藏, 编辑
摘要：
Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类。比如右侧代码编辑器中就有一个tab导航条的例子，他的实现方法就是为ul标签加入.nav和nav-tabs两个... 阅读全文
Bootstrap系列 -- 36. 向上弹起的下拉菜单
2015-06-26 23:00 by 贺臣, 3927 阅读, 收藏, 编辑
摘要：
有些菜单是需要向上弹出的，比如说你的菜单在页面最底部，而这个菜单正好有一个下拉菜单，为了让用户有更好的体验，不得不让下拉菜单向上弹出。在Bootstrap框架中专门为这种效果提代了一个类名“dropup”。使用方法正如前面所示，只需要在“btn-group”上添加这个类名（当然，如果是普通向上弹... 阅读全文
Bootstrap系列 -- 35. 按钮的向下向上三角形
2015-06-26 22:56 by 贺臣, 2711 阅读, 收藏, 编辑
摘要：
按钮的向下三角形，我们是通过在标签中添加一个“”标签元素，并且命名为“caret”. 按钮下拉菜单 按钮下拉菜单项 按钮下拉菜单项 按钮下拉菜单项 按钮下拉菜单项 阅读全文
Bootstrap系列 -- 34. 按钮下拉菜单
2015-06-26 22:55 by 贺臣, 476 阅读, 收藏, 编辑
摘要：
按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮（.btn）样式效果。简单点说就是点击一个按钮，会显示隐藏的下拉菜单。按钮下拉菜单其实就是普通的下拉菜单，只不过把“”标签元素换成了“”标签元素。唯一不同的是外部容器“div.dropdo... 阅读全文
Bootstrap系列 -- 33. 等分按钮
2015-06-26 22:54 by 贺臣, 956 阅读, 收藏, 编辑
摘要：
等分按钮也常被称为是自适应分组按钮，其实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名. 首页 产品展示 案例分析 联系我们 ... 阅读全文
Bootstrap系列 -- 32. 按钮垂直分组
2015-06-26 22:53 by 贺臣, 802 阅读, 收藏, 编辑
摘要：
实际运用当中，总会碰到垂直显示的效果。在Bootstrap框架中也提供了这样的风格。我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可。 首页 产品展示 案例分析 联系我们 关于我们 公司简介 ... 阅读全文
Bootstrap系列 -- 31.嵌套分组
2015-06-26 22:50 by 贺臣, 5519 阅读, 收藏, 编辑
摘要：
我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果。使用的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级 首页 产品展示 案例分析 联系我们 关于我们 公司简介 ... 阅读全文
Bootstrap系列 -- 30. 按钮工具栏
2015-06-26 22:46 by 贺臣, 678 阅读, 收藏, 编辑
摘要：
在富文本编辑器中，将按钮组分组排列在一起，比如说复制、剪切和粘贴一组；左对齐、中间对齐、右对齐和两端对齐一组.Bootstrap框架按钮工具栏也提供了这样的制作方法，你只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中. 如果按钮组中需要改变大小，可以使用.b... 阅读全文
Bootstrap系列 -- 29. 按钮组
2015-06-26 22:43 by 贺臣, 898 阅读, 收藏, 编辑
摘要：
单个按钮在Web页面中的运用有时候并不能满足我们的业务需求，常常会看到将多个按钮组合在一起使用，比如富文本编辑器里的一组小图标按钮等 按钮组和下拉菜单组件一样，需要依赖于button.js插件才能正常运行。不过我们同样可以直接只调用bootstrap.js文件。因为这个文件已集成了button... 阅读全文
Bootstrap系列 -- 28. 下拉菜单状态
2015-06-25 22:47 by 贺臣, 541 阅读, 收藏, 编辑
摘要：
下拉菜单项的默认的状态（不用设置）有悬浮状态（:hover）和焦点状态（:focus）。 下拉菜单项除了上面两种状态，还有当前状态（.active）和禁用状态（.disabled）。这两种状态使用方法只需要在对应的菜单项上添加对应的类名 下拉菜单 下拉菜单项 ... 阅读全文
Bootstrap系列 -- 27. 下拉菜单对齐方式
2015-06-25 22:44 by 贺臣, 14681 阅读, 收藏, 编辑
摘要：
Bootstrap框架中下拉菜单默认是左对齐，如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名。使用pull-right类使下拉菜单与父容器右边对齐 下拉菜单 ... 阅读全文
Bootstrap系列 -- 26. 下拉菜单标题
2015-06-25 22:28 by 贺臣, 725 阅读, 收藏, 编辑
摘要：
Bootstrap下拉菜单中使用dropdown-header 来显示菜单标题，和上一篇说道的分割线一样 下拉菜单 第一部分菜单头部 下拉菜单项 下拉菜单项 下拉菜单项 第二部分菜单头部 下拉菜单项 下拉菜单项 下... 阅读全文