Nhúng Twitter Bootstrap

Chúng ta có hai cách khác nhau để có thể nhúng khung làm việc Twitter Boostrap vào trong trang:

Sử Dụng CDN

Với cách này bạn sẽ tham chiếu tới các thư viện CSS, JavaScript và phông chữ của Twitter Bootstrap sử dụng liên kết từ máy chủ CDN (Content Network Deliver) thay vì phải tải các tập tin này về máy tính cá nhân (hoặc máy chủ) của bạn.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Ở trên bạn cũng cần lưu ý đoạn mã dùng để nhúng thư viện jQuery phải được đặt đoạn mã dùng để nhúng thư viện JavaScript của Bootstrap.

Tải Twitter Bootstrap về máy

Với cách làm này bạn sẽ cần phải tải thư viện CSS, JavaScript và thư viện phông chữ của Twitter Bootstrap về máy tính (hoặc máy chủ) của bạn và sau đó nhúng các tập CSS và JavaScript vào trang.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="/js/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="/js/bootstrap.min.js"></script>

Các tập tin chứa phông chữ cần phải được đặt trong một thư mục có tên là fonts và thư mục fonts này phải được đặt ở địa chỉ giống với địa của thư mục chứa thư viện CSS.

├── css
│   └── bootstrap.min.css
├── fonts
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
└── js
    └── bootstrap.min.js
Twitter Bootstrap
Thêm Bình Luận: