Bootstrap框架（组件）

目录

      • 前言
      • 一，组件
        • 1.1，字体图标
        • 1.2，下拉菜单组件
          • 1.2.1，基本下拉菜单
          • 1.2.2，按钮式下拉菜单
        • 1.3，导航组件
          • 1.3.1，选项卡导航
          • 1.3.2，胶囊式导航
          • 1.3.3，自适应导航
          • 1.3.4，下拉菜单导航
          • 1.3.5，综合导航栏
          • 1.3.6，顶部导航栏
          • 1.3.7，底部导航栏
        • 1.4，下拉框
        • 1.5，搜索框
      • 二，分页
        • 2.1，默认分页
        • 2.2，翻页
        • 2.3，对齐翻页
      • 最后

前言

根据上一章博客我们讲解了Bootstrap的12栅格系统 排版 图片
这一章我们来讲一下一些组件

一，组件

1.1，字体图标

无处不在的字体图标 如图：
在这里插入图片描述
在这里插入图片描述
它们在APP页面底部、网站导航条、登录页面或注册页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body><div class="container"><div><!-- 设置图标 --><span class="glyphicon glyphicon-search" aria-hidden="true"></span></div></div>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

Bootstrap框架提供了250多个来自Glyphicon Halflings的字体图标，其作用在内联元素上
在这里插入图片描述

1.2，下拉菜单组件

  • 用于显示链接列表或有上下文的菜单
    • 基本下拉菜单
    • 按钮式下拉菜单
1.2.1，基本下拉菜单
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body><!-- Single button --><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>     <!-- role="separator" class="divider" 下滑线 --><li><a href="#">Separated link</a></li></ul></div>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

在这里插入图片描述

1.2.2，按钮式下拉菜单
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body><!-- Split button --><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></body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

按钮式下拉菜单的好处是可以实现按钮和下拉菜单分离
在这里插入图片描述

1.3，导航组件

  • 导航可以便于用户查找网站所提供的各种功能服务
    • 选项卡导航
    • 胶囊式导航
    • 自适应导航
    • 下拉菜单导航
1.3.1，选项卡导航
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body><div class="container"><ul class="nav nav-tabs"><li class="active"><a href="#">个人中心</a></li><li><a href="#">商品详情</a></li><li><a href="#">我的订单</a></li><li><a href="#">联系客服</a></li></ul></div></body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

在这里插入图片描述

1.3.2，胶囊式导航
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body><div class="container"><ul class="nav nav-pills"><li class="active"><a href="#">个人中心</a></li><li><a href="#">商品详情</a></li><li><a href="#">我的订单</a></li><li><a href="#">联系客服</a></li></ul></div></body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

在这里插入图片描述

1.3.3，自适应导航
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body><ul class="nav nav-tabs nav-justified"><li class="active"><a href="#">首页</a></li><li><a href="#">购物车</a></li><li><a href="#">我的订单</a></li><li><a href="#">联系客服</a></li></ul><br><br><ul class="nav nav-pills nav-justified"><li class="active"><a href="#">首页</a></li><li><a href="#">购物车</a></li><li><a href="#">我的订单</a></li><li><a href="#">联系客服</a></li></ul></body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

在大于768px的屏幕上，通过.nav-justified类可以让选项卡或胶囊式导航呈现出同等宽度，在小屏幕上，导航呈现堆叠样式
在这里插入图片描述

1.3.4，下拉菜单导航
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body><ul class="nav nav-tabs">...<li role="presentation" class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">购物车</a></li><li><a href="#">我的订单</a></li><li><a href="#">联系客服</a></li></ul></li>...</ul></body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

在这里插入图片描述

1.3.5，综合导航栏
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body><div><!-- 综合导航栏 --><nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Brand</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><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><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><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></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav></div></div></body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

在这里插入图片描述

1.3.6，顶部导航栏
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body><div><!-- 固定在顶部 --><nav class="navbar navbar-default navbar-fixed-top"><div class="container"><ul  class="nav navbar-nav"><li class="active"><a href="#">Brand</a></li><li><a href="#">Home</a></p></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li></ul></div></nav></div></body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

在这里插入图片描述

1.3.7，底部导航栏
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body><div><!-- 固定在底部 --><nav class="navbar navbar-default navbar-fixed-bottom"><div class="container"><ul  class="nav navbar-nav"><li class="active"><a href="#">Brand</a></li><li><a href="#">Home</a></p></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li></ul></div></nav></div></body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

在这里插入图片描述

1.4，下拉框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body><!-- 下拉框 --><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></body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

在这里插入图片描述

1.5，搜索框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body><br><br><div><!-- 搜索框 --><div class="input-group"><input type="text" class="form-control" placeholder="请输入要搜索的内容"><span class="input-group-addon">百度一下</span></div></div><hr><div><div class="input-group"><input type="text" class="form-control" placeholder="请输入要搜索的内容"><span class="input-group-btn"><button class="btn btn-primary" type="button">百度一下</button></span></div></div></body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

在这里插入图片描述

二，分页

2.1，默认分页

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body><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>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

在这里插入图片描述

2.2，翻页

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body><nav aria-label="..."><ul class="pager"><li><a href="#">上一页</a></li><li><a href="#">下一页</a></li></ul></nav>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

翻页只能实现上一页和下一页的简单翻页，其常用于博客和杂志等简单站点
在这里插入图片描述

2.3，对齐翻页

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body><nav aria-label="..."><ul class="pager"><li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 上一页</a></li><li class="next"><a href="#">下一页 <span aria-hidden="true">&rarr;</span></a></li></ul></nav>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

在这里插入图片描述

最后

最后送大家一句司汤达的一句话：一个人只要强烈地坚持不懈地追求，他就能达到目的。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/10331.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

React 组件使用

React 组件使用

React 组件是一个 js 函数&#xff0c;函数可以添加 jsx 标记 当前页使用组件&#xff0c;基本使用 注意&#xff1a;组件的名称&#xff0c;第一个字母一定要大写&#xff0c;否则会报错 import { createRoot } from "react-dom/client"; import "./index.c…
阅读更多...
（三）springboot实战——web新特性之函数式实现

（三）springboot实战——web新特性之函数式实现

前言 本节内容我们主要介绍一下web访问的另一种形式&#xff0c;通过函数式web实现一个restful风格的http请求案例。函数式web是spring5.2之后的一个新特性&#xff0c;可以通过函数去定义web请求的处理流程&#xff0c;使得代码更为简洁&#xff0c;耦合性也降低了。 正文 …
阅读更多...
[Linux] 初识应用层协议: 序列化与反序列化、编码与解码、jsoncpp简单使用...

[Linux] 初识应用层协议: 序列化与反序列化、编码与解码、jsoncpp简单使用...

写在应用层之前 有关Linux网络, 之前的文章已经简单演示介绍了UDP、TCP套接字编程 相关文章: [Linux] 网络编程 - 初见UDP套接字编程: 网络编程部分相关概念、TCP、UDP协议基本特点、网络字节序、socket接口使用、简单的UDP网络及聊天室实现… [Linux] 网络编程 - 初见TCP套接…
阅读更多...
国产化 | 走近人大金仓-KingbaseES数据库

国产化 | 走近人大金仓-KingbaseES数据库

引入 事务隔离级别 || KingbaseES数据库 开篇 1、KingbaseES数据库 百度百科&#xff1a;金仓数据库的最新版本为KingbaseES V8&#xff0c; KingbaseES V8在系统的可靠性、可用性、性能和兼容性等方面进行了重大改进&#xff0c;支持多种操作系统和硬件平台支持Unix、Linux…
阅读更多...
Ubuntu--科研工具系列

Ubuntu--科研工具系列

翻译系列 pot-desktop github链接: https://github.com/pot-app/pot-desktop 下载deb Releases pot-app/pot-desktop GitHub 安装过程 在下载好的deb目录下打开终端(自动安装依赖) sudo apt install "XXX.deb" &#xff08;后面可以直接托文件到终端&#…
阅读更多...
d3dx9_42.dll丢失怎么解决?这三个方法亲测可修复

d3dx9_42.dll丢失怎么解决?这三个方法亲测可修复

最近我在使用计算机时遇到了一个问题&#xff0c;就是d3dx9_42.dll文件丢失的错误提示。初时我对这个错误一无所知&#xff0c;不知道该如何解决。但是经过一番搜索和学习&#xff0c;我终于找到了修复这个问题的方法。d3dx9_42.dll是一个与DirectX相关的动态链接库文件&#x…
阅读更多...
网络：TCP/IP协议

网络：TCP/IP协议

1. OSI七层参考模型 应用层 表示层 会话层 传输层 网络层 数据链路层 物理层 2. TCP/IP模型 应用层 传输层 网络层 数据链路层 物理层 3. 各链路层对应的名称 应用层对应的是协议数据单元 传输层对应的是数据段 网络层对应的是数据包 链路层对应的是数据帧 物理层对应的是比特…
阅读更多...
Elasticsearch API（二）

Elasticsearch API（二）

文章目录 前言一、Elasticsearch指标ES支持的搜索类型ES的能力ES的写入实时性ES不支持事务 二、Elasticsearch名词节点&#xff08;Node&#xff09;角色&#xff08;Roles&#xff09;索引&#xff08;index&#xff09;文档&#xff08;document&#xff09; 三、Elasticsear…
阅读更多...
fastadmin 项目gitee管理

fastadmin 项目gitee管理

gitee创建一个仓库使用sourcetree等工具拉取代码使用phpstorm远程同步代码到本地设置忽略代码文件 注意&#xff1a;如果是直接把远程代码同步到本地&#xff0c;默认是你在 .gitignore中设置是无效的&#xff0c;代码一样会提交&#xff0c;需要先使用上面的截图去掉缓存&…
阅读更多...
VM虚拟机网络配置桥接模式方法步骤

VM虚拟机网络配置桥接模式方法步骤

VM虚拟机配置桥接模式&#xff0c;可以让虚拟机和物理主机一样存在于局域网中&#xff0c;可以和主机相通&#xff0c;和互联网相通&#xff0c;和局域网中其它主机相通。 vmware为我们提供了三种网络工作模式&#xff0c;它们分别是&#xff1a;Bridged&#xff08;桥接模式&…
阅读更多...
Linux相关

Linux相关

0.需要安装的软件 0.1.VMware&#xff08;虚拟机&#xff09; 0.2.XShell&#xff08;强大的安全终端模拟软件&#xff09; 0.3.XFTP&#xff08;是一个功能强大的SFTP、FTP 文件传输软件&#xff09; 0.4.CentOS XShell和XFTP文件压缩包所在路径 D:\CentOS7 xftp安装默认…
阅读更多...
Windows用户如何安装新版本cpolar内网穿透

Windows用户如何安装新版本cpolar内网穿透

在科学技术高度发达的今天&#xff0c;我们身边充斥着各种电子产品&#xff0c;这些电子产品不仅为我们的工作带来极大的便利&#xff0c;也让生活变得丰富多彩。我们可以使用便携的电子设备&#xff0c;记录下生活中精彩和有趣的瞬间&#xff0c;并通过互联网方便的与大家分享…
阅读更多...
【雕爷学编程】Arduino动手做（172）---WeMos D1开发板模块4

【雕爷学编程】Arduino动手做（172）---WeMos D1开发板模块4

37款传感器与执行器的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&am…
阅读更多...
Linux-DHCP安装配置流程

Linux-DHCP安装配置流程

DHCP 介绍 DHCP&#xff08;Dynamic Host Configuration Protocol&#xff09;是一种网络协议&#xff0c;用于在局域网(LAN)中自动分配IP地址和其他网络配置信息给计算机设备。DHCP旨在简化网络管理&#xff0c;允许设备自动获取IP地址&#xff0c;无需手动配置&#xff0c;…
阅读更多...
19.主题时钟

19.主题时钟

主题时钟 html部分 <div class"btn">黑色</div><div class"clock-container"><div class"time">21</div><div class"date">21</div><div class"clock"><div class&qu…
阅读更多...
Linux系统MySQL数据库的备份及应用

Linux系统MySQL数据库的备份及应用

本节主要学习了MySQL数据库的备份&#xff1a;概念&#xff0c;数据备份的重要性&#xff0c;造成数据丢失的原因&#xff0c;备份的类型&#xff0c;常见的备份方法&#xff0c;实例与应用等。 目录 一、概述 二、数据备份的重要性 三、造成数据丢失的原因 四、备份类型 …
阅读更多...
小程序如何上传商品

小程序如何上传商品

​小程序作为一种便捷的电商平台&#xff0c;上传商品是非常重要的一步。本文将为你提供一个完整的小程序上传商品教程&#xff0c;帮助你轻松上架自己的商品。 一、进入商品管理页面 在个人中心点击管理入口&#xff0c;然后找到“商品管理”菜单并点击。 2. 点击“添加商品…
阅读更多...
MySQL数据库期末项目 图书馆管理系统

MySQL数据库期末项目 图书馆管理系统

1 项目需求分析 1.1 项目名称 图书馆管理系统 1.2 项目功能 在以前大多部分图书馆都是由人工直接管理&#xff0c;其中每天的业务和操作流程非常繁琐复杂&#xff0c;纸质版的登记信息耗费了大量的人力物力。因此图书馆管理系统应运而生&#xff0c;该系统采用智能化设计&#…
阅读更多...
分布式文件存储与数据缓存 FastDFS

分布式文件存储与数据缓存 FastDFS

一、FastDFS概述 1.1 什么是分布式文件系统 单机时代 初创时期由于时间紧迫&#xff0c;在各种资源有限的情况下&#xff0c;通常就直接在项目目录下建立静态文件夹&#xff0c;用于用户存放项目中的文件资源。如果按不同类型再细分&#xff0c;可以在项目目录下再建立不同的…
阅读更多...
C++初阶之一篇文章让你掌握string类（模拟实现）

C++初阶之一篇文章让你掌握string类（模拟实现）

string类模拟实现 1.为什么要模拟实现string2.string的模拟实现需要注意哪些问题3.经典的string类问题4.写时拷贝5.传统版写法的String类&#xff08;参考&#xff09;6.现代版写法的String类&#xff08;参考&#xff09;7.string类的模拟实现&#xff08;讲解&#xff09;7.1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023