Bootstrap 学习（二）组件

最新推荐文章于 2023-06-09 10:41:39 发布
最新推荐文章于 2023-06-09 10:41:39 发布
阅读量544 收藏 8
点赞数
分类专栏： Bootstrap 文章标签： bootstrap 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44071408/article/details/89294633
版权

一：什么是组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
二.有哪些组件：Bootstrap官方提供了很多组件，这里我们列了一个图：
在这里插入图片描述这里我们不会把全部的组件全部写一遍，毕竟太多了，我们带大家看一下几个常用的组件，其余组件各位可以去官网看看，有个影响要用的时候再看一下。
三.部分例子：
1.下拉菜单：
代码：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

效果：
在这里插入图片描述
通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的）。

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

效果：
在这里插入图片描述
2.按钮
代码：

	<div class="btn-group" role="group" aria-label="...">
		<button type="button" class="btn btn-default">Left</button>
		<button type="button" class="btn btn-default">Middle</button>
		<button type="button" class="btn btn-default">Right</button>
	</div>

效果：
在这里插入图片描述
与上面的下拉菜单结合：
代码：

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Dropdown
		<span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

效果：
在这里插入图片描述
-尺寸
只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。
代码：

<div class="btn-group btn-group-lg" role="group" aria-label="...">
	<button type="button" class="btn btn-default">Left</button>
	<button type="button" class="btn btn-default">Middle</button>
	<button type="button" class="btn btn-default">Right</button>
</div><br/><br/>
<div class="btn-group" role="group" aria-label="...">
	<button type="button" class="btn btn-default">Left</button>
	<button type="button" class="btn btn-default">Middle</button>
	<button type="button" class="btn btn-default">Right</button>
</div><br/><br/>
<div class="btn-group btn-group-sm" role="group" aria-label="...">
	<button type="button" class="btn btn-default">Left</button>
	<button type="button" class="btn btn-default">Middle</button>
	<button type="button" class="btn btn-default">Right</button>
</div><br/><br/>
<div class="btn-group btn-group-xs" role="group" aria-label="...">
	<button type="button" class="btn btn-default">Left</button>
	<button type="button" class="btn btn-default">Middle</button>
	<button type="button" class="btn btn-default">Right</button>
</div><br/><br/>

效果：
在这里插入图片描述
注： 本文代码中的br标签只为让格式简介明了，可以很好的看到效果区别，无其他含义！！！！

-垂直排列

让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式。
语法：

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

代码：

<!-- 垂直排列  -->
<div class="btn-group-vertical" role="group" aria-label="...">
<div class="btn-group btn-group-lg" role="group" aria-label="...">
	<button type="button" class="btn btn-default">Left</button>
	<button type="button" class="btn btn-default">Middle</button>
	<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group" role="group" aria-label="...">
	<button type="button" class="btn btn-default">Left</button>
	<button type="button" class="btn btn-default">Middle</button>
	<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">
	<button type="button" class="btn btn-default">Left</button>
	<button type="button" class="btn btn-default">Middle</button>
	<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">
	<button type="button" class="btn btn-default">Left</button>
	<button type="button" class="btn btn-default">Middle</button>
	<button type="button" class="btn btn-default">Right</button>
</div>
</div>

效果：
在这里插入图片描述
3.按钮式下拉菜单
代码：

<!-- 按钮式下拉菜单 -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Danger <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Primary <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Warning <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Success <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    info <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

效果：
在这里插入图片描述
这里我们只需要将button标签中的class设置成btn btn-样式dropdown-toggle即可达到上图效果；

-分裂式按钮下拉菜单
代码：

<!-- 分裂式按钮下拉菜单 -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

效果：
在这里插入图片描述
4.分页
代码：

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

效果：
在这里插入图片描述

总结，其实bootstrap这个框架主要是用class来控制样式，看似很简单，其实其中包含着大量的类需要去熟练的运用，很多地方都有相似之处，比如大小之类、位置之类，想要学好前端只有一个秘诀，那就是多练习，拼命的练习，总会有开花结果的那一天。

您可以通过点击 文章下方的输入框 来对文章内容作出评价, 也可以通过左上方的 关注按钮 来关注我的博客的最新动态。

如果文章内容对您有帮助, 不要忘记点击右上角的 喜欢按钮 来支持一下哦 ！

如果您对文章内容有任何疑问, 可以通过评论方式联系我;

如果需要转载，请注明出处，谢谢！！

子冰吖
关注
专栏目录
bootstrap 相关web组件库
02-05
Bootstrap 是一个广泛使用的开源前端框架，它为开发者提供了丰富的组件和样式，以便快速构建响应式、移动优先的网站。这个框架由Twitter开发并维护，它极大地简化了网页设计和开发的过程，尤其对于初学者非常友好。 ...
【Bootstrap】可复用的组件
早睡早起长头发的博客
01-04 854
一、字体图标 二、下拉菜单 三、按钮组 四、输入框组
Bootstrap主页面搭建（十四）
dengfengling999的博客
12-04 1735
创建主页面：index.jsp：引入bootstrap依赖：首先写导航条，复制代码更改： 使用栅格布局： 菜单栏使用手风琴组件，复制代码：修改手风琴代码：手风琴嵌套列表组 用户管理页面跟主页面，导航栏，菜单栏都相同，不同的是页面中心内容部分，所以复制index主页面代码，修改页面中心内容部分的代码： 添加分页、消息提示警告框： 第二个面板： 点击修改：用户列表页list.html面详细代码： 页面联合搭建： 下面分被创建分模块：主页面引用：分别复制list1，l
Bootstrap下拉菜单分隔线
歪脖先生的博客
05-13 2001
下拉菜单分隔线 在下拉菜单中，可以使用 class="divider" 的 <li> 空元素，在菜单项之间添加一条水平分隔线，用于将多个动作分组。如： <ulclass="dropdown-menu"> <li><ahref="#">Action</a></li> <li><a...
Bootstrap页面整合（十二）
dengfengling999的博客
12-03 1380
首先引入bootstrap： 复制导航条代码：修改导航条： 删除 改完的导航条： 使用列表组或者手风琴来实现左侧菜单：复制手风琴代码首先使用栅格布局2分写菜单，10写主要内容 把手风琴的代码复制到2分的div内：就出现手风琴效果 手风琴里嵌套列表组：修改代码： 带上 in默认展开的：去掉in 在10分的中心内容做一个标签页： 修改代码： 在中心内容添加分页： 给添加按钮添加弹出的模态框： js： 点击添加用户按钮： 给删除按钮添加模态框：首先复制一份模态框：
bootstrap简单介绍
最新发布
colachens的专栏
06-09 1095
Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集
学习Bootstrap组件之下拉菜单
09-03
深入学习Bootstrap，你可以查看相关的教程和实战课程，如Bootstrap学习教程、Bootstrap实战教程和Bootstrap插件使用教程，这些资源将帮助你更全面地掌握Bootstrap的组件和功能，从而更好地利用这一强大的框架进行...
分享bootstrap学习笔记心得(组件及其属性)
10-20
Bootstrap的学习笔记心得涉及其核心组件及其属性，下面是对这些内容的详细说明。 ### Bootstrap组件概述 Bootstrap框架基于HTML、CSS和JavaScript，使得开发者能够利用一组预先设计好的组件来快速构建响应式网站。...
Bootstrap框架常用组件
橘猫吃不胖的博客
01-16 3210
Bootstrap框架常用组件1 组件基础1.1 什么是组件1.2 组件的优势2 Bootstrap常用组件2.1 按钮2.2 导航2.3 面包屑导航2.4 分页2.5 列表2.6 表单2.7 按钮组2.8 输入框组3 Bootstrap实现菜单功能3.1 折叠菜单3.2 下拉菜单4 Bootstrap实现轮播图功能4.1 什么是轮播图4.2 轮播图的功能分析4.3 轮播图活动信息4.4 轮播图左侧箭头4.5 轮播图右箭头4.6 轮播图指示器4.7 全部代码 1 组件基础 1.1 什么是组件 组件是一个抽象
bootstrap
weixin_43706224的博客
05-24 1350
感悟：bootstrap就是一个预定义的模板，你用它的模板最主要的是要知道class是什么，class的作用域，作用范围是什么，各种bootstrap的实现是通过各种类名的添加来实现的，最重要的模块是栅格属性（当然，你可以动态改变栅格系统的列数） 如果要超小屏幕，小屏幕和中等屏幕同时拥有排列效果，那么需要把类前缀都加上（3个） 重要的类名 (相当于css.reset) 想知道元素为什么会设...
boostrap组件笔记
penn
08-06 405
boostrap是一款优化的前端框架，出自Twitter 对手持客户端支持非常好 学好了这个，对前端开发非常有帮助，它就像jQuery相对js，能极大的提高你的开发效率。 其实使用boostrap 简而言之，就是要知道有哪些组件，以及这些组件的class   下面就整理下boostrap的组件 字体图标 需要导入fonts文件，然后创建一个span，使用glyphicon &l...
了解Bootstrap
逸轩
03-17 707
1.了解Bootstrap: 简洁，直观，强悍的前端开发框架，让web开发更迅速，简单。 2.优点： 快速，简单，灵活的栅格系统，小而强大，响应式布局，跨平台等。 3.下载 登陆BootStrap的官方网站下载：  http://getbootstrap.com/  。 下面使用Bootstrap官方提供的模板来设计一个响应式布局。 （1）从下
bootstrap中<li role="presentation">表示真实含义是什么？
热门推荐
哈里·雪利博客
12-10 1万+
最近在学习bootstrap3.3.5，遇到一个问题搞不清楚到底什么含义？ 网上到处查国内资料很少，没有表达最贴切含义，在GitHub 查到了相关资料结合“图灵计算机词汇” 在图灵计算机词汇里也可以查询其含义： presentation   n. 【Web】表现层；[计] 简报，列表单；【通用软件】演示（来源：图灵计算机词汇表）； n.  赠与，赠送，描述，简述，介绍，陈
bootstrap的经典实用
lxiang222的博客
03-17 325
bootstrap能够简化我们的代码，它的产生对我们写代码提供了很大的便利，今天我要写的就是bootstrap简单好用的实例。 button：bootstrap中对于button定义了4中大小，分别是lg，md，sm，xs依次变小，使用方式 首选项（大按钮）按钮的颜色分别是btn-default（默认），primary（首选项），success（成功），info（一般信息），warning（警
BootStrap常用组件及其使用效果
qq_38529993的博客
06-19 6013
2018.6.19  JAVA大实习要做校园导游咨询系统，之前对于前端知之甚少，学习了bootstrap框架，现用于巩固与交流学习相关链接：Bootstrap中文网 BootCDN官网BootStrap主要组件及其类栅格系统col-lg-3(占3/12)col-sm-3(占3/12)col-xs-3(占3/12)表单form-groupform-control                   ...
BootStrap 篇（二）BootStrap 布局组件
张先森的博客
02-26 1万+
更多 BootStrap 详情请移步菜鸟教程 1.Bootstrap 字体图标(Glyphicons) 字体图标 2.Bootstrap 下拉菜单 如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单： 实例 实例 &lt;div class="dropdown"&gt; &lt;button typ...
Bootstrap CSS组件详解：导航组件
"Bootstrap学习笔记之css组件(3)，主要介绍Bootstrap中的CSS组件，包括导航组件。" Bootstrap是一款广泛使用的前端框架，它简化了网页设计和开发过程，特别是其丰富的CSS组件。在本学习笔记中，我们将关注导航组件...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值