NTM Solutions

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.
Xem tiếp »
vào lúc Không có nhận xét nào:
Từ điển
Nhãn: , ,

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

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

Kiểu nút bấm

Bootstrap cung cấp 07 dạng nút bấm:


Để tạo ra các loại nút trên, Bootstrap cung cấp các lớp sau:
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
Ví dụ sau hiển thị các kiểu nút bấm khác nhau:
Xem tiếp »
vào lúc Không có nhận xét nào:
Từ điển
Nhãn: , ,

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

Tự học Bootstrap – Cơ bản – bài 08 – Hộp thông báo

Thông báo

Bootstrap cung cấp 01 cách thức dễ dàng tạo ra các hộp cảnh báo được định dạng sẵn:


Các cảnh báo được tạo ra bằng lớp .alert, sau đây là các lớp cảnh báo có trong Bootstrap .alert-success, .alert-info, .alert-warning hoặc .alert-danger:

Ví dụ:

Xem tiếp »
vào lúc Không có nhận xét nào:
Từ điển
Nhãn: , ,

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
vào lúc Không có nhận xét nào:
Từ điển
Nhãn: , ,

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.
Xem tiếp »
vào lúc Không có nhận xét nào:
Từ điển
Nhãn: , ,

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ụ:

Xem tiếp »
vào lúc Không có nhận xét nào:
Từ điển
Nhãn: , ,

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:
Xem tiếp »
vào lúc Không có nhận xét nào:
Từ điển
Nhãn: , ,

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:
Xem tiếp »
vào lúc Không có nhận xét nào:
Từ điển
Nhãn: , ,

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

Xem tiếp »
vào lúc Không có nhận xét nào:
Từ điển
Nhãn: , ,

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

Xem tiếp »
vào lúc Không có nhận xét nào:
Từ điển
Nhãn: , ,
Đăng ký: Bài đăng (Atom)
Facebook Youtube RSS