Bootstrap, từ Twitter bằng tiếng việt

Plugin Modal của chúng tôi là một plugin siêu mỏng dựa trên plugin js modal truyền thống, đặc biệt chú ý chỉ bao gồm các chức năng đơn giản mà chúng tôi yêu cầu ở đây tại twitter.

Tải xuống

Sử dụng bootstrap-modal

$ ( '# my-modal' ). phương thức ( tùy chọn )

Tùy chọn

Tên	loại hình	mặc định	sự mô tả
phông nền	boolean	sai	Bao gồm một phần tử phông nền-phương thức
bàn phím	boolean	sai	Đóng phương thức khi nhấn phím thoát
buổi bieu diễn	boolean	sai	Mở phương thức khi khởi tạo lớp

Đánh dấu

Bạn có thể kích hoạt các chế độ trên trang của mình một cách dễ dàng mà không cần phải viết một dòng javascript. Chỉ cần cung cấp cho một phần tử một data-controls-modalthuộc tính tương ứng với id phần tử phương thức và khi được nhấp vào, nó sẽ khởi chạy phương thức của bạn. Để thêm các tùy chọn phương thức, chỉ cần bao gồm chúng dưới dạng thuộc tính dữ liệu.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true"> Khởi chạy phương thức </a>

Lưu ý Nếu bạn muốn phương thức của mình hoạt động trong và ngoài, chỉ cần thêm một .fadelớp vào .modalphần tử của bạn (tham khảo bản trình diễn để xem điều này trong hoạt động).

Phương pháp

.modal (tùy chọn)

Kích hoạt nội dung của bạn như một phương thức. Chấp nhận một tùy chọn tùy chọn object.

$ ( '# my-modal' ). phương thức ({
  closeOnEscape : true 
})

.modal ('chuyển đổi')

Chuyển đổi một phương thức theo cách thủ công.

$ ( '# my-modal' ). modal ( 'chuyển đổi' )

.modal ('hiển thị')

Mở một phương thức theo cách thủ công.

$ ( '# my-modal' ). modal ( 'show' )

.modal ('ẩn')

Ẩn một phương thức theo cách thủ công.

$ ( '# my-modal' ). modal ( 'ẩn' )

.modal (đúng)

Trả về một cá thể lớp phương thức phần tử.

$ ( '# my-modal' ). phương thức ( đúng )

Thông báo Ngoài ra, điều này có thể được truy xuất với $().data('modal').

Sự kiện

Lớp phương thức của Bootstrap cho thấy một vài sự kiện để kết nối vào chức năng phương thức.

Biến cố	Sự mô tả
buổi bieu diễn	Sự kiện này kích hoạt ngay lập tức khi `show`phương thức thể hiện được gọi.
cho xem	Sự kiện này được kích hoạt khi phương thức đã được hiển thị cho người dùng (sẽ đợi quá trình chuyển đổi css hoàn tất).
ẩn giấu	Sự kiện này được kích hoạt ngay lập tức khi `hide`phương thức thể hiện đã được gọi.
ẩn giấu	Sự kiện này được kích hoạt khi phương thức đã hoàn tất bị ẩn khỏi người dùng (sẽ đợi quá trình chuyển đổi css hoàn tất).

$ ( '# my-modal' ). bind ( 'hidden' , function () {   
  // làm việc gì đó ...
})

Thử nghiệm

Plugin này là để thêm tương tác scrollspy (điều hướng cập nhật tự động) vào thanh trên cùng của bootstrap.

Tải xuống

Sử dụng boostrap-scrollspy.js

$ ( '#topbar' ). dropdown ()

Đánh dấu

Để dễ dàng thêm hành vi cuộn lên vào điều hướng của bạn, chỉ cần thêm data-scrollspythuộc tính vào .topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>

Phương pháp

$ (). scrollspy ()

Tự động kích hoạt các nút điều hướng theo vị trí cuộn của người dùng.

$ ( 'body> .topbar' ). scrollSpy ()

Lưu ý Các thẻ neo trên cùng phải có các mục tiêu id có thể phân giải được. Ví dụ, a <a href="#home">home</a>phải tương ứng với một cái gì đó trong dom như <div id="home"></div>.

.scrollspy ('làm mới')

Các nút điều hướng sẽ lưu vào bộ nhớ cache và tọa độ phần cho hiệu suất. Nếu bạn cần cập nhật bộ nhớ cache này (có thể là nếu bạn có nội dung động), chỉ cần gọi phương thức làm mới này. Nếu bạn đã sử dụng thuộc tính data để xác định cuộn trang của mình, chỉ cần gọi refresh trên nội dung.

$ ( 'body' ). scrollspy ( 'làm mới' )

Thử nghiệm

Kiểm tra điều hướng thanh trên cùng trên trang này.

Plugin này bổ sung chức năng tab động và nhanh chóng.

Tải xuống

Sử dụng boostrap-tabs.js

$ ( '.tabs' ). tab ()

Đánh dấu

Bạn có thể kích hoạt điều hướng tab hoặc máy tính bảng mà không cần viết bất kỳ javascript nào bằng cách chỉ cần cung cấp cho chúng một data-tabshoặc data-pillsthuộc tính.

 <ul class = "tabs" data-tabs = "tabs" > ... </ul>

Phương pháp

$ (). tab hoặc $ (). thuốc

Kích hoạt chức năng tab và viên thuốc cho một vùng chứa nhất định. Các liên kết tab phải tham chiếu đến id trong tài liệu.

<ul class = "tabs" > 
  <li class = "active" > <a href = "#home"> Trang chủ </a> </li>  
  <li> <a href = "#profile"> Hồ sơ </a> </li> 
  <li> <a href = "#messages"> Tin nhắn </a> </li> 
  <li> <a href = "#settings"> Cài đặt </a> </li> 
</ul>
 
<div class = "tablet-content" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profile" > ... </div> 
  <div id = "messages" > ... </div> 
  <div id = "settings" > ... </div> 
</ul>
 
<script>
  $ ( function () {  
    $ ( '.tabs' ). tab ()
  })
</script>

Thử nghiệm

Chất liệu denim thô chắc hẳn bạn chưa từng nghe nói đến quần short jean Austin. Nesciunt đậu phụ stumptown aliqua, làm sạch tổng thể retro synth. Ria mép khuôn mẫu, williamsburg carles vegan helvetica. Người bán thịt người bán thịt retro keffiyeh dreamcatcher synth. Áo len Cosby eu banh mi, qui irure terry richardson ex ink. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan may mặc của mỹ, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.

Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.

Dựa trên plugin jQuery.tipsy tuyệt vời được viết bởi Jason Frame; twipsy là phiên bản cập nhật, không dựa vào hình ảnh, sử dụng css3 cho hoạt ảnh và thuộc tính dữ liệu để lưu trữ tiêu đề!

Tải xuống

Sử dụng bootstrap-twipsy.js

$ ( '#example' ). twipsy ( tùy chọn )

Tùy chọn

Tên	loại hình	mặc định	sự mô tả
hoạt hình	boolean	thật	áp dụng một chuyển đổi mờ dần css cho chú giải công cụ
delayIn	con số	0	độ trễ trước khi hiển thị chú giải công cụ (mili giây)
delayOut	con số	0	trì hoãn trước khi ẩn chú giải công cụ (mili giây)
dự phòng	sợi dây	''	văn bản để sử dụng khi không có tiêu đề chú giải công cụ
vị trí	sợi dây	'ở trên'	cách định vị chú giải công cụ - ở trên \| dưới đây \| trái \| bên phải
html	boolean	sai	cho phép nội dung html trong chú giải công cụ
trực tiếp	boolean	sai	sử dụng ủy quyền sự kiện thay vì các trình xử lý sự kiện riêng lẻ
bù lại	con số	0	độ lệch pixel của chú giải công cụ từ phần tử mục tiêu
Tiêu đề	chuỗi \| hàm số	'Tiêu đề'	thuộc tính hoặc phương pháp để truy xuất văn bản tiêu đề
Kích hoạt	sợi dây	'bay lượn'	cách kích hoạt chú giải công cụ - di chuột \| tiêu điểm \| thủ công

Phương pháp

$ (). twipsy (tùy chọn)

Đính kèm một trình xử lý twipsy vào một tập hợp phần tử.

.twipsy ('show')

Tiết lộ một yếu tố twipsy.

$ ( '#element' ). twipsy ( 'show' )

.twipsy ('ẩn')

Ẩn một phần tử twipsy.

$ ( '#element' ). twipsy ( 'ẩn' )

.twipsy (true)

Trả về một cá thể lớp twipsy phần tử.

$ ( '#element' ). twipsy ( đúng )

Thông báo Ngoài ra, điều này có thể được truy xuất với $().data('twipsy').

Thử nghiệm

Những chiếc quần bó sát cấp độ tiếp theo có thể bạn chưa từng nghe nói về chúng. Ảnh gian hàng râu vải thô denim letterpress túi đưa tin thuần chay stumptown. Seitan từ trang trại đến bàn ăn, quần áo Mỹ 8-bit quinoa bền vững fixie của mcsweeney có một chambray vinyl richardson terry. Beard stumptown, cardigans banh mi lomo Thundercats. Đậu phụ diesel sinh học williamsburg marfa, bánh chambray thuần chay làm sạch 4 loko mcsweeney. Một nghệ nhân thực sự mỉa mai bất cứ thứ gì keytar, scenester farm-to-table banky Austin twitter xử lý virus cà phê nguyên liệu denim freegan.

Plugin popover cung cấp một giao diện đơn giản để thêm popover vào ứng dụng của bạn. Nó mở rộng plugin boostrap-twipsy.js , vì vậy hãy nhớ lấy tệp đó khi bao gồm các cửa sổ bật lên trong dự án của bạn!

Tải xuống

Sử dụng boostrap-popover.js

$ ( '#example' ). popover ( tùy chọn )

Tùy chọn

Tên	loại hình	mặc định	sự mô tả
hoạt hình	boolean	thật	áp dụng một chuyển đổi mờ dần css cho chú giải công cụ
delayIn	con số	0	độ trễ trước khi hiển thị chú giải công cụ (mili giây)
delayOut	con số	0	trì hoãn trước khi ẩn chú giải công cụ (mili giây)
dự phòng	sợi dây	''	văn bản để sử dụng khi không có tiêu đề chú giải công cụ
vị trí	sợi dây	'bên phải'	cách định vị chú giải công cụ - ở trên \| dưới đây \| trái \| bên phải
html	boolean	sai	cho phép nội dung html trong chú giải công cụ
trực tiếp	boolean	sai	sử dụng ủy quyền sự kiện thay vì các trình xử lý sự kiện riêng lẻ
bù lại	con số	0	độ lệch pixel của chú giải công cụ từ phần tử mục tiêu
Tiêu đề	chuỗi \| hàm số	'Tiêu đề'	thuộc tính hoặc phương pháp để truy xuất văn bản tiêu đề
Nội dung	chuỗi \| hàm số	'dữ liệu-nội dung'	thuộc tính hoặc phương pháp để truy xuất văn bản nội dung
Kích hoạt	sợi dây	'bay lượn'	cách kích hoạt chú giải công cụ - di chuột \| tiêu điểm \| thủ công

Phương pháp

$ (). popover (tùy chọn)

Khởi tạo các cửa sổ bật lên cho một tập hợp phần tử.

.popover ('show')

Tiết lộ một phần tử bật lên.

$ ( '#element' ). popover ( 'show' )

.popover ('ẩn')

Ẩn một phần tử bật lên.

$ ( '#element' ). popover ( 'ẩn' )

Thử nghiệm

di chuột để tìm cửa sổ bật lên

Plugin cảnh báo là một lớp siêu nhỏ để thêm chức năng đóng vào cảnh báo.

Tải xuống

Sử dụng bootstrap-alerts.js

$ ( ".alert-message" ). alert ()

Đánh dấu

Chỉ cần thêm một data-alertthuộc tính vào thông báo cảnh báo của bạn để tự động cung cấp cho chúng chức năng đóng.

Phương pháp

$ (). alert ()

Kết hợp tất cả các cảnh báo với chức năng đóng. Để cảnh báo của bạn hiển thị hoạt ảnh khi đóng cửa, hãy đảm bảo rằng chúng đã áp dụng loại .fadevà .inlớp cho chúng.

.alert ('đóng')

Đóng một cảnh báo.

$ ( ".alert-message" ). alert ( 'đóng' )

Thử nghiệm

Guacamole thánh! Tốt nhất bạn nên tự kiểm tra, trông bạn không quá ổn.

Oh snap! Bạn có một lỗi! Thay đổi cái này cái kia và thử lại. Duis mollis, est non rowo luctus, nisi erat porttitor ligula, eget lacinia odio sem perf elit. Cras mattis consectetur purus sit amet fermentum.

Thực hiện hành động này Hoặc làm điều này

Bootstrap JS

Javascript cho Bootstrap

Tên dự án

ScrollSpy bootstrap-scrollspy.js

Sử dụng boostrap-scrollspy.js

Đánh dấu

Phương pháp

$ (). scrollspy ()

.scrollspy ('làm mới')

Thử nghiệm

Các tab bootstrap-tabs.js

Sử dụng boostrap-tabs.js

Đánh dấu

Phương pháp

$ (). tab hoặc $ (). thuốc

Thử nghiệm

Twipsy bootstrap-twipsy.js

Sử dụng bootstrap-twipsy.js

Tùy chọn

Phương pháp

$ (). twipsy (tùy chọn)

.twipsy ('show')

.twipsy ('ẩn')

.twipsy (true)

Thử nghiệm

Popovers bootstrap-popover.js

Sử dụng boostrap-popover.js

Tùy chọn

Phương pháp

$ (). popover (tùy chọn)

.popover ('show')

.popover ('ẩn')

Thử nghiệm

Cảnh báo bootstrap-alerts.js

Sử dụng bootstrap-alerts.js

Đánh dấu

Phương pháp

$ (). alert ()

.alert ('đóng')

Thử nghiệm

Bootstrap JS

Modals bootstrap-modal.js

Sử dụng bootstrap-modal

Tùy chọn

Đánh dấu

Phương pháp

.modal (tùy chọn)

.modal ('chuyển đổi')

.modal ('hiển thị')

.modal ('ẩn')

.modal (đúng)

Sự kiện

Thử nghiệm

Tiêu đề phương thức

Dropdown bootstrap-dropdown.js

Sử dụng boostrap-dropdown.js

Đánh dấu

Phương pháp

$ (). thả xuống ()

Thử nghiệm

Tên dự án

ScrollSpy bootstrap-scrollspy.js

Sử dụng boostrap-scrollspy.js

Đánh dấu

Phương pháp

$ (). scrollspy ()

.scrollspy ('làm mới')

Thử nghiệm

Các tab bootstrap-tabs.js

Sử dụng boostrap-tabs.js

Đánh dấu

Phương pháp

$ (). tab hoặc $ (). thuốc

Thử nghiệm

Twipsy bootstrap-twipsy.js

Sử dụng bootstrap-twipsy.js

Tùy chọn

Phương pháp

$ (). twipsy (tùy chọn)

.twipsy ('show')

.twipsy ('ẩn')

.twipsy (true)

Thử nghiệm

Popovers bootstrap-popover.js

Sử dụng boostrap-popover.js

Tùy chọn

Phương pháp

$ (). popover (tùy chọn)

.popover ('show')

.popover ('ẩn')

Thử nghiệm

Cảnh báo bootstrap-alerts.js

Sử dụng bootstrap-alerts.js

Đánh dấu

Phương pháp

$ (). alert ()

.alert ('đóng')

Thử nghiệm