Bootstarp（三）—导航栏、表单、表单控件、输入框组

最新推荐文章于 2022-05-04 17:04:46 发布

猫与故巷0214

最新推荐文章于 2022-05-04 17:04:46 发布

阅读量726

点赞数

文章标签：前端 bootstrap

本文链接：https://blog.csdn.net/qq_44827845/article/details/116307893

版权

本文详细介绍了Bootstrap的导航栏组件，包括普通导航、胶囊导航和动态选项卡的创建方法。同时，文章讲解了表单的用法，如堆叠表单和内联表单，并探讨了各种表单控件，如input、textarea、checkbox、radio及下拉框的使用。此外，还深入讨论了输入框组的各种应用场景，包括设置标签、按钮组和下拉菜单等。

摘要由CSDN通过智能技术生成

一、导航栏

1.普通导航

简单的水平导航栏，可以在<ul>元素上添加.nav类
导航对齐方式：.justify-content-center类设置导航居中显示，.justify-content-end类设置导航右对齐
垂直导航：.flex-column 类用于创建垂直导航
选项卡：使用.nav-tabs 类可以将导航转化为选项卡，然后对于选中的选项使用.active类来标记

<div class = "row">
	<ul class="nav flex-column nav-tabs justify-content-center">
		<li class="nav-item " style = "width:25%">
			<a class="nav-link" href="#">Link</a>
        </li>
		<li class="nav-item" style = "width:25%">
		    <a class="nav-link" href="#">Link</a>
		</li>
  		<li class="nav-item">
   		    <a class="nav-link" href="#">Link</a>
  		</li>
 		<li class="nav-item">
    	    <a class="nav-link disabled" href="#">Disabled</a>
  		</li>
	</ul>
</div>

在这里插入图片描述

2.胶囊导航

胶囊导航：.nav-pills类可以将导航项设置成胶囊形状，另外.nav-justified 类可以设置导航项齐行等宽显示

<div class = "row">
	<ul class="nav nav-pills nav-justified">
	     <li class="nav-item " style = "width:25%">
	       <a class="nav-link" href="#">Link</a>
	     </li>
	     <li class="nav-item" style = "width:25%">
	       <a class="nav-link" href="#">Link</a>
	     </li>
	     <li class="nav-item">
	       <a class="nav-link" href="#">Link</a>
	     </li>
	     <li class="nav-item">
	       <a class="nav-link disabled" href="#">Disabled</a>
	     </li>
	</ul>
</div>

在这里插入图片描述

3.动态选项卡

动态选项卡：如果你要设置选项卡是动态可切换的，可以在每个链接上添加 data-toggle="tab" 属性。然后在每个选项对应的内容的上添加.tab-pane类。如果你希望有淡入效果可以继续添加.fade类

<div class  ="row">
   <ul class="nav nav-pills">
     <li class="nav-item">
       <a class="nav-link active" href="#">Active</a>
     </li>
     
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
       <div class="dropdown-menu">
         <a class="dropdown-item" href="#">Link 1</a>
         <a class="dropdown-item" href="#">Link 2</a>
         <a class="dropdown-item" href="#">Link 3</a>
       </div>
     </li>
     
	 <li class="nav-item dropdown">
	   <a class="nav-link dropdown-toggle" data-toggle="tab" href="#">Dropdown</a>
	   <div class="dropdown-menu">
	     <a class="dropdown-item tab-pane" href="#">Link 1</a>
	     <a class="dropdown-item tab-pane" href="#">Link 2</a>
	     <a class="dropdown-item tab-pane" href="#">Link 3</a>
	   </div>
	 </li>
	 
     <li class="nav-item">
       <a class="nav-link" href="#">Link</a>
     </li>
     <li class="nav-item">
       <a class