Bootstrap이있는 CakePHP (트위터에서)

Question

저는 CakePHP에 익숙하지 않아, 케이크와 결합 된 레이아웃에서 Twitter의 Boostrap을 사용하는 방법을 알고 싶습니다.

내 기본 관심사는 Form Helper가 미리 구성된 CSS 클래스를 사용한다고 생각하기 때문에 Form Helper가 계속 정상적으로 작동하도록하는 것입니다. 기본 CSS를 변경하면 Form Helper가 작동하지 않을 것이라고 상상합니다 할까요.

이 튜토리얼을 읽었지만 완전하지는 않습니다.
Build a PHP application using CakePHP and (twitter) Bootstrap, Part 1

이 작업을 수행 한 사람이 있습니까?

감사합니다. : D

Answer 1

현재 모든 답변을 보려면보기 파일을 변경해야합니다.

코드/마크 업 변경없이 현재의 전망을 "부트 스트랩은-쓸어"합니다 다음 플러그인 :

https://github.com/slywalker/TwitterBootstrap

당신이해야 할 모든이 FormHelper 및 Html 헬퍼 alias 수 있도록 기존의 모든 호출에 $this->Form & $this->Html 대신 플러그인이 처리합니다.

보다 쉽게 ​​얻을 수 없습니다.

Answer 2

CSS는 전적으로 프리젠 테이션입니다. 양식 도우미가 제대로 작동하는 데 어떻게 영향을 미칠 수 있습니까?

일부 CSS 유효성 검사 클래스는 오류가 발생했을 때 Cake가 반환하는 것뿐만 아니라 재 작업이 필요할 수 있습니다.

당신은 쉽게 error 옵션을 사용하여 출력을 수정할 수 있습니다

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

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

Answer 3

내가 앱에 대해 같은 일을하고 있어요, 그리고 내가 폼 요소의 경기를 위해 CSS 클래스를 발견했습니다 꽤 잘 실제로.

트위터의 부트 스트랩 폼 요소는 다음과 같다 :

<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> 

그리고 CakePHP의 FormHelper는 다음과 같은 요소를 생성합니다

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

의 주요 차이점은 부트 스트랩에서 DIV 외부 레이블 인. FormHelper를 사용하면 array('class' => 'clearfix')과 같은 사용자 정의 클래스를 설정할 수 있습니다.

는 부트 스트랩의 .input 클래스는 forms.less에 정의 만 오른쪽 위에 입력을 이동 margin-left: 150px; 설정된다. 이 스타일을 사용하지 않으면 margin-right: 20px;을 <label>에 대신 추가 할 수 있습니다.

내 폼 요소의 코드는 존재 끝 :

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

을 ... 그리고 부트 스트랩에 의해 제대로 스타일되는 요소를 생성합니다.

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

저는 두 프레임 워크를 모두 배우므로이 문제가있을 수 있습니다. 그것이 비록 도움이 되길 바래.

Answer 4

이것은 당신이 찾고있는 것 같습니다. https://github.com/loadsys/twitter-bootstrap-helper/branches