Sự khác biệt giữa bootstrap.css và bootstrap-theme.css

Chí Vỹ

Bootstrap là một framework-front-end HTML, CSS và JS được dùng cho phát triển các dự án ưu tiên mobile và đáp ứng trên web. Nó là framework đưa ra các thuật ngữ xác định trước, cho bạn khả năng dùng code thay vì tạo code từ đầu. Nó là một bộ sưu tập code HTML, CSS và JS được thiết kế để giúp người dùng xây dựng các phần tử trong giao diện.

Lập trình với Bootstrap

Sử dụng Bootstrap rất dễ. Bạn có thể làm theo hướng dẫn cài đặt Bootstrap trên Quantrimang.com. Bootstrap CDN là một mạng truyền tải nội dung công khai và cho phép người dùng tải CSS hoặc JS và ảnh từ xa trên server của nó. Bootstrap CDN chứa các tính năng sau:

Dễ dùng khi bạn có kiến thức cơ bản về HTML.
Tích hợp đơn giản, dễ dàng với từng nền tảng và framework, trên các trang hiện tại và cả mới. Hơn nữa, bạn cũng có thể dùng các phần tử nhất định của Bootstrap cùng với CSS hiện tại.
Hệ thống lưới tuyệt vời: Bootstrap được xây dựng trên 12 cột, bố cục và phần tử đáp ứng. Dù bạn cần một hệ thống lưới cố định hay đáp ứng, Bootstrap đều có thể trợ giúp.

Ví dụ:

Mẫu code chia trang web thành 3 cột. Tại đây, bootstrap được dùng trực tiếp mà không cần tạo phương pháp mới.

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
</head>

<body>
<div class="container">
<div class="row">
<div class="col-md">
n One of three columns
</div>

<!-- Dividing the website into
three columns -->
<div class="col-md">
One of three columns
</div>

<div class="col-md">
One of three columns
</div>
</div>
</div>
</body>

</html>

Bootstrap-Theme là các gói HTML, CSS và JS tạo kiểu cùng các phần tử trong giao diện và bố cục trang để dùng trong một dự án web. Các mẫu do lập trình viên viết được dùng để điều chỉnh tập lệnh và dễ dàng cho cá nhân học hỏi trong cách xây dựng trang web mới.

Bootstrap-theme bao gồm các nút bấm, menu thả xuống, thanh điều hướng, thanh tiến trình, bảng điều khiển. Các class thuật ngữ cho phép chúng ta truy cập những phần tử nhất định của CSS và JS qua bộ chọn class. Các class trong nút bấm được xác định trước, giúp bạn tiết kiệm đáng kể thời gian tùy chỉnh. Theme được dùng để thiết lập chiều cao của lưới và màu nền cho trang web với định dạng kiểu khác nhau cho text. Với nội dung và chiều cao của text mà bạn có thể đặt padding cho Grid.

Ví dụ:

<!DOCTYPE html>
<html lang="en">

<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<style>
/* Remove the navbar's default margin-bottom
and rounded borders */

.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Add a gray background color and some
padding to the footer */

footer {
background-color: #f2f2f2;
padding: 25px;
}

.carousel-inner img {
width: 100%;
/* Set width to 100% */
margin: auto;
min-height: 200px;
}
/* Hide the carousel text when the screen
is less than 600 pixels wide */

@media (max-width: 600px) {
.carousel-caption {
display: none;
}
}
</style>
</head>

<body>

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button"
class="navbar-toggle"
data-toggle="collapse"
data-target="#myNavbar">
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<a class="navbar-brand"
href="#">Logo</a>
</div>
<div class="collapse navbar-collapse"
id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">
<span class="glyphicon glyphicon-log-in">
</span> Login</a></li>
</ul>
</div>
</div>
</nav>

<div id="myCarousel"
class="carousel slide"
data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel"
data-slide-to="0"
class="active"></li>

<li data-target="#myCarousel"
data-slide-to="1"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img alt="Image">
<div class="carousel-caption">
<h3>SomeText</h3>
<p>content.</p>
</div>
</div>

<div class="item">
<img alt="Image">
<div class="carousel-caption">
<h3>Mo</h3>
<p>Lorem ipsum...</p>
</div>
</div>
</div>

<!-- Left and right controls -->
<a class="left carousel-control"
href="#myCarousel"
role="button"
data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"
aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control"
href="#myCarousel"
role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"
aria-hidden="true">
</span>
<span class="sr-only">Next</span>
</a>
</div>

<div class="container text-center">
<h3>What We Do</h3>
<br>
<div class="row">
<div class="col-sm-4">
<img class="img-responsive"
style="width:100%"
alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-4">
<img class="img-responsive"
style="width:100%"
alt="Image">
<p>Project 2</p>
</div>
<div class="col-sm-4">
<div class="well">
<p>Some text..</p>
</div>
<div class="well">
<p>Some text..</p>
</div>
</div>
</div>
</div>
<br>

<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>

</body>

</html>

Sự khác biệt: Framework Bootstrap.css được dùng để thiết kế một trang web cơ bản cùng với một số nội dung và thiết kế được xác định trước. Kiểu của trang web được hoàn thiện bằng cách nhập link CSS vào trong web chính thức. Vì bootstrap-theme.css được dùng cho các menu thả xuống, thanh điều hướng, thanh tiến trình, nút bấm với các kiểu khác nhau. Bạn có thể thêm chúng bằng cách gọi các thuộc tính class trong code này. Định dạng text thoải mái với các kiểu khác nhau.

Trên đây là những điều bạn cần biết về bootstrap.css và bootstrap-theme.css. Hi vọng bài viết hữu ích với các bạn.

Thứ Hai, 26/12/2022 10:14

5 ★ 1 👨 233

#Bootstrap