Bootstrap 2.3.2: Hướng dẫn Bắt đầu

Biểu trưng Twitter Bootstrap

Bootstrap là một Khung CSS đã trở nên rất phổ biến trên toàn mạng. Phong cách của họ đáp ứng được nhìn thấy trên mạng xã hội tuti y Twitter. Việc sử dụng điều này giúp chúng tôi tiết kiệm rất nhiều thời gian khi phát triển ứng dụng web vì nó giúp chúng tôi tiết kiệm tất cả công việc và nỗ lực liên quan đến việc tạo ra một kiểu trang sạch phù hợp với mọi thiết bị. Tham khảo các phong cách được sử dụng trong khuôn khổ này, chúng ta sẽ nhận ra rằng chúng rất quen thuộc với chúng ta, vì ngày nay nhiều trang web đã triển khai nó.

Cấu trúc

Hình ảnh cấu trúc Bootstrap

Cấu trúc chất lỏng của Bootstrap

Để trang web của chúng tôi có thể truy cập từ điện thoại di động và máy tính bảng, chúng tôi sẽ phải sử dụng cấu trúc linh hoạt mà Bootstrap cung cấp cho chúng tôi. Việc sử dụng cấu trúc này rất đơn giản, mọi thứ đều dựa trên các yếu tố nhịp cầu điều đó sẽ giúp chúng tôi bố trí thiết kế web của chúng tôi. Sau đó, khi chúng tôi truy cập thiết kế này từ điện thoại thông minh o máy tính bảng, điều này sẽ tự động thích ứng với thiết bị nói trên, cải thiện đáng kể chất lượng điều hướng. Chúng tôi sẽ sử dụng nhịp cầu với các lớp trong các phân chia hợp lý trong cấu trúc linh hoạt, tức là:

<div class="row-fluid">
   <div class="span2">Contenido</div>
</div>

Trong đó số 2 thể hiện kích thước của nhịp. Mỗi hàng chứa đủ không gian cho 12 nhịp của kích thước 1 hoặc 2 của kích thước 6, điều này có thể được phân phối theo ý muốn. Khi không gian của một hàng bị vượt quá, nó sẽ tự động chuyển xuống hàng tiếp theo, cho phép chúng tôi sử dụng nhịp cầu kích thước 12 để tạo ngắt dòng. Nếu chúng tôi muốn bỏ qua một số nhịp cầu khi tạo một, tức là bắt đầu từ 4 nhịp cầuvà áp dụng kích thước là 3, chúng tôi sẽ sử dụng mã này:

<div class="span2 offset4">Contenido</div>

Điều này cho phép phép chia nhảy bốn nhịp trước khi hiển thị nội dung. Chúng tôi có thể sử dụng điều này tùy ý, bỏ qua những gì chúng tôi muốn với mã của chúng tôi.

Bỏ qua nhịp với lớp bù đắp

Bỏ qua nhịp với lớp bù đắp

Thiết kế khác nhau cho từng thiết bị

Hình ảnh với các lớp độc quyền cho thiết bị Bootstrap

Các lớp CSS để phân biệt từng thiết bị

Để áp dụng một thiết kế khác nhau cho từng loại thiết bị, chúng tôi sẽ cho biết từng bộ phận hợp lý mà nó được định hướng cho thiết bị nào, sử dụng các lớp sau:

Bằng cách này, chúng tôi có thể hiển thị một thiết kế hoàn toàn khác cho mỗi thiết bị có cùng một URL.

nút

Các nút màu

Danh sách các nút được cung cấp bởi Bootstrap

Bootstrap cung cấp cho chúng ta một kho các nút màu rõ ràng, cách sử dụng nó rất đơn giản:

<a class="btn btn-success" href="URL">
   Nombre del Botón
</a>

Đâu btn btn-success đề cập đến màu sắc của nút, để thay đổi nó, chúng ta sẽ chỉ phải thay thế nó bằng các lớp được hiển thị trong hình trước.

Cài đặt Bootstrap

Để cài đặt khung CSS này, chúng tôi sẽ tải xuống zip từ liên kết mà tôi sẽ để lại ở cuối bài viết và chúng tôi sẽ viết mã sau trong phần đầu của tệp HTML của chúng tôi.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/bootstrap.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>

Khi chúng tôi đã đảm bảo rằng các tệp CSS và JS nằm trong cùng một thư mục với tệp HTML, chúng tôi có thể bắt đầu thiết kế trang web đáp ứng của mình.

Thêm thông tin - Xác thực biểu mẫu

Tải xuống - Bootstrap: Khung CSS


Một bình luận, để lại của bạn

Để lại bình luận của bạn

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu bằng *

*

*

  1. Chịu trách nhiệm về dữ liệu: Miguel Ángel Gatón
  2. Mục đích của dữ liệu: Kiểm soát SPAM, quản lý bình luận.
  3. Hợp pháp: Sự đồng ý của bạn
  4. Truyền thông dữ liệu: Dữ liệu sẽ không được thông báo cho các bên thứ ba trừ khi có nghĩa vụ pháp lý.
  5. Lưu trữ dữ liệu: Cơ sở dữ liệu do Occentus Networks (EU) lưu trữ
  6. Quyền: Bất cứ lúc nào bạn có thể giới hạn, khôi phục và xóa thông tin của mình.

  1.   Alejandra dijo

    Bạn không có thêm hướng dẫn về framework này ???