Bootstarp中的组件

组件

1.导航条

	设置给包裹元素nav
	.navbar
	.navbar-default
	.navbar-inverse   反色
	.navbar-static-top 静止在顶部(方角)
	.navbar-fixed-top 固定在顶部
	.navbar-fixed-bottom 固定在底部
	
	导航条内部分为两部分:
	.navbar-header
	.nabar-collapse

	设置给导航里面
	.navbar-btn   导航的按钮
	.navbar-form  导航的表单
	.navbar-text 导航条里面的文本
	.navbar-left   左浮动
	.navbar-right  右浮动
	.navbar-brand  品牌图标
	.navbar-nav		导航

在这里插入图片描述
在这里插入图片描述
因为导航条添加了.navbar-fixed-top 固定在顶部。属性,就相当于固定定位,所以要设置一个body的内边距,可以把导航条的高度让出来,让padding-top等于导航条的高度
在这里插入图片描述

2.下拉菜单

	包裹元素:
			.dropdown/.dropup
	里面:
			.dropdown-toggle  按钮
			.dropdown-menu   子菜单

在这里插入图片描述

3.输入框组

在这里插入图片描述
在这里插入图片描述

4.巨幕

在这里插入图片描述

5.路径导航(面包屑导航)

在这里插入图片描述

6.缩略图

1.设置一个row包裹,然后设置每个col-md即可。

2.可以加一个最小高度来控制它。
在这里插入图片描述

在这里插入图片描述

7.分页

在这里插入图片描述

8.进度条

.progress-bar-success 进度条的颜色
.progress-bar-striped  进度条的条纹
.active  动态的进度条
style="width: 40%;   设置滚动条里面的进度是百分之多少
<span class="sr-only">40% Complete</span>    用于无障碍阅读

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

9.列表组

列表组里面可以写一个超链接,超链接后面可以写标签
在这里插入图片描述
在这里插入图片描述

10.标签

在这里插入图片描述
在这里插入图片描述

11.徽章

在这里插入图片描述
在这里插入图片描述

12.媒体对象

在这里插入图片描述
在这里插入图片描述

13.警告框

在这里插入图片描述

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值