Bài 15: Navigation trong bootstrap 3 - witter Bootstrap 3
Như vậy, kết thúc bài trước chúng ta đã tìm hiểu xong khái niệm về navs và trong bài học ngày hôm nay thì chúng ta sẽ tiếp tục tìm hiểu về một phần khá là quan trọng trong bootstrap 3, đó là navigation hay còn được viết tắt là navbar. Thôi không nói rườm rà nửa mà bây giờ ...
Bài 14: Navs menu trong bootstrap 3 - witter Bootstrap 3
Như vậy sau khi kết thúc bài viết trước thì các bạn cùng với tôi đã tìm hiểu xong phần glyphicons dùng để nhúng các biểu tượng vào website. Ở bài viết này thì chúng ta sẽ tìm hiểu về một components khá là quan trọng, đó chính là navs. Nghe cái tên là thấy quen quen rồi hen, chức năng chính của ...
Bài 13: Glyphicons trong bootstrap 3 - witter Bootstrap 3
Trong bài học ngày hôm nay các bạn sẽ cùng với tôi tìm hiểu về Glyphicons. Đây là thành phần components được tích hơp vào bootstrap 3, nó sẽ giúp chúng ta ứng dụng vào quá trình thiết kế website và đẩy nhanh quá trình xây dựng layout hơn. 1. Glyphicons trong bootstrap ...
Bài 12: Button group bootstrap 3 - witter Bootstrap 3
Để có thể hiểu rõ bài viết này thì tôi cần các bạn phải xem qua bài Tạo button trong bootstrap 3 vì đây là bài nâng cao để làm việc với button trong bootstrap 3. Nghe từ group thì các bạn đã phần nào hình dung ra được Button Group bootstrap 3 sẽ mang đến cho chúng ta điều gì? 1. Định nghĩa class ...
Bài 11: List group trong bootstrap 3 - witter Bootstrap 3
Trong bài này chúng ta sẽ cùng nhau tìm hiểu khái niệm List Group trong bootstrap 3, nghe tới cái tên list chắc hẳn các bạn đã hình dung ra được nó là cái quái gì rồi phải không nào, nôm na là dùng các tag <ul></li> để tạo ra các định dạng menu ngang,dọc. 1. Class list-unstyled định ...
Bài 10: Tạo button trong bootstrap 3 - witter Bootstrap 3
Như vậy kết thúc 9 bài trước thì các bạn cũng phần nào cảm nhận được sức mạnh và sự tiện ích mà bootstrap 3 mang lại cho chúng ta trong việc xây dựng giao diện website. Ở bài này tôi sẽ hướng dẫn các bạn cách tạo ra các nút nhấn hay còn được gọi là button với các màu sắc khác nhau. Nhưng trước tiên ...
Bài 9: Xây dựng form với bootstrap 3 - witter Bootstrap 3
Khi các bạn tiến hành xây dựng giao diện một website thì form chính là thành phần không thể thiếu đối với website của bạn. Đối với Css thông thường khi stylesheet một form thì chúng ta thường bị mất nhiều thời gian vào các việc như là canh lề cho thẻ label canh chỉnh margin & padding cho khung ...
Bài 8: Định dạng Typography bootstrap 3 - witter Bootstrap 3
Trong bài viết này, các bạn sẽ tìm hiểu về các phong cách và định dạng của nội dung văn bản như tiêu đề, đoạn văn, blockquotes...vv Vấn đề trang trí nội dung trong website cũng rất là quan trọng và không thể thiếu được, Trước đây có lẽ các bạn hơi mất thời gian với việc stylesheet cho các tag ...
Bài 7: Panel & Labels trong bootstrap 3 - witter Bootstrap 3
Trong bài hôm nay chúng ta sẽ cùng tìm hiểu hai thuộc tính khác mà bootstrap hỗ trợ. Đó là Labels & panel, 2 class này có hai nhiệm vụ khác nhau nhưng cũng rất quan trọng khi các bạn làm việc với phần giao diện website, để hiểu rõ nó hơn thì chúng ta sẽ tìm hiểu từng class nhé. 1. Labels & ...
Bài 6: Pagination trong bootstrap 3 - witter Bootstrap 3
Pagination là một thuật ngữ không quá xa lạ đối với dân lập trình web, hầu hết mọi website đều sử dụng nó để làm nhiệm vụ giới hạn dữ liệu trên một trang. Bootstrap cũng rất thấu hiểu tâm lý của chúng ta vì thế cũng hỗ trợ phần stylesheet pagination rất đẹp mắt giúp cho dân cắt HTML CSS giảm bớt ...
Bài 5: Breadcrumbs & Images trong bootstrap 3 - witter Bootstrap 3
1. Breadcrumb là gì ? Breadcrumb là tập hợp các đường link phân cấp giúp người dùng có thể biết được mình đang ở trang nào và từ đó có thể di chuyển thuận lợi từ trang này trang khác trong 1 website. Trong bài viết này chúng ta sẽ cùng nhau tìm hiểu cách stylesheet Breadcrumbs & Images trong ...
Bài 4: Tạo table trong bootstrap 3 - witter Bootstrap 3
Dùng bootstrap 3 để để tạo ra table thì rất là đơn giản, chỉ cần vài dòng code là các bạn có ngay một table nhìn rất bắt mắt cũng như rất dễ tinh chỉnh so với table html thông thường. Để không làm mất thời gian quý báu của các bạn thì chúng ta sẽ tìm hiểu xem bootstrap 3 hỗ trợ phần stylesheet table ...
Bài 3: Grid System trong bootstrap 3 - witter Bootstrap 3
Chắc hẳn các bạn còn đang lạ lẫm và đặt ra câu hỏi Grid system là gì? Vậy thì tôi xin mô tả sơ lược qua để các bạn có cái nhìn chung về nó như sau. Grid System là một hệ thống lưới và là một thuật ngữ được dùng trong thiết kế và nó được cấu hình thành 12 cột. Kích thước trong Grid System tính bằng ...
Bài 2: Download Bootstrap và nhúng Bootstrap vào website - witter Bootstrap 3
Trước khi bắt đầu đọc bài viết này thì các bạn hãy chắc rằng đã chuẩn bị sẵn bộ công cụ mà tôi đã đề cập ở bài tổng quan bootstrap 3 nhé. Cũng như yêu cầu tối thiểu cần có là kiến thức về html & css căn bản. Ok, bây giờ chúng ta sẽ tiến hành dowload Bootstrap cũng như tìm hiểu cấu trúc bên ...
Bài 1: Tổng quan về twitter bootstrap 3 - witter Bootstrap 3
Lời nói đầu tôi xin gửi lời chào tới tất cả các bạn đang theo dõi bài viết này của tôi. Đã lâu rồi tôi không có đóng góp bài viết cho Zaidap.com vì một số lý do cá nhân. Nay tôi quyết định quay lại và gửi tới các bạn loạt bài hướng dẫn sử dụng Bootstrap 3 để xây dựng giao diện web. Đối với nhiều Web ...
hẻ comment in html trong HTML - Các thẻ HTML
Code RUN <!DOCTYPE html> <html> <head> <title>Học lập trình miễn phí tại Zaidap.com.net</title> <meta charset="utf-8"> </head> <body> <h1>Học lập trình miễn phí tại Zaidap.com.net</h1> ...
hẻ DOCTYPE trong HTML - Các thẻ HTML
Code <!DOCTYPE html> <html> <head> <title>Học lập trình miễn phí tại Zaidap.com.net</title> <meta charset="utf-8"> </head> <body> <h1>Học lập trình miễn phí tại Zaidap.com.net</h1> </body> & ...
hẻ a trong HTML - Các thẻ HTML
Code RUN <!DOCTYPE html> <html> <head> <title>Học lập trình miễn phí tại Zaidap.com.net</title> <meta charset="utf-8"> </head> <body> <h1>Học lập trình miễn phí tại Zaidap.com.net</h1> ...
hẻ abbr trong HTML - Các thẻ HTML
Code RUN <!DOCTYPE html> <html> <head> <title>Học lập trình miễn phí tại Zaidap.com.net</title> <meta charset="utf-8"> </head> <body> <h1>Học lập trình miễn phí tại Zaidap.com.net</h1> ...
hẻ address trong HTML - Các thẻ HTML
Code RUN <!DOCTYPE html> <html> <head> <title>Học lập trình miễn phí tại Zaidap.com.net</title> <meta charset="utf-8"> </head> <body> <h1>Học lập trình miễn phí tại Zaidap.com.net</h1> ...
