Tất cả bài viết  |  Bootstrap

  • zoom in
  • zoom out
  • text align left
  • text align center
  • text align right
  • Chỉnh màu chữ
  • Làm đậm

Hướng dẫn cách tạo Responsive Fullwidth Tab bằng Bootstrap

Trong bài học thiết kế web này các Bạn sẽ được Hướng dẫn cách tạo Responsive Fullwidth Tab bằng Bootstrap

Bước 1: Tạo cấu trúc HTML
 
 

Đăng ký thành viên VIP365

Học thiết kế web giá rẻ

Đăng ký thành viên VIP365

HocwebGiare.com chuyên đào tạo các khóa học Thiết kế web, Lập trình Web. Đặc biệt HocwebGiare.com có nhiều năm kinh nghiệm chuyên sâu trong giảng dạy Thiết kế web và Lập trình Web với các thế mạnh đào tạo nổi trội như: Khóa học Chuyên viên website lành nghề Online, Khóa học Thiết kế giao diện website Online, Khóa học Lập trình HTML5, CSS3, RWD, Javascript, Bootstrap Online, Khóa học Lập trình PHP Cơ Bản Online vv....

Với mong muốn tạo điều kiện thuận lợi nhất cho các bạn sinh viên, học viên có thể theo học các khóa học thiết kế web & lập trình web, HocwebGiare.com tổ chức chương trình: ĐĂNG KÝ THÀNH VIÊN VIP ĐỂ CÓ THỂ HỌC ĐƯỢC NHIỀU HƠN VỚI HOCWEBGIARE

Xem chi tiết
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.

Hướng dẫn đăng ký

Khi đăng ký thành viên VIP / 1 năm học là 500.000 đ/năm - học viên sẽ được HỌC TOÀN BỘ TẤT CẢ CÁC KHÓA HỌC THIẾT KẾ WEB & LẬP TRÌNH WEB TẠI WEBSITE HOCWEBGIARE.COM trong vòng 1 năm (365 ngày).

HỌC VIÊN ĐƯỢC LỢI GÌ VỚI TÀI KHOẢN VIP365:

1. Hỗ trợ kỹ thuật thiết kế web lâu dài sau khóa học.
2. Hỗ trợ Download các công cụ thiết kế web có giá trị trong suốt khóa học.
3. Được học nhiều hơn với tất cả các khóa học thiết kế web & lập trình web tại hocwebgiare.com với giá rẻ nhất Việt Nam.
4. Học viên được học với giáo viên có nhiều kinh nghiệm thiết kế web thực tế (Xem một vài dự án đã thiết kế)
5. Học viên được hướng dẫn nhiều đồ án thực tế từng bước trong suốt năm học.
- Nhanh tay đăng ký ghi danh TẠI ĐÂY (Lưu ý nhập mã voucher VIP365 khi đăng ký)

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Bước 2: Định dạng CSS
.nav-tabs {	
border-bottom: 2px solid #DDD;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {	border-width: 0;}
.nav-tabs > li > a {	border: none;	color: #ffffff;	background: #5a4080;}
.nav-tabs > li.active > a, .nav-tabs > li > a:hover {	border: none;	color: #5a4080 !important;	background: #fff;} 
.nav-tabs > li > a::after {
content: "";
background: #5a4080;
height: 2px;
position: absolute;
width: 100%;
left: 0px;
bottom: -1px;
transition: all 250ms ease 0s;transform: scale(0);
} 

.nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after {transform: scale(1);}
.tab-nav > li > a::after {
background: ##5a4080 none repeat scroll 0% 0%;
color: #fff;
}

.tab-pane {	padding: 15px 0;}
.tab-content {	padding:20px}
.nav-tabs > li {	width:20%;	text-align:center;}
.card {	
background: #FFF none repeat scroll 0% 0%;	
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);	
margin-bottom: 30px;
}

body {	
background: #EDECEC;	
padding:10px
} 

@media all and (max-width:724px) {.
nav-tabs > li > a > span {display:none;
}
.nav-tabs > li > a {padding: 5px 5px;}
}
Bước 3: Gọi thư viện Bootstrap và Font awesome
 
 
  
Bước 4: Gọi thư viện JQUERY
 
Xem  demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất
Bạn có thể quan tâm

Tổng hợp các bài học hay về kỹ thuật thiết kế giao diện web với Fireworks Học lập trình web

Tổng hợp các bài học hay về lập trình hướng đối tượng PHP cơ bản Học lập trình web

Tổng hợp các bài học hay về lập trình bootstrap Học lập trình web

Hướng dẫn cách tạo Bootstrap ScrollSpy (Phần 2) Học lập trình web

Hướng dẫn cách tạo Bootstrap ScrollSpy (Phần 1) Học lập trình web

Hướng dẫn cách tạo Bootstrap Javascript Modal (Phần 2) Học lập trình web

Hướng dẫn cách tạo Bootstrap Javascript Modal (Phần 1) Học lập trình web

Hướng dẫn cách tạo Tooltip trong Bootstrap Học lập trình web

Hướng dẫn tạo Arcordion Panel trong Bootstrap (Phần 2) Học lập trình web

Hướng dẫn tạo Arcordion Panel trong Bootstrap (Phần 1) Học lập trình web