Bootstrap 是一个非常有效的前端开发工具包。 由于其预定义的实用程序类，您可以创建连贯的用户界面，而无需定义自定义 CSS。 在本文中，我们将讨论在 React 应用程序中使用它的理想方法。
2024年08月09日
Bootstrap 是一个非常有效的前端开发工具包。 由于其预定义的实用程序类，您可以创建连贯的用户界面，而无需定义自定义 CSS。 在本文中，我们将讨论在 React 应用程序中使用它的理想方法。
2024年08月09日
将讲解字体图标(Glyphicons)，并通过一些实例了解它的使用。Bootstrap 捆绑了 200 多种字体格式的字形。首先让我们先来理解一下什么是字体图标。
什么是字体图标？
字体图标是在 Web 项目中使用的图标字体。虽然，Glyphicons Halflings 需要商业许可，但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。
2024年08月09日
Shards 采用了最新 Bootstrap 4 前端框架制作的，外观简约而时尚，风格与现代流行的扁平化相当合衬！此外不仅仅拥有 HTML/CSS/SASS 格式模板，还有 Sketch 设计源文件，可见分享者的贴心。
目前从官方介绍来看，UI组件还相当齐全，可用它来快速搭建漂亮、时尚的网页和UI设计作品，下面一起来看看介绍。
2024年08月09日
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单</title>
<link rel="stylesheet" type="text/css"
href="bootstrap/css/bootstrap.min.css"/>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<!--
下拉菜单
1.类名：.dropdown或.btn-group的div包裹整个下拉框
<div class="dropdown"></div>
2.默认向下dropdown，向上弹起加入.dropup即可
3.使用button作为父菜单，使用类名：.dropdown-toggle和
自定义data-toggle属性
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown"></button>
4.在button中使用font制作下拉箭头
<span class="caret"></span>
5.下拉菜单项使用一个ul列表，并且定义一个类名为"dropdown-menu"
6.分组分割线：<li>添加类名"divider"来实现添加下拉分隔线的功能
7.分组标题：<li>添加类名"dropdown-header"来实现分组功能
8.对齐方式：
1)、dropdown-menu-left 左对齐 默认样式
2)、dropdown-menu-right 右对齐
9.激活状态：.active和禁用状态.disabled
-->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
电影类型
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">-- 动作 --</li>
<li><a href="#">速度与激情9</a></li>
<li class="divider"></li>
<li class="dropdown-header">-- 喜剧 --</li>
<li><a href="#">这个杀手不太冷静</a></li>
<li class="divider"></li>
<li class="dropdown-header">-- 科幻 --</li>
<li><a href="#">月球陨落</a></li>
<li class="divider"></li>
<li class="dropdown-header">-- 战争 --</li>
<li><a href="#">长津湖之水门桥</a></li>
<li class="divider"></li>
<li class="dropdown-header">-- 恐怖 --</li>
<li><a href="#">生化危机</a></li>
</ul>
</div>
</body>
</html>2024年08月09日
React-Bootstrap是一个可重用的前端组件库, 你可以通过Facebook的React.js框架获得Twitter Bootstrap的外观，但代码更清晰,React-Bootstrap组件库试图遵循React.js原则，即应在单个位置定义单个功能。React-Bootstrap是使用React完全重新实现Bootstrap组件。它
2024年08月09日
之前有想法学习一下前端框架的，后来没有坚持下来。连最基础的栅格系统都忘记了。于是，花了一点时间，重新温习了一下。写了一个简单的网页。页面大致是下面这张图。做得比较一般，不过能够自适应各种设备大小了。
2024年08月09日
想要从零开始开发一个开源项目，这个项目的目的很简单：新人可以练手，一步一步搭建项目，把时下流行的技术整合进来，在用这些技术的特性来实现具体业务功能，而对于有经验的老鸟可以把自学的技术在项目中得以实践。
在这里插入图片描述
琢磨了挺长时间，前段时间工作比较忙、家中事情也比较多，导致最近才着手弄。
2024年08月09日
导航
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="../bootstrap-5.0.0-beta1-dist/css/bootstrap.css" rel="stylesheet">
<title>bootstrap - nav</title>
</head>
<body>
<ul class="nav">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown03" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown03">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<script src="../bootstrap-5.0.0-beta1-dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>