Tải xuống Bootstrap
Có một số cách dễ dàng để nhanh chóng bắt đầu với Bootstrap, mỗi cách phù hợp với một cấp độ kỹ năng và trường hợp sử dụng khác nhau. Đọc qua để xem những gì phù hợp với nhu cầu cụ thể của bạn Show
Biên dịch CSS, JS và phông chữCách nhanh nhất để tải Bootstrap là tải xuống các phiên bản CSS và JavaScript được biên dịch và rút gọn của chúng tôi, cùng với các phông chữ đi kèm. Không có tài liệu hoặc tệp nguồn gốc nào được bao gồm Tải xuống Bootstrap Tải xuống bổ sungTải mã nguồn mới nhấtNhận các tệp gốc cho tất cả CSS và JavaScript bằng cách tải xuống phiên bản mới nhất trực tiếp từ GitHub Sao chép hoặc rẽ nhánh qua GitHubSao chép toàn bộ dự án hoặc rẽ nhánh phiên bản Bootstrap của riêng bạn để biến nó thành của riêng bạn bằng cách truy cập chúng tôi trên GitHub Cài đặt với BowerCài đặt và quản lý các tệp gốc cho tất cả CSS và JavaScript, cùng với bản sao cục bộ của tài liệu, sử dụng Bower Bootstrap CDNNhững người ở NetDNA đã ân cần cung cấp hỗ trợ CDN cho CSS và JavaScript của Bootstrap. Để sử dụng, hãy trao đổi các phiên bản cục bộ của bạn để lấy các liên kết Bootstrap CDN được liệt kê bên dưới
LESS biên soạnNếu bạn tải xuống các tệp gốc, bạn cần biên dịch các tệp LESS của Bootstrap thành CSS có thể sử dụng được. Để làm được điều đó, Bootstrap chỉ chính thức hỗ trợ Recess, trình gợi ý CSS của Twitter được xây dựng dựa trên less. js Trong quá trình tải xuống, bạn sẽ tìm thấy các thư mục và tệp sau đây, nhóm các nội dung chung một cách hợp lý và cung cấp cả các biến thể được biên dịch và rút gọn Sau khi tải xuống, hãy giải nén thư mục đã nén để xem cấu trúc của (đã biên dịch) Bootstrap. Bạn sẽ thấy một cái gì đó như thế này
Đây là dạng cơ bản nhất của Bootstrap. các tệp được biên dịch để sử dụng nhanh chóng trong hầu hết mọi dự án web. Chúng tôi cung cấp CSS và JS đã biên dịch ( 0), cũng như CSS và JS đã biên dịch và rút gọn ( 1). Phông chữ từ Glyphicons được bao gồm, cũng như chủ đề Bootstrap tùy chọnyêu cầu jQueryXin lưu ý rằng tất cả các plugin JavaScript yêu cầu phải có jQuery, như được hiển thị trong mẫu dành cho người mới bắt đầu Sử dụng mẫu HTML siêu cơ bản hoặc đi sâu vào một vài ví dụ mà chúng tôi đã bắt đầu cho bạn. Chúng tôi khuyến khích mọi người lặp lại các ví dụ này và không chỉ sử dụng chúng như một kết quả cuối cùng Sao chép và dán HTML từ bên dưới để bắt đầu với tài liệu Bootstrap cơ bản
Xây dựng dựa trên mẫu cơ bản ở trên với nhiều thành phần của Bootstrap. Hãy xem một số mẹo nâng cao hơn để biết cách tùy chỉnh và xây dựng dựa trên chúng Mẫu dành cho người mới bắt đầuKhông có gì ngoài những điều cơ bản. CSS và JavaScript đã biên dịch cùng với vùng chứa lướiNhiều ví dụ về bố cục lưới với cả bốn tầng, lồng vào nhau, v.v. JumbotronXây dựng xung quanh jumbotron với thanh điều hướng và một số cột lưới cơ bản jumbotron hẹpXây dựng một trang tùy chỉnh hơn bằng cách thu hẹp vùng chứa mặc định và jumbotron thanh điều hướngMẫu siêu cơ bản bao gồm thanh điều hướng cùng với một số nội dung bổ sung Thanh điều hướng trên cùng tĩnhMẫu siêu cơ bản với thanh điều hướng trên cùng tĩnh cùng với một số nội dung bổ sung Cố định thanh điều hướngMẫu siêu cơ bản với thanh điều hướng trên cùng cố định cùng với một số nội dung bổ sung Trang đăng nhậpBố cục và thiết kế biểu mẫu tùy chỉnh cho biểu mẫu đăng nhập đơn giản Chân trang cố địnhĐính kèm một chân trang vào dưới cùng của chế độ xem khi nội dung ngắn hơn nó Chân trang cố định với thanh điều hướngĐính kèm chân trang vào dưới cùng của chế độ xem với thanh điều hướng cố định ở trên cùng Điều hướng hợp lýMở rộng trên thanh điều hướng mặc định và hơn thế nữa để tạo liên kết điều hướng hợp lý vải bốXây dựng menu điều hướng ngoài canvas có thể chuyển đổi để sử dụng với Bootstrap băng chuyềnTùy chỉnh thanh điều hướng và băng chuyền, sau đó thêm một số thành phần mới Bootstrap không phản hồiDễ dàng vô hiệu hóa khả năng phản hồi của Bootstrap theo tài liệu của chúng tôi Chủ đề BootstrapTải chủ đề Bootstrap tùy chọn để có trải nghiệm trực quan nâng cao Bạn không muốn trang web hoặc ứng dụng của mình được thu nhỏ trên các thiết bị khác nhau? . Đọc bên dưới hoặc xem ví dụ không phản hồi Các bước để tắt chế độ xem đáp ứngĐể tắt các tính năng phản hồi, hãy làm theo các bước sau. Xem nó hoạt động trong mẫu được sửa đổi bên dưới
Bạn vẫn sẽ cần Reply. js cho IE8 (vì các truy vấn phương tiện của chúng tôi vẫn ở đó và cần được chọn). Điều này chỉ vô hiệu hóa "trang web dành cho thiết bị di động" của Bootstrap Mẫu Bootstrap với phản hồi bị vô hiệu hóaChúng tôi đã thực hiện các bước trên và áp dụng chúng vào một ví dụ. Đọc mã nguồn của nó để xem những thay đổi cụ thể được gọi ra Xem ví dụ không phản hồi Những người muốn nâng cấp lên v3 nên sử dụng phần này làm hướng dẫn nâng cấp chung. Chúng tôi đã phác thảo một số thay đổi chính và cung cấp các bảng làm nổi bật những thay đổi chính. Để biết tổng quan, hãy đọc bài đăng trên blog thông báo Thay đổi lớp học chínhBảng tham chiếu cho các lớp đã thay đổi giữa v2. x và v3. 0 Bootstrap 2. Bootstrap 3. 0 9 4 1 2 3 4 5 6 7 8 9 30 31 32 33 34 35 36 37 38 39 30 31 32 33 34 35 36 37 38 39 30 31 32 33 34 35 36 37 38 39 30 31 32 33 34 35 36 37 38 39 30 31 32 33 34 35 36 37Có gì mớiChúng tôi đã thêm một số yếu tố mới và thay đổi một số yếu tố hiện có. Đây là các lớp học mới hoặc cập nhật của họ ElementDescriptionPanels 38 39 30 31 32 33List groups 34 35 36 37Glyphicons 38Jumbotron 36Tiny grid (<768 px) 8Small grid (>768 px) 41Medium grid (>992 px) 4Large grid (>1200 px) 43Offsets 44 6 46Push 47 48 49Pull 00 01 02Input groups 39 31 05Form controls 06 07Button group sizes 08 09 10Navbar text 11Navbar header 12Justified tabs / pills 13Responsive images 14Contextual table rows 15 16 17 18Contextual panels 19 20 21 22Modal 23 24Thumbnail image 33Well sizes 26 27Alert links 28Nội dung đã bị xóaCác yếu tố sau đã bị loại bỏ hoặc thay đổi trong v3 Phần tửRemove from 2. x3. 0 Hành động của Biểu mẫu tương đương 29N/A Biểu mẫu tìm kiếm 30N/AFlỏng chứa 9 4 (không còn lưới cố định)Hàng chất lỏng 1 2 (không còn lưới cố định)Navbar bên trong 35N/ADropdown menu con 36N/Căn chỉnh ATab 37 38 39N/AGhi chú bổ sungChúng tôi đã thực hiện nhiều thay đổi cơ bản trong v3 mà không rõ ràng ngay lập tức. Các lớp cơ sở, kiểu chính và hành vi đã được điều chỉnh để linh hoạt và phương pháp tiếp cận đầu tiên trên thiết bị di động của chúng tôi
Để biết thêm thông tin về các bản nâng cấp và đoạn mã từ cộng đồng, hãy xem Bootply Bootstrap được xây dựng để hoạt động tốt nhất trong các trình duyệt dành cho máy tính để bàn và thiết bị di động mới nhất, nghĩa là các trình duyệt cũ hơn và kém nâng cao hơn có thể nhận được phiên bản ít cách điệu hơn, mặc dù đầy đủ chức năng, của một số thành phần nhất định trình duyệt được hỗ trợCụ thể, chúng tôi hỗ trợ các phiên bản mới nhất sau đây
Không chính thức, Bootstrap sẽ có giao diện và hoạt động đủ tốt trong Chromium dành cho Linux và Internet Explorer 7, mặc dù chúng không được hỗ trợ chính thức Internet Explorer 8 và 9Internet Explorer 8 và 9 cũng được hỗ trợ, tuy nhiên, xin lưu ý rằng nhiều thuộc tính CSS3—e. g. , các góc tròn và bóng đổ—không được IE8 hỗ trợ. Thuộc tính 57 cũng không được hỗ trợ trong một trong hai phiên bản nàyNgoài ra, Internet Explorer 8 yêu cầu sử dụng phản hồi. js để bật hỗ trợ truy vấn phương tiện IE Các chế độ tương thíchBootstrap không được hỗ trợ trong các chế độ tương thích cũ của Internet Explorer. Để chắc chắn rằng bạn đang sử dụng chế độ kết xuất mới nhất cho IE, hãy xem xét đưa thẻ 2 thích hợp vào các trang của bạn 3Xem câu hỏi StackOverflow này để biết thêm thông tin Windows Phone 8 và Internet Explorer 10Internet Explorer 10 không phân biệt chiều rộng của thiết bị với chiều rộng của khung nhìn và do đó không áp dụng đúng các truy vấn phương tiện trong CSS của Bootstrap. Để giải quyết vấn đề này, bạn có thể tùy chọn thêm CSS và JavaScript sau để khắc phục sự cố này cho đến khi Microsoft đưa ra bản sửa lỗi 3 3Để biết thêm thông tin và hướng dẫn sử dụng, hãy đọc Windows Phone 8 và Device-Width Làm tròn phần trăm SafariTrong Safari dành cho Mac mới nhất, công cụ kết xuất của nó gặp một chút rắc rối với các vị trí thập phân dài của các lớp lưới 59 của chúng tôi, nghĩa là nếu bạn có 12 cột riêng lẻ, bạn sẽ nhận thấy chúng bị thiếu so với các hàng cột khác. Chúng tôi không thể làm gì nhiều ở đây (xem #9282) nhưng bạn có một số tùy chọn
Tuy nhiên, chúng tôi sẽ theo dõi vấn đề này và cập nhật mã của chúng tôi nếu chúng tôi có giải pháp dễ dàng Phương thức và thiết bị di độngTràn và cuộnHỗ trợ cho phần tử 61 khá hạn chế trong iOS và Android. Cuối cùng, khi bạn cuộn qua đầu hoặc cuối phương thức trong trình duyệt của một trong hai thiết bị đó, nội dung sẽ bắt đầu cuộnbàn phím ảoNgoài ra, hãy lưu ý rằng nếu bạn đang sử dụng đầu vào trong phương thức của mình - iOS có lỗi kết xuất không cập nhật vị trí của các phần tử cố định khi bàn phím ảo được kích hoạt. Có một vài cách giải quyết vấn đề này, bao gồm chuyển đổi các thành phần của bạn thành 62 hoặc gọi bộ đếm thời gian tập trung để cố gắng sửa vị trí theo cách thủ công. Điều này không được xử lý bởi Bootstrap, do đó, tùy thuộc vào bạn để quyết định giải pháp nào là tốt nhất cho ứng dụng của mìnhPhóng to trình duyệtThu phóng trang chắc chắn hiển thị các thành phần tạo tác trong một số thành phần, cả trong Bootstrap và phần còn lại của web. Tùy thuộc vào sự cố, chúng tôi có thể khắc phục sự cố (tìm kiếm trước rồi mở sự cố nếu cần). Tuy nhiên, chúng tôi có xu hướng bỏ qua những điều này vì chúng thường không có giải pháp trực tiếp nào ngoài cách giải quyết hacky Mặc dù chúng tôi không chính thức hỗ trợ bất kỳ plugin hoặc tiện ích bổ sung nào của bên thứ ba, nhưng chúng tôi cung cấp một số lời khuyên hữu ích để giúp tránh các sự cố tiềm ẩn trong dự án của bạn bản đồ GoogleNếu bạn đang sử dụng Google Maps trên một dự án Bootstrapped, bạn có thể gặp phải một số vấn đề về hiển thị do việc sử dụng 63 của chúng tôi. Trước đây, bạn cũng có thể gặp sự cố khi sử dụng 3 trên hình ảnh. Đoạn mã sau sẽ tránh được tất cả những vấn đề đó 3Bootstrap tuân theo các tiêu chuẩn web phổ biến và với nỗ lực tối thiểu, có thể được sử dụng để tạo các trang web có thể truy cập được bằng AT Bỏ qua điều hướngNếu điều hướng của bạn chứa nhiều liên kết và xuất hiện trước nội dung chính trong DOM, hãy thêm liên kết 65 ngay sau thẻ mở của bạn. (đọc tại sao) 3Tiêu đề lồng nhauMột "gotcha" khác liên quan đến cách bạn lồng yếu tố. Mục 508 quy định rằng tiêu đề lớn nhất của bạn phải là một 66 và tiêu đề tiếp theo phải là một, vân vân. Điều này khó đạt được trong thực tế, nhưng nếu tiêu đề lớn nhất trên trang web của bạn nhỏ hơn 38px mặc định của Bootstrap, bạn nên xem xét sửa đổi biểu định kiểu của mình trước khi sử dụng phần tử tiêu đề nhỏ hơntài nguyên bổ sungBootstrap được phát hành theo giấy phép Apache 2 và có bản quyền 2016 Twitter. Đun sôi thành các khối nhỏ hơn, nó có thể được mô tả với các điều kiện sau Nó cho phép bạn
Nó cấm bạn
Nó đòi hỏi bạn phải
Nó không yêu cầu bạn phải
Giấy phép Bootstrap đầy đủ nằm trong kho dự án để biết thêm thông tin Việc tùy chỉnh Bootstrap được thực hiện tốt nhất khi bạn coi nó như một phần phụ thuộc khác trong ngăn xếp phát triển của mình. Làm như vậy đảm bảo việc nâng cấp trong tương lai dễ dàng nhất có thể đồng thời giúp bạn làm quen với những điều phức tạp của khung Khi bạn đã tải xuống và bao gồm CSS của Bootstrap vào các mẫu của mình, bạn có thể chuyển sang tùy chỉnh các thành phần được bao gồm. Để làm như vậy, hãy tạo một biểu định kiểu mới (LESS, nếu bạn thích hoặc chỉ CSS đơn giản) để chứa các tùy chỉnh của bạn Biên dịch hoặc rút gọn?Trừ khi bạn có kế hoạch đọc một đoạn CSS được biên dịch tốt, hãy sử dụng phần rút gọn. Đó là cùng một mã, chỉ được nén. Ít băng thông hơn là tốt, đặc biệt là trong môi trường sản xuất Từ đó, bao gồm bất kỳ thành phần Bootstrap và nội dung HTML nào bạn cần để thiết lập mẫu của mình. Tốt nhất là bạn nên có ý tưởng sơ bộ về các sửa đổi cần thực hiện và nội dung cần đưa vào, vì vậy hãy đảm bảo dành một khoảng thời gian ngắn cho việc đó trước khi tiếp tục Tùy chỉnh các thành phầnCó nhiều mức độ khác nhau để tùy chỉnh các thành phần, nhưng hầu hết rơi vào hai phe. tùy chỉnh ánh sáng và đại tu toàn bộ hình ảnh. May mắn thay, có rất nhiều ví dụ về cả hai Chúng tôi xác định các tùy chỉnh ánh sáng chủ yếu là thay đổi lớp bề mặt, những thứ như màu sắc và phông chữ thay đổi đối với các thành phần Bootstrap hiện có. Một ví dụ tuyệt vời về điều này là Trung tâm dịch thuật Twitter (được mã hóa bởi @mdo). Hãy xem cách triển khai nút tùy chỉnh mà chúng tôi đã viết cho trang web này, 67Thay vì sử dụng các nút Bootstrap được cung cấp, chỉ yêu cầu một lớp để bắt đầu, 39, chúng tôi sẽ thêm lớp sửa đổi của riêng mình, 67. Điều này sẽ cung cấp cho chúng tôi một giao diện hơi tùy chỉnh với nỗ lực tối thiểu 3Trong biểu định kiểu tùy chỉnh, thêm CSS sau 4Việc tùy chỉnh các thành phần Bootstrap cần có thời gian, nhưng phải đơn giản. Thường xuyên xem mã nguồn và sao chép các bộ chọn bạn cần cho các sửa đổi của mình. Đặt chúng sau nguồn Bootstrap giúp ghi đè dễ dàng mà không phức tạp. Tóm lại, đây là quy trình làm việc cơ bản
Vượt ra ngoài các tùy chỉnh ánh sáng và chuyển sang đại tu trực quan cũng đơn giản như nút tùy chỉnh ở trên. Đối với một trang web như Karma, sử dụng Bootstrap làm thiết lập lại CSS với các sửa đổi lớn, cần phải thực hiện nhiều công việc hơn, nhưng cuối cùng cũng xứng đáng Phương pháp tùy chỉnh thay thếMặc dù không được khuyến nghị cho những người mới sử dụng Bootstrap, nhưng bạn có thể sử dụng một trong hai phương pháp thay thế để tùy chỉnh. Đầu tiên là sửa đổi nguồn. ít tệp hơn (làm cho việc nâng cấp trở nên cực kỳ khó khăn) và thứ hai là ánh xạ mã LESS nguồn tới các lớp của riêng bạn thông qua mixin. Hiện tại, cả hai tùy chọn đó đều không được ghi lại ở đây Loại bỏ chứng đầy hơi tiềm năngKhông phải tất cả các trang web và ứng dụng đều cần tận dụng mọi thứ mà Bootstrap cung cấp, đặc biệt là trong môi trường sản xuất nơi băng thông thực sự trở thành một vấn đề tài chính. Chúng tôi khuyến khích mọi người loại bỏ bất cứ thứ gì không được sử dụng với Công cụ tùy chỉnh của chúng tôi Sử dụng Công cụ tùy chỉnh, chỉ cần bỏ chọn bất kỳ thành phần, tính năng hoặc nội dung nào bạn không cần. Nhấn tải xuống và trao đổi các tệp Bootstrap mặc định với các tệp mới được tùy chỉnh này. Bạn sẽ nhận được Bootstrap vanilla, nhưng không có các tính năng mà *bạn* cho là không cần thiết. Tất cả các bản dựng tùy chỉnh bao gồm các phiên bản được biên dịch và rút gọn, vì vậy hãy sử dụng bất kỳ phiên bản nào phù hợp với bạn Bootstrap có miễn phí không?Tự do tải xuống và sử dụng Bootstrap, toàn bộ hoặc một phần, cho mục đích cá nhân, riêng tư, nội bộ công ty hoặc thương mại .
Bootstrap có phải được cài đặt không?Các chủ đề đi kèm với các plugin cần thiết, vì vậy bạn không cần cài đặt bootstrap , jquery, v.v. riêng biệt. Nhưng nếu bạn muốn thêm và/hoặc sửa đổi một thành phần bootstrap trong trang web của mình, bạn sẽ cần biết cách sử dụng nó.
Bootstrap là HTML hay CSS?Bootstrap là khung CSS phổ biến nhất để phát triển các trang web đáp ứng và ưu tiên thiết bị di động. |