Khung giao diện người dùng phổ biến nhất, Twitter Bootstrap, đã có phiên bản thứ ba (v3. 0. 0). Hướng dẫn Twitter Bootstrap dành cho người mới bắt đầu này sẽ giúp bạn bắt đầu với Twitter Bootstrap 3. Nếu bạn đã sử dụng Bootstrap trước đây, phần này sẽ giới thiệu cho bạn các tính năng mới đi kèm với phiên bản

Bạn cũng sẽ thấy cách tùy chỉnh các tính năng vượt trội của khung, sử dụng lưới để tạo bố cục, tạo điều hướng bằng điều hướng, tạo danh sách thả xuống, sử dụng băng chuyền, thêm nhân viên bên thứ ba như nhúng plugin xã hội và Google Map, v.v. Cuối cùng, chúng tôi sẽ tạo một trang web đáp ứng hoạt động và theo cách đó sẽ khám phá một số sắc thái của khung

Xem bản trình diễn

Tải xuống mã nguồn

Ví dụ Bootstrap

Để giúp bạn hiểu rõ hơn, chúng tôi đã biên soạn rõ ràng một lượng lớn các Ví dụ về Bootstrap bên cạnh những ví dụ có trong hướng dẫn. Bạn có thể xem mã, xem bản trình diễn trực tiếp và tự chơi với mã trực tuyến

Trình khởi động Twitter là gì

Twitter Bootstrap là một khuôn khổ giao diện người dùng để phát triển các ứng dụng web và trang web nhanh chóng. Trong phát triển web hiện đại, có một số thành phần được yêu cầu trong hầu hết các dự án web. Bootstrap cung cấp cho bạn tất cả các mô-đun cơ bản đó - Grid, Typography, Tables, Forms, Buttons và Responsiveness. Bên cạnh đó, có rất nhiều thành phần giao diện người dùng hữu ích khác như Dropdown, Navigation, Modals, Typeahead, Pagination, Carousel, Breadcrumb, Tab, Thumbnails, Headers, v.v. Với những thứ này, bạn có thể tạo và chạy một dự án web nhanh chóng và dễ dàng

Hơn nữa, vì toàn bộ khung dựa trên mô-đun, bạn có thể tùy chỉnh nó bằng một chút CSS của riêng mình hoặc thậm chí tiến hành đại tu toàn bộ sau khi bắt đầu

Nó dựa trên một số phương pháp hay nhất và chúng tôi tin rằng đây là một điểm rất tốt để bắt đầu học cách phát triển web hiện đại với HTML và JavaScript/Jquery sau khi bạn biết những điều cơ bản

Mặc dù có những lời chỉ trích rằng tất cả các dự án do Bootstrap tạo ra đều giống nhau và bạn có thể tạo một trang web mà không cần nhiều kiến ​​thức về HTML + CSS, chúng ta cần hiểu rằng Bootstrap là một khung chung và giống như bất kỳ nội dung chung nào khác, bạn cần tùy chỉnh nó để . Và bạn cần phải phát triển khi bạn đang trên đường tùy chỉnh nó và điều đó là không khả thi nếu không hiểu rõ về HTML + CSS

Tất nhiên, có sẵn các khung giao diện người dùng rất tốt bên cạnh bootstrap và đó hoàn toàn là lựa chọn của nhà phát triển muốn cái nào. Nhưng nó chắc chắn đáng để thử

Tại sao bạn sử dụng Twitter Bootstrap trong các dự án của mình?

W3resource hiện có một loạt Twitter Bootstrap Tutorial thảo luận chi tiết về framework. Chúng tôi sẽ cập nhật toàn bộ series với phiên bản mới nhất 3. 0. 0 và sẽ thêm nhiều nội dung và ví dụ hữu ích hơn. Hãy đăng ký Feed của chúng tôi để theo dõi

Tải xuống và hiểu cấu trúc tệp

Bạn có thể tải xuống Bootstrap Phiên bản 3. 0. 0 từ https. //github. com/twbs/bootstrap/lưu trữ/v3. 0. 0. zip (đầy đủ) hoặc https. //github. com/twbs/bootstrap/phát hành/tải xuống/v3. 0. 0/bootstrap-3. 0. 0-dist. khóa kéo (ngắn). Chúng tôi đã sử dụng cái đầu tiên, nhưng bạn cũng có thể sử dụng cái thứ hai

Hơn nữa, mã của chúng tôi đã được tải xuống chứa thư mục mã bootstrap được tải xuống từ liên kết đầu tiên. Điều này cũng chứa tùy chỉnh. css mà chúng tôi đã sử dụng để tùy chỉnh css gốc của Bootstrap

Sau khi giải nén, bạn sẽ thấy rằng có một số tệp và thư mục có sẵn trong thư mục gốc bootstrap-3. 0. 0

Các tệp CSS chính - bootstrap. css và phiên bản rút gọn của nó bootstrap-min. css có sẵn trong thư mục 'css' được đặt trong thư mục 'dist' trong bootstrap-3. 0. 0

Trong 'dist' có một thư mục 'js', chứa tệp JavaScript chính bootstrap. js và một phiên bản rút gọn của nó

Có một thư mục 'js' riêng trong thư mục gốc, chứa các plugin JavaScript khác nhau trong các tệp riêng biệt

Một thư mục 'js' khác được tìm thấy trong thư mục 'nội dung' trong thư mục gốc. Điều này giữ html5shiv. js là HTML5 shim, được sử dụng để hỗ trợ IE8. Cũng có phản hồi. tối thiểu. js, được sử dụng để hỗ trợ truy vấn phương tiện trong IE8. Thư mục này cũng chứa jquery. js mà plugin js của Bootstrap phụ thuộc vào

Có một thư mục 'ico' trong cùng một biểu tượng chứa biểu tượng yêu thích và biểu tượng cho các thiết bị di động khác nhau

Thư mục 'css' trong cùng đường dẫn chứa các tệp css để làm tài liệu

Thư mục '_includes' và '_layouts' chứa một số tệp cấu trúc bố cục mặc định có thể hữu ích cho việc tạo mẫu nhanh

thư mục 'less' trong thư mục gốc chứa một số. ít tập tin hơn. Nếu bạn đang phát triển ít dựa trên nền tảng hơn, những tệp này sẽ hữu ích cho bạn

Trong thư mục gốc. có những lời nói dối một số tập tin. Một số trong số chúng là các tệp HTML có thể được sử dụng để tạo mẫu cơ bản. Bên cạnh đó, có bower. json, ngăn xếp trình duyệt. json được sử dụng để biên dịch dựa trên Bower. Ngoài ra còn có nhà soạn nhạc. json và tệp YAML _config. yml

Bên cạnh việc tải xuống từ liên kết được cung cấp, bạn cũng có thể biên dịch tất cả các tệp CSS, js bằng lệnh sau -

$ bower install bootstrap

Bạn có thể sao chép repo Git của Bootstrap

git clone git://github.com/twbs/bootstrap.git

Đối với hướng dẫn này, chúng tôi đã tải xuống tệp Zip đơn giản và sẽ xử lý tệp đó

Khi bạn hoàn thành hướng dẫn này, chúng tôi khuyến khích bạn cài đặt bằng bower và cho chúng tôi biết nó hoạt động như thế nào

Máy chủ lưu trữ NetDNA đã biên dịch và rút gọn phiên bản Bootstrap CSS, Js và css chủ đề tùy chọn. Bạn có thể bao gồm chúng như sau

Phát triển với Bootstrap v3. 0. 0

HTML cơ bản

Sau đây là cấu trúc HTML cơ bản mà chúng tôi sẽ sử dụng cho dự án của mình

  
    
    
    
    

    
    
  
  
    
Hello, world!

    
    
    
    
  

Lưu ý rằng html5shiv. js và trả lời. tối thiểu. js được thêm vào mẫu này để hỗ trợ IE8. Thêm các tệp này vào Bootstrap phiên bản 3

Chúng tôi đã đặt bootstrap-3. 0. 0 trong thư mục twitter-bootstrap được đặt trong thư mục gốc của máy chủ web của chúng tôi. Tất cả các tệp html chúng tôi sẽ tạo sẽ được đặt trong thư mục twitter-bootstrap. Mục đích của việc nêu rõ điều này không gì khác ngoài việc giảm bớt quá trình triển khai của bạn

tùy biến

Chúng tôi sẽ tùy chỉnh các kiểu dáng bên ngoài của CSS của Bootstrap. Vì vậy, không làm ảnh hưởng đến tệp CSS gốc nằm trong thư mục dist của bootstrap-3. 0. 0, chúng tôi sẽ tạo một tệp CSS riêng có tên tùy chỉnh. css trong cùng một thư mục. Sau đó, chúng tôi sẽ bao gồm tệp CSS đó trong các tệp HTML của chúng tôi, giống như tệp CSS gốc. Bằng cách này, chúng tôi sẽ có thể ghi đè các kiểu mặc định khi bạn muốn, nhưng nếu Bootstrap tự nâng cấp, tệp CSS gốc cũng có thể nâng cấp mà không ảnh hưởng đến tùy chỉnh của chúng tôi. Chúng tôi khuyên bạn cũng nên làm theo phương pháp này trong quá trình phát triển của mình

Tạo điều hướng

Để tạo điều hướng sẽ thêm mã sau vào tệp HTML của chúng tôi, ngay sau thẻ body mở

Để điều hướng, Bootstrap sử dụng lớp 'thanh điều hướng' ở cấp vùng chứa. Vì vậy, nó được gán cho phần tử điều hướng chứa toàn bộ điều hướng

Chúng tôi đã sử dụng lớp 'nghịch đảo thanh điều hướng' cùng với việc thay đổi màu mặc định của thanh điều hướng thành màu tối thay vì màu sáng mặc định. Lớp 'navbar-fixed-top' đảm bảo rằng thanh điều hướng luôn cố định ở vị trí trên cùng khi chúng ta cuộn xuống trang HTML của mình

Sử dụng role="navigation" là tính năng mới trong Bootstrap V3. 0. 0 trong khi tạo điều hướng. Bootstrap khuyến nghị sử dụng điều này cho thanh điều hướng cho mục đích trợ năng

Tại thời điểm này, chúng tôi đã thêm 'padding-top. 80px;' . tập tin css. Số pixel pf mà bạn thêm làm phần đệm trên cùng vào nội dung có thể khác nhau, nhưng trừ khi bạn làm như vậy, phần trên cùng của nội dung của chúng tôi sau thanh điều hướng sẽ bị ẩn

Trong điều hướng vùng chứa, chúng tôi có một danh sách không có thứ tự với lớp 'nav' và 'navbar-nav'. Trong danh sách không có thứ tự này. mỗi mục danh sách chứa một liên kết trong điều hướng

lớp 'navbar-brand' được sử dụng để trình bày tên thương hiệu. Chúng tôi đã sử dụng một hình ảnh cho điều đó. Vì chiều cao hình ảnh của chúng tôi lớn hơn chiều cao dòng của thanh điều hướng nên chúng tôi đã thực hiện một số tùy chỉnh tại đây. Chúng tôi đã tăng thuộc tính 'line-height' của '. navbar-nav>li>a' thành 50px thay vì 20px mặc định. Chúng tôi cũng đã tạo cỡ chữ 16px

Đối với hầu hết các liên kết bên phải, chúng tôi đã thêm danh sách thả xuống. Đối với lớp 'thả xuống' đó được thêm vào li được liên kết, ngay sau đó, một mỏ neo được thêm vào có hai lớp 'thả xuống-chuyển đổi' và 'dấu mũ'. Anchor này thực sự giữ anchor text xã hội trong dự án của chúng tôi. Li này sau đó giữ một danh sách không có thứ tự trong danh sách này và một lần nữa, mỗi mục danh sách của danh sách lồng nhau đó chứa một liên kết được trình bày trong danh sách thả xuống

Chúng tôi đã thêm các plugin xã hội trong danh sách thả xuống. Li đầu tiên chứa mã đánh dấu cho Google Plus, li thứ hai chứa mã đánh dấu cho Facebook và li thứ ba chứa mã đánh dấu và một số tập lệnh js để hiển thị nút Twitter

Ngoài ra, bạn phải thêm mã đánh dấu và tập lệnh sau ngay sau thẻ nội dung mở để nút Facebook hoạt động

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Để Nút Twitter hoạt động, chúng tôi đã thêm đoạn mã sau ngay trước thẻ đóng nội dung

(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
 

Chúng tôi đã sử dụng phong cách sau để thêm một số bổ sung vào các nút xã hội với lớp 'xã hội'

Điều này hoàn thành điều hướng của chúng tôi

Tạo trình chiếu với băng chuyền

Để tạo trình chiếu ngay bên dưới thanh điều hướng, trên trang chủ của dự án của chúng tôi. chúng tôi sẽ sử dụng đánh dấu sau

  
  

    

    

    

  

  
  

    

      

      

        
Large Desktops are everywhere
        
Try 30 day trial now

      
    
    

      

      

        
Mobiles are outnumbering desktops
        
Try 30 day trial now

      
    

      

      

        
Enterprises are adopting Cloud computing fast
        
Try 30 day trial now