Bootstrap布局组件

最新推荐文章于 2023-11-14 15:17:35 发布

原创最新推荐文章于 2023-11-14 15:17:35 发布 · 388 阅读

CC 4.0 BY-SA版权

本文详细介绍了Bootstrap的各种布局组件，包括按钮插件、下拉菜单、按钮组、按钮下拉菜单、输入框组、导航元素、导航栏、面包屑导航、分页和标签等。特别提到了输入框组中按钮插件的使用，需要使用 .input-group-btn 类以确保样式正确。同时，还介绍了导航栏的响应式设计，通过 .navbar-collapse 和 .navbar-toggle 实现折叠效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（一）Bootstrap 字体图标

已经整理成为HTML文件存在G盘，名为Bootstrap字体图标。

（二）Bootstrap 下拉菜单

class .dropdown 下拉菜单

具体用法：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">  
  <script src="js/jquery/jquery-3.3.1.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="dropdown">
  <button type="button" class="btn dropdown-toggle" id="dropdownmenu" data-toggle="dropdown">主题<span class="caret"></span></button>

<ul class="dropdown-menu" role="menu"><li>java</li> <li>C#</li> <li>C++</li> <li>C</li> </ul></div></body></html>

class .pull-right 向右对齐下拉菜单
class .dropdown-header 向下拉菜单的标签区域添加标签
例子：<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">  
  <script src="js/jquery/jquery-3.3.1.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="dropdown">
  <button type="button" class="btn dropdown-toggle" id="dropdownmenu" data-toggle="dropdown">主题<span class="caret"></span></button>
  <ul class="dropdown-menu pull-right" role="menu">
    <li class="dropdown-header">下拉菜单标签1</li>
    <li><a herf="#">java</a></li>
    <li><a herf="#">C#</a></li>
    <li class="dropdown-header">下拉菜单标签2</li>
    <li><a herf="#">C++</a></li>
    <li><a herf="#">C</a></li>
  </ul>
</div>
</body>
</html>

（三）Bootstrap 按钮组

class .btn-group 按钮组

class .btn-toolbar 把几组按钮组结合成为一个更复杂的组件

class .btn-group-lg/sm/xs 按钮组的大小

class .btn-group-vertical 按钮组垂直摆放

可以在一个按钮组内嵌套另一个按钮组，即，在一个 .btn-group 内嵌套另一个 .btn-group 。当想让下拉菜单与一系列按钮组合使用时，就会用到这个。

例子：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 按钮组</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">  
  <script src="js/jquery/jquery-3.3.1.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="btn-toolbar">
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-default">按钮1</button>
    <button type="button" class="btn btn-default">按钮2</button>
    <button type="button" class="btn btn-default">按钮3</button>
  </div>
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-default">按钮1</button>
    <button type="button" class="btn btn-default">按钮2</button>
    <button type="button" class="btn btn-default">按钮3</button>
  </div>
  <div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-default">按钮1</button>
    <button type="button" class="btn btn-default">按钮2</button>
    <button type="button" class="btn btn-default">按钮3</button>
  </div>
  </div>

  <div class="btn-group-vertical">
  <button type="button" class="btn btn-default">按钮 1</button>
  <button type="button" class="btn btn-default">按钮 2</button>
  </div>
  
</body>
</html>

（四）Bootstrap 按钮下拉菜单

如需向按钮添加下拉菜单，只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可。

class .btn-lg/sm/xs 按钮下拉菜单的大小

例子：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 按钮下拉菜单</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">  
  <script src="js/jquery/jquery-3.3.1.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<p>基本的按钮下拉菜单</p>
    <div class="btn-group">
    	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认 <span class="caret"></span></button>
    	<ul class="dropdown-menu">
    		<li><a href="#">功能</a></li>
            <li><a href="#">另一个功能</a></li>
            <li><a href="#">其他</a></li>
        </ul>
    </div>
    <p>分割的按钮下拉菜单</p>
    <div class="btn-group">
    	<button type="button" class="btn btn-default">more</button>
    	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    		<span class="caret"></span>
    		<span class="sr-only">切换</span>
    	</button>
    	<ul class="dropdown-menu">
    		<li><a href="#">功能1</a></li>
            <li><a href="#">另一个功能1</a></li>
            <li><a href="#">其他1</a></li>
    	</ul>
    </div>
    <p>按钮下拉菜单的大小</p>
    <div class="btn-group">
    	<button type="button" class="btn btn-default btn-lg">more</button>
    	<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">
    		<span class="caret"></span>
    		<span class="sr-only">切换</span>
    	</button>
    	<ul class="dropdown-menu">
    		<li><a href="#">功能1</a></li>
            <li><a href="#">另一个功能1</a></li>
            <li><a href="#">其他1</a></li>
    	</ul>
    </div>
    <div class="btn-group">
    	<button type="button" class="btn btn-default btn-sm">more</button>
    	<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
    		<span class="caret"></span>
    		<span class="sr-only">切换</span>
    	</button>
    	<ul class="dropdown-menu">
    		<li><a href="#">功能1</a></li>
            <li><a href="#">另一个功能1</a></li>
            <li><a href="#">其他1</a></li>
    	</ul>
    </div>
</body>
</html>

class=“sr-only”：这是专门为残障人士浏览网页设计的。屏幕阅读器需要找到能辨识的文本说明然后“读”出来给用户听。

（五）Bootstrap 输入框组

为了保持跨浏览器的兼容性，请避免使用 <select> 元素，因为它们在 WebKit 浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的 class，输入框组是一个孤立的组件。

基本的输入框组

class .input-group

例子：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 输入框组</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">  
  <script src="js/jquery/jquery-3.3.1.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding: 100px 100px 10px;">
	<form role="form">
		<div class="input-group">
			<span class="input-group-addon">@</span>
			<input type="text" class="form-control" placeholder="请输入...">
			<span class="input-group-addon">000</span>
		</div>
		<div class="input-group input-group-lg">
			<span class="input-group-addon">@</span>
			<input type="text" class="form-control" placeholder="请输入...">
			<span class="input-group-addon">000</span>
		</div>
		<div class="input-group input-group-sm">
			<span class="input-group-addon">@</span>
			<input type="text" class="form-control" placeholder="请输入...">
			<span class="input-group-addon">000</span>
		</div>
	</form>
</div>
</body>
</html>

复选框和单选插件：可以把复选框和单选插件作为输入框组的前缀或者后缀元素

<body>
<div style="padding: 100px 100px 10px;">
	<form role="form">
		<div class="input-group">
			<span class="input-group-addon">
				<input type="checkbox">
			</span>
			<input type="text" class="form-control" placeholder="请输入...">
			<span class="input-group-addon">000</span>
		</div>
	</form>
</div>
</body>

按钮插件:也可以把按钮作为输入框组的前缀或者后缀元素，这个时候您就不是添加 .input-group-addon class，您需要使用 class .input-group-btn 来包裹按钮。这是必需的，因为默认的浏览器样式不会被重写。

带有下拉菜单的按钮：在class .input-group-btn 来包裹按钮和下拉菜单。

（六）Bootstrap 导航元素

1）class .nav .nav-tabs 创建一个标签式的导航菜单（放在 ul 标签中）

2）class .nav .nav-pills 创建一个胶囊式的导航菜单（放在 ul 标签中）

1）或 2）的同时使用class .nav-justified，让导航菜单与父元素对齐。

3）class .nav .nav-pills .nav-stacked 创建一个垂直的胶囊式的导航菜单（放在 ul 标签中）

4）class .disabled 禁用链接

（七）Bootstrap 导航栏

1）class .navbar .navbar-default 创建一个默认的导航栏

（放在 nav 标签中，并在nav标签中添加 role=“navigation”，增加可访问性）

向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。

为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

2）关于响应式的导航栏：折叠的 div 必须包含 class .collapse .navbar-collapse，导航栏则是带有class .navbar-tooggle以及data-toggle、data-target的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，data-toggle指以什么事件触发，第二个是 data-target，指示要切换到哪一个元素，内容为元素的 id 。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。

例子：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 导航lan</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">  
  <script src="js/jquery/jquery-3.3.1.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<p>默认的导航栏</p>
	<nav class="navbar navbar-default" role="navigation">
		<div class="navbar-header">
			<a herf="#" class="navbar-brand">导航栏呀</a>
		</div>
		<div>
			<ul class="nav navbar-nav">
				<li class="active"><a href="#">导航1</a></li>
				<li><a href="#">导航2</a></li>
				<li><a href="#">导航3</a></li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">导航4<span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">1</a></li>
						<li><a href="#">2</a></li>
						<li><a href="#">3</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</nav>
	<p>响应式的导航栏</p>
	<nav class="navbar navbar-default" role="navigation">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
				<span class="sr-only">切换导航</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a href="#" class="navbar-brand">导航栏呀</a>
		</div>
		<div class="collapse navbar-collapse" id="example-navbar-collapse">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#">1</a></li>
			    <li><a href="#">2</a></li>
			    <li><a href="#">3</a></li>
			    <li class="dropdown">
			    	<a href="#" class="dropdown-toggle" data-toggle="dropdown">4<span class="caret"></span></a>
			    	<ul class="dropdown-menu">
			    		<li><a href="#">11</a></li>
					    <li><a href="#">22</a></li>
					    <li><a href="#">33</a></li>
				    </ul>
			    </li>
		    </ul>
		</div>
	</nav>
</body>
</html>

3）导航栏中的表单&按钮&文本

class .navbar-form 表单

class .navbar-btn 按钮：可被使用在 <a> 和 <input> 元素上。不要在 .navbar-nav 内的 <a> 元素上使用 .navbar-btn，因为它不是标准的 button class。

class .navbar-text 文本：通常与<p>标签一起使用。

4）非导航链接

class .navbar-link：如果不想在常规的导航栏导航组件内使用标准的链接，那么使用该类来为默认的和倒转的导航栏选项添加适当的颜色。

5）组件对齐方法&固定到顶部/底部

class .navbar-left/right

class .navbat-fixed-top/bottom

6）静态的顶部&倒置的导航栏

class .navbar-static-top：创建能随着页面一起滚动的导航栏，该 class 不要求向 <body> 添加内边距（padding）。

class .navbar-inverse：创建一个带有黑色背景白色文本的倒置的导航栏。

（八）Bootstrap 面包屑导航

面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb class 的无序列表（ol）。

（九）Bootstrap 分页

（十）Bootstrap 标签

（十一）Bootstrap 徽章