NTM Solutions

Facebook Youtube Google+

Chủ Nhật, 19 tháng 3, 2017

Tự học Bootstrap – Cơ bản – bài 10 – Định dạng nhóm nút bấm

Nhóm các nút bấm

Bootstrap cho phép bạn nhóm 01 loạt các nút lại với nhau (trên cùng 01 dòng) trong 01 nhóm nút:



Dùng 01 thẻ <div> với lớp .btn-group để tạo 01 nhóm nút bấm.

Ví dụ:

<div class="btn-group">
  
<button type="button" class="btn btn-primary">Apple</button>
  
<button type="button" class="btn btn-primary">Samsung</button>
  
<button type="button" class="btn btn-primary">Sony</button>
</div>
Mẹo: Thay vì thiết lập cỡ nút trên từng nút bấm trong nhóm, bạn có thể sử dụng lớp .btn-group-lg|sm|xs để định dạng kích cỡ cho tất cả nút trong nhóm.

Thứ Sáu, 17 tháng 3, 2017

Thứ Năm, 16 tháng 3, 2017

Tự học Bootstrap – Cơ bản – bài 07 – Hộp Wells

Hộp Wells

Lớp .well thêm 01 đường viền bo tròn xung quanh 01 phần tử với nền màu xám và 01 số lùi dòng:


Ví dụ:

<div class="well">Basic Well</div>

Kích cỡ hộp Well

Thay đổi kích cỡ hộp well bằng cách thêm lớp .well-sm cho hộp nhỏ hoặc .well-lg cho hộp lớn:

Ví dụ:

<div class="well well-sm">Small Well</div>
<div class="well well-lg">Large Well</div>
Mặc định, các hộp wells có cỡ trung bình.



Lophocvitinh.COM***Tự học Bootstrap - Phần cơ... bởi minh-nguyen48

Thứ Hai, 13 tháng 3, 2017

Tự học Bootstrap – Cơ bản – bài 06 - Hộp Jumbotron

Tạo 01 hộp Jumbotron

01 Jumbotron là 01 hộp lớn bao quanh 01 nội dung đáng chú ý (có thông tin đặc biệt).
01 hộp jumbotron có màu nền xám và đường viền tròn. Nó cũng phóng lớn dòng chữ bên trong.
Mẹo: Bên trong 01 hộp jumbotron bạn có thể đặt gần như bất kỳ thẻ HTML nào, bao gồm cả các phần tử và lớp Bootstrap khác.
Sử dụng 01 thẻ <div> với tên lớp .jumbotron để tạo 01 hộp jumbotron:

Jumbotron bên trong thẻ Container

Đặt hộp jumbotron bên trong thẻ <div class="container"> nếu bạn muốn hộp jumbotron KHÔNG mở rộng ra đến cạnh của màn hình.

Chủ Nhật, 12 tháng 3, 2017

Tự học Bootstrap – Cơ bản – bài 05 – Định dạng hình ảnh

Định dạng ảnh trong Bootstrap

Bo tròn góc



Lớp .img-rounded thêm các góc bo tròn vào 01 bức ảnh (IE8 không hỗ trợ thuộc tính bo tròn góc)

Ví dụ:

<img src="hinh\xinh.jpg" class="img-rounded" alt="Lớp học vi tính.COM" width="304" height="236">

Hình tròn

Lớp .img-circle làm cho bức ảnh có hình tròn (IE8 cũng không hỗ trợ định dạng này).

Ví dụ:

Thứ Bảy, 11 tháng 3, 2017

Tự học Bootstrap – Cơ bản – bài 04 – Định dạng bảng

Bảng biểu cơ bản trong Bootstrap

01 bảng biểu Bootstrap cơ bản có lùi dòng 01 chút và chỉ có đường chia cắt ngang.
Lớp .table thêm các định dạng cơ bản vào bảng:

Ví dụ:




Các dòng xen kẻ (chẵn-lẻ)

Lớp .table-striped thêm định dạng ngựa vằn(zebra-stripes) vào bảng biểu:

Tự học Bootstrap – Cơ bản – bài 03 - Văn bản và định dạng in ấn

Các thiết lập mặc định trong Bootstrap

Cỡ chữ tổng quát trong Bootstrap là 14px, với line-height = 1.428.
Điều này áp dụng cho thẻ <body> và tất cả đoạn văn.
Hơn nữa, tất cả thẻ <p> có 01 canh lề dưới bằng nửa line-height (mặc định là 10px).

Định dạng Bootstrap vs. Định dạng trình duyệt

Trong bài này, chúng ta sẽ xem vài phần tử HTML sẽ được định dạng hơi khác 01 chút so với định dạng mặc định của trình duyệt.

<h1> - <h6>

Mặc định, Bootstrap sẽ định dạng các thẻ HTML headings (<h1> <h6>) theo cách sau:

Ví dụ:

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)

h3 Bootstrap heading (24px)

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)

<small>

Trong Bootstrap thẻ HTML <small> thường được dùng để tạo 01 chữ có định dạng nhạt hơn, 01 dòng chữ thứ cấp trong bất kỳ tiêu đề nào:

Thứ Sáu, 10 tháng 3, 2017

Tự học Bootstrap – Cơ bản – bài 02 – Hệ thống lưới

Hệ thống lưới trong Bootstrap

Hệ thống lưới Bootstrap cho phép tối đa chia thành 12 cột theo chiều ngang của trang.
Nếu bạn không muốn dùng tất cả 12 cột độc lập , bạn có thể nhóm các cột lại để tạo ra cột rộng hơn:
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
 span 4
 span 4
 span 4
span 4
span 8
span 6
span 6
span 12
Hệ lưới Bootstrap thì tự động tương thích với nhiều kiểu màn hình, các cột sẽ tự động tái sắp xếp tùy vào kích thước màn hình.

Các lớp trong hệ lưới

Thứ Năm, 9 tháng 3, 2017

Tự học Bootstrap – Cơ bản – bài 01 – Giới thiệu và cài đặt

Bootstrap là gì?

  • Bootstrap là 01 framework front-end miễn phí giúp việc thiết kế và phát triển web nhanh chóng hơn.
  • Bootstrap bao gồm HTML và CSS dựa trên những mẫu thiết kế dành cho in ấn, biểu mẫu, các nút bấm, các bảng biểu, menu điều hướng, các kiểu định dạng, bộ sưu tập ảnh và nhiều thứ khác, cũng như là các plugin tùy chọn JavaScript.
  • Bootstrap cũng cho bạn khả năng dễ dàng tạo các thiết kế tương thích nhiều loại thiết bị khác nhau.
Thiết kế web tương thích là gì?

Là việc tạo trang web tự động tùy chỉnh tương thích với nhiều thiết bị khác nhau, từ những chiếc điện thoại nhỏ đến máy tính desktop.

Lịch sử Bootstrap