boorstrap插件的使用以及介绍

boorstrap的介绍以及由来
Bootstrap是Twitter推出的一个由动态CSS语言Less写成的开源CSS/HTML框架(同时提供Sass 移植版代码)。Bootstrap提供了全面的基本及组件样式并自带了13个jQuery插件(模态对话框、标签页、滚动条、弹出框等),可满足常用开发需要,而且还根据需要定制。另外,Bootstrap提供了优雅的HTML和CSS规范,使用者也可以参考学习。本文作者仅在结构层面对Bootstrap进行介绍。
【图标】

200个来自 Glyphicon Halflings 的字体图标,
图标类只能应用在空元素上,且不可与其它组件联合使用。
<span class="glyphicon glyphicon-search"></span>
【菜单】
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里
菜单对齐:默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐
菜单分组:dropdown-header表描述项,.disabled 表禁用项
向上弹出: .droup 类就能使触发的下拉菜单朝上方打开
【按钮组】
按钮组.btn-group,通过.btn-group-* 指定组中按钮尺寸。
按钮栏.btn-toolbar

钮垂直堆叠排列显示btn-group-vertical

两端对齐排列的按钮组btn-group-justified

【导航】

标签页.nav-tabs 类依赖 .nav 基类。
胶囊式标签页.nav-pills 类,添加 .nav-stacked 类改为垂直堆叠。
.nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。
navbar navbar-default
对于不包含在 中的 元素,加上 .navbar-btn 后,可以让它在导航条里垂直居中。
将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐,
.navbar-text
.navbar-link
.navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。
.navbar-fixed-top 类可以让导航条固定在顶部
.navbar-fixed-bottom 类可以让导航条固定在底部
.navbar-static-top 类可让导航条随着页面向下滚动而消失。
.navbar-inverse 类可以改变导航条的外观。
breadcrumb 创建带有层次的导航结构(面包屑)。
【分页】
pagination,并根据情况对页码使用.disabled 类、 .active 类。
.pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸。
pager上一页和下一页的简单翻页。并可通过previous,next类标示。
这是组件的一些使用,是我们经常所用到的

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值