CakePHP với Bootstrap (từ Twitter)

Question

Tôi mới dùng CakePHP và tôi muốn biết cách sử dụng Boostrap từ Twitter trong bố cục kết hợp với bánh.

Quan tâm chính của tôi là làm cho Trình trợ giúp biểu mẫu tiếp tục hoạt động bình thường, bởi vì tôi nghĩ rằng nó sử dụng các lớp CSS được cấu hình sẵn và nếu tôi thay đổi css mặc định, tôi tưởng tượng Trình trợ giúp biểu mẫu sẽ dừng hoạt động Nên.

Tôi đã đọc hướng dẫn này nhưng dường như không hoàn chỉnh.
Build a PHP application using CakePHP and (twitter) Bootstrap, Part 1

Có ai đã làm điều này không?

Cảm ơn bạn! : D

Answer 1

Tất cả câu trả lời hiện tại yêu cầu thay đổi đối với tệp xem.

Plugin sau sẽ "Bootstrap-IFY" quan điểm hiện tại của bạn mà không cần bất kỳ thay đổi mã/đánh dấu:

https://github.com/slywalker/TwitterBootstrap

Tất cả bạn cần làm là alias các FormHelper và HtmlHelper sao cho tất cả các cuộc gọi hiện tại của bạn để $this->Form & $this->Html sẽ được xử lý bởi plugin thay thế.

Không thể dễ dàng hơn thế :)

Answer 2

CSS hoàn toàn là thuyết trình; làm thế nào nó có thể ảnh hưởng đến helper biểu mẫu từ làm việc như nó phải không?

Một số lớp xác thực CSS có thể cần làm lại cũng như những gì Cake trả về khi gặp lỗi.

Bạn có thể dễ dàng sửa đổi đầu ra bằng cách sử dụng tùy chọn error:

$this->Form->input('Model.field', array('error' => array('wrap' => 'span', 
               'class' => 'boostrap-error'))); 

http://book.cakephp.org/view/1401/options-error

Answer 3

tôi đang làm điều tương tự cho một ứng dụng, và tôi đã tìm thấy các lớp CSS cho các yếu tố hình thức phù hợp lên khá tốt thực sự.

yếu tố hình thức Bootstrap Twitter giống như thế này:

<div class="clearfix"> 
    <label for="xlInput">X-Large input</label> 
    <div class="input"> 
    <input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" /> 
    </div> 
</div> 

Và FormHelper CakePHP của tạo các yếu tố như thế này:

<div class="input text"> 
    <label for="UserName">Name</label> 
    <input name="data[User][name]" type="text" value="" id="UserName" /> 
</div> 

Sự khác biệt chính là nhãn bên ngoài div trong Bootstrap. FormHelper cho phép bạn thiết lập các lớp tùy chỉnh như array('class' => 'clearfix').

Lớp .input trong Bootstrap được xác định trong forms.less và chỉ đặt margin-left: 150px; để di chuyển đầu vào ở bên phải. Nếu bạn không sử dụng kiểu này, bạn chỉ có thể thêm margin-right: 20px; vào <label> thay thế.

Các mã trong yếu tố hình thức của tôi kết thúc hạnh phúc:

echo $this->Form->input('first_name', array('div' => 'clearfix')); 

... và tạo ra các yếu tố đó được theo kiểu đúng cách bằng Bootstrap.

<div class="clearfix required"> 
    <label for="PersonFirstName">First Name</label> 
    <input name="data[Person][first_name]" maxlength="50" type="text" id="PersonFirstName"/> 
</div> 

Tôi vẫn đang tìm hiểu cả hai khuôn khổ để có thể có vấn đề với điều này. Hy vọng nó giúp mặc dù.

Answer 4

Điều này có vẻ là những gì bạn đang tìm kiếm. https://github.com/loadsys/twitter-bootstrap-helper/branches