Convert horizontal tab from Bootstrap 3 to Bootstr

2019-08-17 18:44发布

站内问答 / HTML/CSS
1455 1 5

I have a code from bootsnip to make horizontal Bootstrap tabs with style like material. I'm having trouble converting it to Bootstrap 4. I'm focusing on changing the style of li to .nav-item and a to .nav-link in css. but the result is different.

this the code using Bootstrap 3: horizontal tab

and this is my code use Bootstrap 4: 

.no-style{
	text-decoration:none!important;
}
.nav-tabs {
	background-color:#333;
	border-bottom: 2px solid #DDD; 
}
.nav-tabs > .nav-item > .nav-link.active, .nav-tabs > .nav-item > .nav-link.active:focus, .nav-tabs > .nav-item > .nav-link.active:hover {
	border-width: 0;
}
.nav-tabs > .nav-item > .nav-link {
	border: none; 
	color: rgba(255,255,255,.6);
}

.nav-tabs > .nav-item > .nav-link.active, .nav-tabs > .nav-item > .nav-link:hover {
	border: none; 
	color: rgba(255,255,255,1); 
	background: transparent;
}

.nav-tabs > .nav-item > .nav-link::after {
	content: ""; 
	background: #4285F4; 
	height: 2px; 
	position: absolute; 
	width: 100%; 
	left: 0px; 
	bottom: -1px; 
	transition: all 250ms ease 0s; 
	transform: scale(0); 
}
.nav-tabs > .nav-item > .nav-link.active::after, .nav-tabs > .nav-item:hover > .nav-link::after { 
	transform: scale(1); 
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
	<div class="row">
		<div class="col-md-6">
			<!-- Nav tabs -->
			<div class="card">
				<ul class="nav nav-tabs" role="tablist">
					<li role="presentation" class="nav-item"><a href="#home" class="nav-link no-style active" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
					<li role="presentation" class="nav-item"><a href="#profile" class="nav-link no-style" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
					<li role="presentation" class="nav-item"><a href="#messages" class="nav-link no-style" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
					<li role="presentation" class="nav-item"><a href="#settings" class="nav-link no-style" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
				</ul>

				<!-- Tab panes -->
				<div class="tab-content">
					<div role="tabpanel" class="tab-pane fade show active" id="home">
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
					<div role="tabpanel" class="tab-pane fade" id="profile">
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
					</div>
					<div role="tabpanel" class="tab-pane fade" id="messages">
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
					<div role="tabpanel" class="tab-pane fade" id="settings">
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passage..
					</div>
				</div>
			</div>
        </div>
	</div>
</div>

1条回答
在下西门庆
2楼-- · 2019-08-17 19:06

In order for the positioning on an ::after element to work, the parent element must be positioned. I fixed that.

Here's the complete, working code snippet for Bootstrap 4 (click the "run code snippet" button below and expand to full page for testing): 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    
<style>
    .nav-tabs { border-bottom: 2px solid #DDD; }
    .nav-tabs > li > a {
        border: none;
        color: #666;
    }
    .nav-tabs > li.nav-item > a,
    .nav-tabs > li.nav-item > a:hover {
        border: none;
        color: #4285F4 !important;
        background: transparent;
        position: relative;
    }
    .nav-tabs > li.nav-item > a::after {
        content: "";
        background: #4285F4;
        height: 2px;
        position: absolute;
        width: 100%;
        left: 0px;
        bottom: -1px;
        transition: all 250ms ease 0s;
        transform: scale(0);
    }
    .nav-tabs > li.nav-item > a.active::after,
    .nav-tabs > li.nav-item:hover > a::after {
        transform: scale(1);
    }

    .card {
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    }
</style>

<div class="container-fluid p-5 bg-light">
    <div class="row">
        <div class="col-md-6">
            <!-- Nav tabs -->
            <div class="card p-4 mb-4">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="nav-messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="nav-settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active p-2" id="home" role="tabpanel" aria-labelledby="nav-home-tab">HOME TAB -- HOME TAB -- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing.
                    </div>
                    <div class="tab-pane fade show p-2" id="profile" role="tabpanel" aria-labelledby="nav-profile-tab">PROFILE TAB -- PROFILE TAB -- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </div>
                    <div class="tab-pane fade show p-2" id="messages" role="tabpanel" aria-labelledby="nav-messages-tab">MESSAGES TAB -- MESSAGES TAB -- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </div>
                    <div class="tab-pane fade show p-2" id="settings" role="tabpanel" aria-labelledby="nav-settings-tab">SETTINGS TAB -- SETTINGS TAB -- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passage.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)