Chắc hẳn gần đây bạn đã nghe nhiều người nhắc tới Twiter bootstrap framework. Thậm chí, có rất nhiều trang Webdesignning & Development viết về đề tài này như một chủ đề nóng hổi. Một vài người thì bảo nó là một công cụ ngoài sức mong đợi đối với người không biết gì về design trong khi một số khác thì xem nó như là 1 món quà tặng bởi Twitter Bootstrap Framework có quá nhiều điểm ưu việt mà không designer nào có thể cưỡng lại. Dù thế nào đi nữa thì Twitter Bootstrap Framework sẽ làm mọi thứ dễ dàng hơn và nhanh chóng hơn.
Trong khá nhiều trường hợp mình từng gặp phải, các Web-developer phải set-up mọi thứ xung quanh sản phẩm của họ trước khi giao đến tay khách hàng và trong quá trình set-up đó có 1 thứ khiến họ tốn thời gian nhiều nhất, đó là việc tạo ra các bảng thiết kế trong 1 project mà họ đang làm. Để thực hiện điều trên, họ phải liên hệ với các designer để hoàn thiện các giao diện ở phía client trong project. Ở Việt Nam, đây là tình trạng chung ! Một team start-up mới thành lập gồm những người coder và KHÔNG thể KHÔNG có 1 người chuyên làm giao diện – Designer. Trung bình 1 team có khoảng 4- 6 người thì sẽ có 5 người là code hệ thống, core và 1 người chuyên làm nhiệm vụ thiết kế UI/UX cho 2 bên client side/ Server side và nếu team nào không có 1 designer giỏi thì đó thật sự là 1 nhược điểm lớn gây kéo dài Dự án và cũng làm giảm đi tính hiệu quả.
Thật vậy, việc thiết kế giao diện thực sự là 1 việc tiêu tốn thời gian kinh khủng nhất khi làm bất cứ 1 dự án nào. Nó thực sự là 1 điểm yếu lớn dành cho những web-developer – những người không thể tự design hoặc design chưa mạnh, khi mà họ đang bị thiếu ý tưởng nhưng lại muốn thực hiện dự án càng sớm càng tốt. May mắn thay, có 1 bộ công cụ đem đến cho bạn 1 giải pháp “cứu nguy” giảm thiếu thời gian design và thiếu hụt ý tưởng khi phải đối diện với 1 kịch bản lặp đi lặp lại nhiều lần đã kể như trên – Twitter Bootstrap Framework.
Vậy Twiter Bootstrap ? – What is twitter bootstrap ?
Twitter Bootstrap là 1 front-end framework giúp bạn thiết kế 1 ứng dụng web 1 cách nhanh chóng, dễ dàng và “hợp thời trang” 😉
Nó là 1 trong số các CSS-Framework sử dụng dễ nhất thế giới tại thời điểm hiện tại để dùng cho nghành Công Nghiệp Web hiện nay.
Giả sử, bạn không biết gì về thiết kế 1 trang Web. Tất cả những gì bạn cần làm là viết một đoạn mã HTML theo các thông số kỹ thuật của Bootstrap quy định và chỉ trong 1 thời gian ngắn Twitter Bootstrap sẽ viết mã CSS cho bạn, component Jquery và các công cụ Javascript phổ biến khác, điều mà trước đây, bạn phải cực khổ khi “làm” web thì với framework này, bạn sẽ giảm thiểu được số “thời gian cực khổ ấy” nhưng vẫn cho ra sản phẩm như “ý tưởng” mà bạn đã suy nghĩ trong đầu hoặc ý tưởng của khách hàng mạng lại.
Công việc của bạn, chỉ đơn giản là đặt đúng những thẻ HTML vào đúng chỗ của nó mà thôi. Mình sẽ giải thích kỹ hơn ở bên dưới…
Twiter Bootstrap bao gồm những gì ?
Theo như thông tin trên trang http://getbootstrap.com thì css-framework này gồm có :
CSS and HTML for creating Grids, Layouts, Typography, Tables, Forms, Navigation, Alerts, Popovers etc. And along with that, comes a host of Jquery plugins to create awesome UI components like Transitions, Modal, Dropdown, Scrollspy, Tooltip, Tab, Popover, Alert, Button, Collapse, Carousel, Typeahead, Affix.
Những công cụ cần thiết cho việc thiết kế front-end ( CLIENT SIDE ) phải không nào !
Browser Support
Bắt đầu vào TUT nào ! – Getting Started !
Trong TUT này, mình sẽ “chỉ” cách mà làm sao bạn có thể sử dụng Twitter Bootstrap bằng cách showcasing 1 bản demo layout, và làm sao bạn có thể khám phá, làm chủ, tùy biến nó cho mục đích của bạn sau này.
Sau khi bạn hoàn thành xong TUT, bạn sẽ được 1 trang như thế này :
Đầu tiên, trước khi bắt tay vào làm 1 “món ăn” gì đó thì bạn phải có các nguyên liệu sau :
- Download bootstrap.zip từ trang http://getbootstrap.com/2.3.2/
- 3 trình duyệt phổ biến : FF,GG,IE
- IDE của bạn, ở đây mình sử dụng Sublime để code 🙂
Trong pack bootstrap.zip sẽ gồm có các file css, img, jpg nằm trong từng thư mục được phân loại riêng, chúng ta sẽ dùng những thứ này để “chế biến” 1 Website như ý.
Lưu ý thêm là trong :
- Thư mục CSS : chứa các file non-responsive và responsive designs*, ngoài ra còn chứa phiên bản rút gọn. Khi chạy sản phẩm cho khách hàng, bạn nên dùng file này. Nó giúp site bạn chạy nhanh và nhẹ hơn rất nhiều đó.
- Thư mục JS : chứa file bootstrap.js và minimized version. Nội dung các file này dùng chứa các component cho việc thiết kế Web của chúng ta được chuyên nghiệp hơn.
- Thư mục “img” ( cuối cùng ) : chứa 2 cái ảnh lớn Halflings images, ta dùng nó để add các icon vô trang Web thiết kế trong đẹp mắt và thân thiện với người dùng hơn. Twitter Bootstrap sử dụng công nghệ sprite-image nên bạn có thể hoàn toàn yên tâm về tính nhẹ và nhanh của nó.
Okey, giới thiệu sơ qua cấu trúc của nó rồi, bây giờ đến việc “mần ăn” thôi 😀
Đầu tiên, bạn mở IDE bạn lên, tạo và đặt tên file mới là index.html. Save lại trong project folder của bạn.
Tạo giao diện HTML đơn giản với Bootstrap
Đầu tiên, để kích hoạt Bootstrap framework, bạn cần phải include tất cả những file trong pack bootstrap.zip vào Project của bạn và follow up theo cấu trúc HTML mà bootstrap quy định.Ở đây Bootstrap làm việc với HTML5 nên mở đầu cấu trúc trong file index.html sẽ là :
<!DOCTYPE html>
Tiếp theo chúng ta sử dụng thẻ meta quy định chuẩn utf-8 để có thể hiển thị nội dung có chứa các ngôn từ có dấu trên nền các browsers.
<meta charset=”utf-8”>
Lẽ dĩ nhiên là chúng ta phải wrap bằng các thẻ cơ bản của HTML rồi : <html>, <head> and <body> . Nó sẽ trông giống vầy :
Tiếp theo, chúng ta sẽ add các file css cần thiết vào ( ở đây sẽ là bootstrap.css )
<link rel=”stylesheet” href=”css/bootstrap.css” />
…và thư viện Jquery. Ở đây mình khuyến khích các bạn dùng file Jquery trực tiếp từ trang chủ luôn ( hoặc của Google CDN thay cho Jquery CDN )
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
include file bootstrap.js này vào
<script src=”js/bootstrap.js”></script>
Nói về những file Js này, có 2 phong cách tồn tại song song tùy thuộc cách đặt vị trí file js ở head hay ở body mà cho ra hiệu suất trang Web hoàn toàn khác nhau. Điều này tùy thuộc mục đích của bạn là gì ?
Nếu bạn muốn load những thanh menu hay những tùy chỉnh giao diện khi lần đầu vào Web thì nên đặt file js ở đầu ( head ), còn lại là nên đặt ở dưới thẻ body bạn nhé ! Như thế này :
Okey, cuối cùng thì chúng ta đã xong phần cài đặt các file cần thiết để chuẩn bị bước vào phần building các components cho trang Web của mình.
Hiểu cách mà Bootstrap làm việc – Understanding how it works
Đầu tiên, bạn cần phải biết Twitter Bootstrap chia 1 layout ra làm 12 phần gọi là 12 grids ( lưới ) trong hệ thống lưới Grids System.
Okey, vậy grid ( lưới ) là gì ?
Grid – Lưới, là những thẻ div được chia sẵn để các bạn có thể định vị các div lớn, các phần tử 1 cách dễ dàng trên 1 layout màn hình. Ở đây, mình đứng dưới góc độ các bạn chưa biết gì về thiết kế mỹ thuật. Với grid bạn có thể canh độ rộng của 1 div ra giữa trang web, chia trang Web ra những div nhỏ theo ý bạn muốn. Chỉ cần dùng class “span6” là bạn có thể cho độ rộng của div bằng 1 nữa trang Web rồi.
Nếu bạn muốn biết chi tiết hơn về Grid System thì mời bạn vào trang iDesign
Okey, để hiểu hơn và việc mà mình muốn chia sẻ với các bạn trong bài viết này là mình sẽ có được gì sau khi thực hiện thì mời các bạn xem trang demo page này. Bạn đã nhìn thấy nó rồi chứ ! Nào bây giờ thì coding nào 😉
[TBS_BUTTON color=”success” link=”https://anhthienad.com/tutorial/bootstrap” title=”DEMO RESULT”]DEMO RESULT[/TBS_BUTTON]
Coding with Bootstrap
Layout của chúng ta sẽ chia ra 5 phần chính :
Để có thể kiểm soát hết các phần trên, ta nên có 1 thẻ Wrapper ở ngoài :
<div class="containter"></div>
Bây giờ, trong thẻ div có class container, ta sẽ viết title cho website của chúng ta bằng cách dùng thẻ h1 và thẻ a :
<h1><a href="”#”">Bootstrap Site</a></h1>
Thử chạy trên trình duyệt và bạn sẽ thấy Title được hiển thị rất clear và beautiful :). Tiếp theo là phần navigation bar. Bạn hãy viết các thẻ HTML theo định dạng mà Twiter Bootstrap quy định như sau :
<div class="navbar> <div class="navbar-inner"> <div class="containter"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Services</a></li> <li><a href="#">Downloads</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div>
Giải thích chút :
- Class “navbar” phải được bao bọc bên ngoài cho toàn menu bởi vì Twiter Bootstrap đã định nghĩa như thế giúp chúng ta mau chóng tạo ra 1 thanh navigation.
- “navbar-inner” giúp ta định nghĩa, định vị được các nội dung nằm bên trong “navbar”
- “container” giúp bao bọc nội dung của menu và ngoài ra nó còn kiểm soát, hiển thị được trên các thiết bị Di Động khác ( sau này mình sẽ hướng dẫn kĩ hơn “
- “active” giúp cho thành phần đó được nổi trội hơn các thành phần ngang hàng.Tạo sự khác biệt giúp người dùng Client dễ nhận biết.
Okey, bây giờ kiểm tra lên browsers ta sẽ có 1 thanh navigation tuyệt đẹp như bên dưới :
Okey, nhiều bạn sẽ đặt câu hỏi là nếu tôi muốn làm khác đi như bên trên có được không ? Dĩ nhiên rồi, ở phía cuối bài, tôi sẽ nói về điều này – cách mà bạn có thể add thêm các style cho bootstrap và biến bootstrap thành thư viện của riêng bạn. Còn bây giờ thì tiếp tục sang
Phần 2 – The marketing area.
Đây là phần đẹp nhất mà Twiter Bootstrap định nghĩa sẵn cho chúng ta. Nó được sử dụng khi ta gọi class “hero-unit” ra.
Tiếp tục gõ lại đoạn code dưới vào IDE của bạn để thấy được nó :
<div class="hero-unit">
<h1>Marketing AREA!</h1>
<p>Đây là phần mà theo các Web-developer cho là phần Twiter định nghĩa tốt nhất về phương diện design đấy các bạn ạ.</p>
<a href="#" class="btn btn-large btn-success">Get Started</a>
</div>
Kiểm tra lại browser và ta sẽ thấy như sau :
Tuyệt vời không các bạn ! Chỉ cần viết vài thẻ HTML cùng thêm vào chút xíu các class mà ta ra được 1 sản phẩm mang phong cách hiện đại như thế này chỉ với vài phút coding thôi. Okey, bây giờ ta sẽ đi sâu 1 chút vào ý nghĩa của các class.
Class “hero-unit” sinh ra để design cho thẻ h1. Vậy nên khi bạn viết bất kỳ ký tự gì vào thẻ này thì nó sẽ hiển thị ra màu chữ kiểu bold và đứng 1 mình nó cho nguyên cái dòng đó. (Sorry, mình ghi hơi lủng củng T_T ). Next, khi viết xong Tittle chính rồi, ta cần phải viết phần mô tả và ở đây phần mô tả sẽ được bao bọc bởi thẻ <p>.
Và bạn có để ý thấy cái nút Get Started nổi bật kia không ? Bình thường để làm được nút như thế, bạn cần phải định nghĩa CSS không dưới 5 dòng phải không ! Nay bạn chỉ cần khai báo class=”btn btn-large btn-success” cho thẻ a là có được 1 button nhanh, gọn, lẹ mà lại theo chuẩn nữa chứ, sau này rất dễ customize lại các bạn ah ^^.
Mình giải thích chút xíu về mấy cái class :
>> btn nghĩa là khai báo 1 button mặc định của button này là màu trắng có đổ bóng.
>> btn-large : khai báo kích thước cho button đó.
>> btn-success : khai báo màu cho button đó, và ở đây là màu green. Ngoài ra còn có các màu khác btn-info (màu xanh biển lợt ), btn-primary ( xanh biển đậm ), btn-warning ( yellow ), btn-danger ( red )
—> mấy cái này đã được định nghĩa sẵn trong Framework CSS Twiter Bootstrap, bạn có thể lên website chủ mình ghi ở đầu bài để xem tài liệu cho dễ hình dung. Việc của bạn là áp các class này lên các thẻ HTML là đủ rồi. Dễ dàng chứ 😉
Với Framework CSS Twiter Bootstrap, bạn chẳng cần biết gì nhiều về CSS cũng có thể thiết kế cho mình 1 trang Web mang giao diện đẹp và phong cách hiện đại. Chính vì sự dễ dàng và tiện dụng mà Framework CSS Twiter Bootstrap hiện tại là 1 trong các framework cho dân designer và developer thông dụng nhất trong nghành công nghiệp thiết kế nói chung và thiết kế Web nói riêng đấy bạn ah.
Tiếp theo, chúng ta sẽ sang phần sidebar và content section.
Sidebar và Content Section :
Trong phần này, bạn sẽ hiểu được cách mà mình chia 2 khu vực trong phần body bằng hệ thống lưới grid-system. Điều này có nghĩa là bạn sẽ chia được 12 lưới bên trong bất kỳ lưới cha nào. Để dễ hình dung, bạn vui lòng xem hình bên dưới :
Tương ứng, dòng đầu tiên là 12 grid. Trong css mỗi class đánh số là 1 div. Căn cứ vào các số đó mà bạn sẽ căn chỉnh nội dung của mình vào trong các thẻ div.Và bây giờ chúng ta sẽ làm ví dụ thực tế để các bạn có thể nắm rõ.
Quay trở lại file index.html, chúng ta thấy tất các các div của chúng ta đang nằm trong class=”container”. Vì vậy, bây giờ chúng ta sẽ làm 1 việc chia khu vực bên dưới phần marketing area thành 2 section không bằng nhau bằng cách sử dụng 12 grid. Left-sidebar chúng ta sẽ gán cho nó class span4, và right-sidebar chúng ta sẽ cho nó bằng span8. Và theo như trong hình grid example bên trên, ta sẽ có 2 thẻ div hoặc section ( theo chuẩn HTML5 ) với độ rộng khác nhau.
<article class="row"> <section class="span4"> <p>Dummy Text</p> </section> <section class="span8"> <p>Dummy Text</p> </section> </article>
Và Site của bạn có vẻ như thế này.
Các bạn lưu ý, nếu không có class row ở trên cùng thì 2 thẻ section ở dưới sẽ bị sang trái hết và nằm theo thứ tự từ trên xuống nhé ( mặc định thẻ span có thuộc tính float:left ). Và như thế class row có vài trò giống như thẻ “<tr>” ( row of table ) trong HTML vậy đó. Nó giúp chúng ta làm 1 cái khung để chúng ta có thể căn nội dung theo ý muốn. Và trong trường hợp này, nó có vai trò là parrent ( cha) .
Tiếp theo, ta chỉ việc fill navigation vào left-sidebar và fill content vào right-sidebar là xong phần này.Nhớ là bỏ thẻ <p> và nội dung của nó đi nhé 😀 )
Ta có code navigation list như sau :
<ul class="nav nav-list"> <li class="nav-header">Chém Gió thần công?</li> <li class="active"><a href="#">Home</a></li> <li><a href="#">Our Clients</a></li> <li><a href="#">Our Services</a></li> <li><a href="#">About Me</a></li> <li><a href="#">About My Foot</a></li> <li class="nav-header">Our Friend</li> <li><a href="#">Google</a></li> <li><a href="#">Flickr</a></li> <li><a href="#">Bing</a></li> <li><a href="#">Youtube</a></li> <li><a href="#">Facebook</a></li> </ul>
Nhìn cũng dễ hiểu phải không các bạn, class=”nav” giúp Twiter Bootstrap nhận dạng và định nghĩa giao diện đây là 1 thanh navigation, “nav-list” giúp nó nhận biết đây là thanh navigation có list, “nav-header” nhìn giống như ý nghĩa thẻ Heading vậy, li.active làm cho nổi bật chữ Home giúp người dùng biết họ đang ở trang nào.
>>Okey, và kết quả chúng ta được như vầy.
Phần nội dung thì đơn giản rồi các bạn nhỉ, muốn thêm gì thêm…Đại loại như là :
<h3>Tối nay ăn gì ?</h3> <p>Bánh tráng trộn - bánh tráng trứng - bánh tráng nướng - bánh tráng chín.</p> <p>Ăn cho mập thây, cơ mà trưa rồi kể nghe thèm quá >"<.</p> <h3>Làm sao để mua?</h3> <p>Xách honda lên mà chạy....chứ sao!!!</p>
Có vẻ như là mọi việc sắp xong rồi…sắp được ăn cơm rồi :p Chì còn phần footer nữa thôi.
FOOTER
Nói về footer, nó thông thường gồm 2 phần : Footer & Copyright
Phần footer, bạn làm tương tự như phần sidebar & content vậy đó.Cũng chia 1 thẻ div class row rồi thêm 3 div với span tùy bạn chia.Nếu là mình, mình sẽ thiết kế nó có 3 cái div bằng nhau.Giống như vầy
<footer> <div class="row"> <div class="span4"> <h4 class="muted text-center">Về Đối tác</h4> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> <a href="#" class="btn"><i class="icon-user"></i> Khách hàng của chúng tôi</a> </div> <div class="span4"> <h4 class="muted text-center">Về Đội ngũ</h4> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> <a href="#" class="btn btn-success"><i class="icon-star icon-white"></i> Đội ngũ của chúng tôi</a> </div> <div class="span4"> <h4 class="muted text-center">Về Giải Thưởng</h4> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> <a href="#" class="btn btn-info">Liên hệ với chúng tôi</a> </div> </div> </footer>
Đơn giản phải không nào ! Chúng ta vừa sử dụng class=”span4″ để chia 3 div có chiều rộng ngang nhau. Tiếp theo, ta sử dụng các class: muted ( làm mờ ), text-center ( định dạng chữ chính giữa ), “icon-user” ( tạo icon nhỏ theo phong cách font-awesome, gây thiện cảm hơn với người dùng. Xem thêm ),” btn-info” ( tô màu xanh cho button )…
Sang phần copyright, để cho mẫu thiết kế của ta nhìn có vẻ chuyên nghiệp hơn, ta sẽ sử dụng thẻ <hr> vẫn nằm dưới khu vực thẻ div class=”row” bạn nhé ! Mục đích là để thêm 1 chút khoảng trống ở dưới phân biệt giữa phần footer và phần content ở trên được rõ ràng hơn. Điều này rất quan trọng trong thiết kế Website đó.
<hr> <div class="footer"> <p>© 2013</p> </div>
Phù…đi hết bài viết này, cuối cùng các bạn cũng đã hoàn thành 1 trang Web theo kiểu landing page với Twitter Bootstrap framework.
Dành cho người muốn tùy biến Twitter Bootstrap
Nếu bạn có biết về CSS và muốn tùy biến framework tuyệt vời này thành 1 Style riêng của mình thì thật là tuyệt vời. Làm điều này cũng thật đơn giản.
Bạn hãy tạo 1 file css riêng và đặt tên nó theo ý bạn thích. Vd tên là “custom.css” và trong file css của bạn, bạn chỉ cần thêm dòng :
@import url("bootstrap.min.css");/*nhớ add dòng này lên đầu file css của bạn */
Đề có thể thừa hưởng các định nghĩa cơ bản về giao diện của framework này, đồng thời bạn tiếp tục định nghĩa các style mới “theo cách của bạn ” – kiểu như Vịt tel ấy nhỉ :v. Vì bạn biết đấy, Framework này rất thông dụng, và một khi ai cũng sử dụng nó thì đâu có điều gì gọi là ” sự khác biết ” đâu 😀
Một vài Components của Twitter Bootstrap
Lead Paragraphs
To make a paragraph stand out in the middle of long document, you can add class “lead” to it. It will make the fonts of that particular paragraph a bit bigger than the rest of the document.
– Để làm nổi bật 1 đoạn văn, bạn chỉ việc thêm class=”lead” là xong. Font chữ sẽ “bự” lên 1 chút so với các phần còn lại của tài liệu.
Emphasis Tags
You can also use the default Emphasis tags like <small>, <strong> and <em> inside your html page. Tags like <b> and <i> are still valid.
– Bạn cũng có thể sử dụng các thẻ emphasis ( thẻ nhấn mạnh chữ ) ví dụ <small>,<strong>,<em> trong trang HTML của bạn.
Text aligning
Text aligning inside any paragraph or a div tag can be done using the classes: “text-left”, “text-center” and “text-right”.
– Giúp bạn căn chỉnh đoạn text sang trái,phải hay giữa..tùy bạn.
Text colors
You can set the default color for paragraph text by using various text color emphasis classes like “muted” for grey, “text-warning” for red, “text-error” for deep maroon, “text-info” for light blue and “text-success” for green color.
– Đại loại là Set hiệu ứng màu mè cho chữ í mà :p
Styling Tables
– Định dạng cho bảng biểu :
<table class="table"> <tr> <td></td> <td></td> </tr> ….. </table>
Playing with images
You can add images using the normal <img src=”demo.jpg”/> tag. To make your designs a bit more interesting, add classes like “img-rounded” for rounded corners, “img-circle” for circling the image and “img-polaroid” to give box-shadow and border radius to the image.
– Bạn có thể thêm hình và làm cho nó đẹp hơn bằng cách cho hình ảnh của bạn vào khung : tròn : chữ nhật : đổ bóng : bo góc ….Rất tuyệt đấy bạn ạ.
Drop down menu
To add a drop down menu to the existing navigation bar as shown in the demo page, you have to add the following markup inside a “li” element.
– Để tạo 1 menu kiểu drop-down ( xổ ra ) ngay trong thanh navigation bar như ở trang demo, bạn phải add thêm các class vào trong thẻ “li” như sau :
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-th-large"></i> Drop Down
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
</ul>
</li>
Riêng phần này, bạn phải wrap phần tử cha và sử dụng class “dropdown” , dùng thẻ a trong “li” thì nó mới hiển thị đúng được nhé.
Kết bài :
Trên đây là những phần cơ bản nhất mà các bạn có thể làm với Twiter Bootstrap framework này. Hy vọng là thông qua bài viết này, bạn có thể hiểu sơ về cách thức hoạt động của nó để có thể tìm hiểu sâu hơn, làm chủ nó và sở hữu riêng cho mình 1 bộ style riêng và nhớ chia sẻ bộ style của bạn lên đây để mọi người cùng tham khảo bạn nhé 😉
Đây là Tutorial đầu tiên của mình viết, nếu có gì còn thiếu sót mong các bạn chân thành góp ý. Ngoài ra, nếu bạn có thắc mắc gì đó, đừng ngần ngại sử dụng chức năng comment bên dưới để nói cho mình biết bạn đang nghĩ gì nhé 🙂
Trong bài viết tiếp theo về Bootstrap, mình sẽ hướng dẫn các bạn cách để tạo ra 1 trang Web tương thích được trên tất cả các thiết bị di động hiện nay. Vậy nên hãy subscribe trang Web của mình để đừng bỏ lỡ nó nhé ! Nó sẽ rất thú vị đó. 😉
AnhThien8’s Blog
Bài viết rất hay đang bài hướng dẫn tạo ra trang web trên các loại thiết bị di động của bạn ^^
Rất chi tiết…rất có ích cho những người mới tìm hiểu. Thanks!!!!
Hello there! I just wznt to give you a big thumbs up for the great information you have here on this post.
I’ll be returning to your website for more soon.