Bootstrap 4, вкладки / tab (болванка)

23 июля 2019

Болванка табов, Bootstrap 4

<!-- Nav tabs -->
<ul class="nav nav-tabs">
	<li class="nav-item">
		<a class="nav-link active" href="#home" data-toggle="tab">Home</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" href="#menu1" data-toggle="tab">Menu 1</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" href="#menu2" data-toggle="tab">Menu 2</a>
	</li>
</ul>
<!-- Tab panes -->
<div class="tab-content border mb-3">
	<div id="home" class="container tab-pane active"><br>
		<h3>HOME</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</div>
	<div id="menu1" class="container tab-pane fade"><br>
		<h3>Menu 1</h3>
		<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	</div>
	<div id="menu2" class="container tab-pane fade"><br>
		<h3>Menu 2</h3>
		<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
	</div>
	</div>
<script>
	$(document).ready(function(){
		$(".nav-tabs a").click(function(){
			$(this).tab('show');
		});
		$('.nav-tabs a').on('shown.bs.tab', function(event){
			var x = $(event.target).text();         // active tab
			var y = $(event.relatedTarget).text();  // previous tab
			$(".act span").text(x);
			$(".prev span").text(y);
		});
	});
</script>

Вот так это выглядит


Дополнительные классы для добавления в <ul class="nav nav-tabs">

nav-pills - преобразует в кнопки

<ul class="nav nav-tabs nav-pills">

nav-fill - табы на всю ширину (не каждый элемент навигационной панели имеет одинаковую ширину)

<ul class="nav nav-tabs nav-pills nav-fill">

nav-justified - табы на всю ширину (каждый элемент навигационной панели будет одинаковой ширины)

<ul class="nav nav-tabs nav-pills nav-justified">

Используйте любой из .bg-color классов для изменения цвета фона навигационной области (,,,,,, .bg-primary .bg-success .bg-info .bg-warning .bg-danger .bg-secondary .bg-dark и .bg-light )

Совет: Добавьте белый цвет текста ко всем ссылкам в навигационной навигации с помощью .navbar-dark класса или используйте .navbar-light класс для добавления черного цвета текста.

Теги: bootstrap 4