Bootstrap [hiện tại v3. 3. 7] có một số cách dễ dàng để nhanh chóng bắt đầu, 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
CSS, JavaScript và phông chữ được biên dịch và rút gọn. 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
Bootstrap CDN
Những người ở jsDelivr đã ân cần cung cấp hỗ trợ CDN cho CSS và JavaScript của Bootstrap. Chỉ cần sử dụng các liên kết Bootstrap CDN này
Cài đặt với Bower
Bạn cũng có thể cài đặt và quản lý Ít hơn, CSS, JavaScript và phông chữ của Bootstrap bằng Bower
$ bower install bootstrap
Cài đặt với npm
Bạn cũng có thể cài đặt Bootstrap bằng npm
$ npm install bootstrap@3
$ bower install bootstrap
1 sẽ tải tất cả plugin jQuery của Bootstrap lên đối tượng jQuery. Bản thân mô-đun $ bower install bootstrap
2 không xuất bất cứ thứ gì. Bạn có thể tải từng plugin jQuery của Bootstrap theo cách thủ công bằng cách tải các tệp $ bower install bootstrap
3 trong thư mục cấp cao nhất của góiBootstrap's
$ bower install bootstrap
4 chứa một số siêu dữ liệu bổ sung theo các khóa sau
5 - đường dẫn đến tệp nguồn Ít hơn chính của Bootstrap$ bower install bootstrap
6 - đường dẫn đến CSS không được rút gọn của Bootstrap đã được biên dịch trước bằng cài đặt mặc định [không có tùy chỉnh]$ bower install bootstrap
Cài đặt với Composer
Bạn cũng có thể cài đặt và quản lý Ít hơn, CSS, JavaScript và phông chữ của Bootstrap bằng Trình soạn thảo
$ composer require twbs/bootstrap
Cần có Autoprefixer cho Ít/Sass
Bootstrap sử dụng Autoprefixer để xử lý các tiền tố của nhà cung cấp CSS. Nếu bạn đang biên dịch Bootstrap từ nguồn Ít/Sass của nó và không sử dụng Gruntfile của chúng tôi, bạn sẽ cần tự mình tích hợp Autoprefixer vào quy trình xây dựng của mình. Nếu bạn đang sử dụng Bootstrap được biên dịch sẵn hoặc sử dụng Gruntfile của chúng tôi, bạn không cần phải lo lắng về điều này vì Autoprefixer đã được tích hợp vào Gruntfile của chúng tôi
Bootstrap có thể tải xuống ở hai dạng, trong đó bạn sẽ tìm thấy các thư mục và tệp sau đây, nhóm các tài nguyên 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
Bootstrap được biên dịch sẵ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
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
Đây là dạng cơ bản nhất của Bootstrap. các tệp được biên dịch trước để 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 [
$ bower install bootstrap
7], cũng như CSS và JS đã biên dịch và rút gọn [$ bower install bootstrap
8]. Bản đồ nguồn CSS [$ bower install bootstrap
9] có sẵn để sử dụng với các công cụ dành cho nhà phát triển của một số trình duyệt nhất định. Phông chữ từ Glyphicons được bao gồm, cũng như chủ đề Bootstrap tùy chọnMã nguồn khởi động
Tải xuống mã nguồn Bootstrap bao gồm nội dung CSS, JavaScript và phông chữ được biên dịch sẵn, cùng với nguồn Ít hơn, JavaScript và tài liệu. Cụ thể hơn, nó bao gồm những điều sau đây và hơn thế nữa
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
$ npm install bootstrap@3
0, $ npm install bootstrap@3
1 và $ npm install bootstrap@3
2 là mã nguồn cho CSS, JS và phông chữ biểu tượng của chúng tôi [tương ứng]. Thư mục $ npm install bootstrap@3
3 bao gồm mọi thứ được liệt kê trong phần tải xuống được biên dịch trước ở trên. Thư mục $ npm install bootstrap@3
4 bao gồm mã nguồn cho tài liệu của chúng tôi và $ npm install bootstrap@3
5 của việc sử dụng Bootstrap. Ngoài ra, bất kỳ tệp nào khác được bao gồm đều cung cấp hỗ trợ cho các gói, thông tin giấy phép và phát triểnBootstrap sử dụng Grunt cho hệ thống xây dựng của nó, với các phương pháp thuận tiện để làm việc với khung. Đó là cách chúng tôi biên dịch mã của mình, chạy thử nghiệm và hơn thế nữa
Cài đặt Grunt
Để cài đặt Grunt, trước tiên bạn phải tải xuống và cài đặt nút. js [bao gồm npm]. npm là viết tắt của các mô-đun đóng gói nút và là một cách để quản lý các phụ thuộc phát triển thông qua nút. js
Sau đó, từ dòng lệnh- Cài đặt
6 trên toàn cầu với$ npm install bootstrap@3
7$ npm install bootstrap@3
- Điều hướng đến thư mục gốc
8, sau đó chạy$ npm install bootstrap@3
9. npm sẽ xem tệp$ npm install bootstrap@3
4 và tự động cài đặt các phụ thuộc cục bộ cần thiết được liệt kê ở đó$ bower install bootstrap
Khi hoàn tất, bạn sẽ có thể chạy các lệnh Grunt khác nhau được cung cấp từ dòng lệnh
Các lệnh Grunt có sẵn
$ composer require twbs/bootstrap
1 [Chỉ cần biên dịch CSS và JavaScript]
$ composer require twbs/bootstrap
Tạo lại thư mục
$ composer require twbs/bootstrap
2 với các tệp CSS và JavaScript được biên dịch và rút gọn. Là người dùng Bootstrap, đây thường là lệnh bạn muốn$ composer require twbs/bootstrap
3 [Xem]
$ composer require twbs/bootstrap
Xem các tệp Ít nguồn hơn và tự động biên dịch lại chúng thành CSS bất cứ khi nào bạn lưu thay đổi
$ composer require twbs/bootstrap
4 [Chạy thử nghiệm]
$ composer require twbs/bootstrap
Chạy JSHint và chạy thử nghiệm QUnit không đầu trong PhantomJS
$ composer require twbs/bootstrap
5 [Xây dựng và thử nghiệm nội dung tài liệu]
$ composer require twbs/bootstrap
Xây dựng và kiểm tra CSS, JavaScript và các nội dung khác được sử dụng khi chạy tài liệu cục bộ thông qua
$ composer require twbs/bootstrap
6$ composer require twbs/bootstrap
7 [Xây dựng hoàn toàn mọi thứ và chạy thử nghiệm]
$ composer require twbs/bootstrap
Biên dịch và giảm thiểu CSS và JavaScript, xây dựng trang web tài liệu, chạy trình xác thực HTML5 đối với tài liệu, tạo lại nội dung Trình tùy chỉnh, v.v. Yêu cầu Jekyll. Thường chỉ cần thiết nếu bạn đang tự hack Bootstrap
Xử lý sự cố
Nếu bạn gặp sự cố khi cài đặt các phụ thuộc hoặc chạy các lệnh Grunt, trước tiên hãy xóa thư mục
$ composer require twbs/bootstrap
8 được tạo bởi npm. Sau đó, chạy lại $ npm install bootstrap@3
9Bắt đầu với mẫu HTML cơ bản này hoặc sửa đổi. Chúng tôi hy vọng bạn sẽ tùy chỉnh các mẫu và ví dụ của chúng tôi, điều chỉnh chúng cho phù hợp với nhu cầu của bạn
Sao chép HTML bên dưới để bắt đầu làm việc với một tài liệu Bootstrap tối thiểu
Bootstrap 101 Template
Hello, world!
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. Chúng tôi khuyến khích bạn tùy chỉnh và điều chỉnh Bootstrap cho phù hợp với nhu cầu của dự án cá nhân của bạn
Lấy mã nguồn cho mọi ví dụ bên dưới bằng cách tải xuống kho lưu trữ Bootstrap. Các ví dụ có thể được tìm thấy trong thư mục
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
0Sử dụng khuôn khổ
Mẫu dành cho người mới bắt đầu
Khô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
Chủ đề Bootstrap
Tải chủ đề Bootstrap tùy chọn để có trải nghiệm trực quan nâng cao
lưới
Nhiều ví dụ về bố cục lưới với cả bốn tầng, lồng vào nhau, v.v.
Jumbotron
Xâ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ẹp
Xâ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ướng
Mẫ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ĩnh
Mẫ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ướng
Mẫ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
thành phần tùy chỉnh
Che phủ
Mẫu một trang để xây dựng các trang chủ đơn giản và đẹp mắt
băng chuyền
Tù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
Blog
Bố cục blog hai cột đơn giản với điều hướng, tiêu đề và loại tùy chỉnh
bảng điều khiển
Cấu trúc cơ bản cho bảng điều khiển quản trị với thanh bên và thanh điều hướng cố định
Trang đăng nhập
Bố 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
thí nghiệm
Bootstrap không phản hồi
Dễ dàng vô hiệu hóa khả năng phản hồi của Bootstrap
ngoài canvas
Xây dựng menu điều hướng ngoài canvas có thể chuyển đổi để sử dụng với Bootstrap
Bootlint là công cụ linter HTML Bootstrap chính thức. Nó tự động kiểm tra một số lỗi HTML phổ biến trong các trang web đang sử dụng Bootstrap theo cách khá "vanilla". Các thành phần/widget của Vanilla Bootstrap yêu cầu các phần của DOM tuân theo các cấu trúc nhất định. Bootlint kiểm tra xem các phiên bản của các thành phần Bootstrap có cấu trúc HTML chính xác không. Cân nhắc thêm Bootlint vào chuỗi công cụ phát triển web Bootstrap của bạn để không có lỗi phổ biến nào làm chậm quá trình phát triển dự án của bạn
Luôn cập nhật về sự phát triển của Bootstrap và tiếp cận cộng đồng với những tài nguyên hữu ích này
Bạn cũng có thể theo dõi @getbootstrap trên Twitter để biết tin đồn mới nhất và video âm nhạc tuyệt vời
Bootstrap tự động điều chỉnh các trang của bạn cho các kích thước màn hình khác nhau. Dưới đây là cách tắt tính năng này để trang của bạn hoạt động như ví dụ không phản hồi này
Các bước để vô hiệu hóa khả năng phản hồi của trang
- Bỏ qua khung nhìn
1 được đề cập trongbootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.min.css.map ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2
- Ghi đè
2 trênbootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.min.css.map ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2
3 cho mỗi tầng lưới có chiều rộng duy nhất, ví dụ:bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.min.css.map ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2
4 Hãy chắc chắn rằng điều này xuất hiện sau CSS Bootstrap mặc định. Bạn có thể tùy chọn tránhbootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.min.css.map ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2
5 bằng truy vấn phương tiện hoặc một số bộ chọn-fubootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.min.css.map ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2
- Nếu sử dụng thanh điều hướng, hãy xóa tất cả hành vi thu gọn và mở rộng thanh điều hướng
- Đối với bố cục dạng lưới, hãy sử dụng lớp
6 bổ sung hoặc thay cho lớp trung bình/lớn. Đừng lo lắng, lưới thiết bị cực nhỏ chia tỷ lệ cho mọi độ phân giảibootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.min.css.map ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2
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 xử lý]. Điều này vô hiệu hóa các khía cạnh "trang web dành cho thiết bị di động" của Bootstrap
Mẫu Bootstrap bị vô hiệu hóa khả năng phản hồi
Chúng tôi đã áp dụng các bước này cho một ví dụ. Đọc mã nguồn của nó để xem những thay đổi cụ thể được triển khai
Xem ví dụ không phản hồi
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 có thể hiển thị các kết xuất theo kiểu khác, 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 của các trình duyệt và nền tảng sau
Các trình duyệt thay thế sử dụng phiên bản mới nhất của WebKit, Blink hoặc Gecko, dù trực tiếp hay thông qua API chế độ xem web của nền tảng, đều không được hỗ trợ rõ ràng. Tuy nhiên, Bootstrap [trong hầu hết các trường hợp] cũng sẽ hiển thị và hoạt động chính xác trong các trình duyệt này. Thông tin hỗ trợ cụ thể hơn được cung cấp dưới đây
Thiêt bị di động
Nói chung, Bootstrap hỗ trợ các phiên bản mới nhất của các trình duyệt mặc định của mỗi nền tảng chính. Lưu ý rằng các trình duyệt proxy [chẳng hạn như Opera Mini, chế độ Turbo của Opera Mobile, UC Browser Mini, Amazon Silk] không được hỗ trợ
ChromeFirefoxSafariAndroidSupportedSupportedN/AiOSSupportedSupportedSupported
Trình duyệt máy tính để bàn
Tương tự, các phiên bản mới nhất của hầu hết các trình duyệt máy tính để bàn đều được hỗ trợ
ChromeFirefoxInternet ExplorerOperaSafariMacSupportedSupportedN/ASupportedSupportedWindowsSupportedSupportedSupportedSupportedNot supported
Trên Windows, chúng tôi hỗ trợ Internet Explorer 8-11
Đối với Firefox, ngoài bản phát hành ổn định thông thường mới nhất, chúng tôi cũng hỗ trợ phiên bản Bản phát hành hỗ trợ mở rộng [ESR] mới nhất của Firefox
Không chính thức, Bootstrap sẽ có giao diện và hoạt động đủ tốt trong Chromium và Chrome dành cho Linux, Firefox dành cho Linux và Internet Explorer 7, cũng như Microsoft Edge, mặc dù chúng không được hỗ trợ chính thức
Để biết danh sách một số lỗi trình duyệt mà Bootstrap phải vật lộn với, hãy xem Bức tường lỗi trình duyệt của chúng tôi
Internet Explorer 8 và 9
Internet Explorer 8 và 9 cũng được hỗ trợ, tuy nhiên, xin lưu ý rằng một số thuộc tính CSS3 và phần tử HTML5 không được các trình duyệt này hỗ trợ đầy đủ. Ngoài ra, Internet Explorer 8 yêu cầu sử dụng Reply. js để bật hỗ trợ truy vấn phương tiện
Tính năngInternet Explorer 8Internet Explorer 9_______10_______7Không được hỗ trợĐược hỗ trợ
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
8Không được hỗ trợĐược hỗ trợbootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
9Không được hỗ trợĐược hỗ trợ, với tiền tố bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
0_______14_______1Không được hỗ trợbootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
2Không được hỗ trợTruy cập Tôi có thể sử dụng. để biết chi tiết về hỗ trợ trình duyệt của các tính năng CSS3 và HTML5
Internet Explorer 8 và Phản hồi. js
Cẩn thận với những lưu ý sau khi sử dụng Reply. js trong môi trường sản xuất và phát triển của bạn cho Internet Explorer 8
Trả lời. js và CSS tên miền chéo
Sử dụng trả lời. js với CSS được lưu trữ trên một miền [phụ] khác [ví dụ: trên CDN] yêu cầu một số thiết lập bổ sung. để biết chi tiết
Trả lời. js và bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
3
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
Do các quy tắc bảo mật của trình duyệt, hãy trả lời. js không hoạt động với các trang được xem qua giao thức
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
3 [như khi mở tệp HTML cục bộ]. Để kiểm tra các tính năng phản hồi trong IE8, hãy xem các trang của bạn qua HTTP[S]. để biết chi tiếtTrả lời. js và bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
5
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
Trả lời. js không hoạt động với CSS được tham chiếu qua
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
5. Cụ thể, một số cấu hình Drupal được biết là sử dụng bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
5. để biết chi tiếtInternet Explorer 8 và kích thước hộp
IE8 không hỗ trợ đầy đủ
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
8 khi kết hợp với bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
9,
Bootstrap 101 Template
Hello, world!
0,
Bootstrap 101 Template
Hello, world!
1 hoặc
Bootstrap 101 Template
Hello, world!
2. Vì lý do đó, kể từ v3. 0. 1, chúng tôi không còn sử dụng
Bootstrap 101 Template
Hello, world!
0 trên bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
3sInternet Explorer 8 và @font-face
IE8 có một số vấn đề với
Bootstrap 101 Template
Hello, world!
5 khi kết hợp với
Bootstrap 101 Template
Hello, world!
6. Bootstrap sử dụng sự kết hợp đó với Glyphicons của nó. Nếu một trang được lưu trong bộ nhớ cache và được tải mà không cần chuột trên cửa sổ [i. e. nhấn nút làm mới hoặc tải thứ gì đó trong iframe] thì trang sẽ được hiển thị trước khi tải phông chữ. Di chuột qua trang [nội dung] sẽ hiển thị một số biểu tượng và di chuột qua các biểu tượng còn lại cũng sẽ hiển thị các biểu tượng đó. Xem vấn đề #13863 để biết chi tiếtIE Các chế độ tương thích
Bootstrap 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ế độ hiển thị mới nhất cho IE, hãy xem xét đưa thẻ
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
1 thích hợp vào các trang của bạn
Xác nhận chế độ tài liệu bằng cách mở các công cụ sửa lỗi. nhấn F12 và kiểm tra "Chế độ tài liệu"
Thẻ này được bao gồm trong tất cả các tài liệu và ví dụ của Bootstrap để đảm bảo hiển thị tốt nhất có thể trong mỗi phiên bản Internet Explorer được hỗ trợ
Xem câu hỏi StackOverflow này để biết thêm thông tin
Internet Explorer 10 trong Windows 8 và Windows Phone 8
Internet 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. Thông thường, bạn chỉ cần thêm một đoạn CSS nhanh để sửa lỗi này
@-ms-viewport { width: device-width; }
Tuy nhiên, điều này không hoạt động đối với các thiết bị chạy phiên bản Windows Phone 8 cũ hơn Update 3 [a. k. a. GDR3], vì nó khiến các thiết bị như vậy hiển thị chế độ xem chủ yếu là máy tính để bàn thay vì chế độ xem "điện thoại" hẹp. Để giải quyết vấn đề này, bạn cần bao gồm CSS và JavaScript sau đây để khắc phục lỗi
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
$ bower install bootstrap
0Để 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ưu ý, chúng tôi đưa điều này vào tất cả các tài liệu và ví dụ của Bootstrap để minh họa
Làm tròn phần trăm Safari
Công cụ kết xuất của các phiên bản Safari trước v7. 1 cho OS X và Safari cho iOS v8. 0 gặp một số rắc rối với số lượng chữ số thập phân được sử dụng trong các lớp lưới
Bootstrap 101 Template
Hello, world!
8 của chúng tôi. Vì vậy, nếu bạn có 12 cột lưới riêng lẻ, bạn sẽ nhận thấy rằng chúng xuất hiện ngắn hơn so với các hàng cột khác. Bên cạnh việc nâng cấp Safari/iOS, bạn có một số tùy chọn để giải quyết- Thêm
9 vào cột lưới cuối cùng của bạn để có được căn chỉnh cứngBootstrap 101 Template Hello, world!
- Tinh chỉnh tỷ lệ phần trăm của bạn theo cách thủ công để làm tròn hoàn hảo cho Safari [khó hơn tùy chọn đầu tiên]
Phương thức, thanh điều hướng và bàn phím ảo
Tràn và cuộn
Hỗ trợ cho
0 trên phần tử 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ộn. Xem lỗi Chrome #175502 [đã sửa trong Chrome v40] và lỗi WebKit #153852Trường văn bản iOS và cuộn
Kể từ iOS 9. 3, trong khi một phương thức đang mở, nếu lần chạm đầu tiên của cử chỉ cuộn nằm trong ranh giới của một văn bản
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
1 hoặc một bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
1