ट्विटर बूटस्ट्रैप के साथ केकेपीएचपी 2.0

Question

क्या ट्विटर बूटस्ट्रैप के साथ अच्छी तरह से काम करने के लिए केकपीएचपी को कॉन्फ़िगर करने का कोई तरीका है? मुझे एहसास है कि यह प्रश्न पहले से ही here से पूछा गया है, लेकिन उत्तर वास्तव में पूरा नहीं हुआ था।

वहां कुछ ट्यूटोरियल भी हैं, लेकिन वे सभी पुराने हैं या बस काम नहीं कर रहे हैं, उदाहरण: Build a PHP application using CakePHP and (twitter) Bootstrap, Part 1।

धन्यवाद!

Answer 1

यह मानते हुए कि सीएसएस फ़ाइल रूपों आप follwoing उपयोग कर सकते हैं के लिए अपने ध्यान में रखते हुए अपने लेआउट में शामिल है:

<?php echo $this->Form->create('User', array(
'inputDefaults' => array(
    'div' => 'control-group', 
    'label' => array('class' => 'control-label'), 
    'between' => '<div class="controls">', 
    'after' => '</div>', 
    'class' => 'span3', 
    'error' => array('attributes' => array('wrap' => 'div', 'class' => 'alert alert-error')) 
))); 

echo $this->Form->input('password',array(
       'after' => '<span class = \'help-inline\'>Minimum of 5 characters.</span></div>')); 
      ?> 

मैं cake2.0 साथ पूरी तरह से काम करते हैं और bootstrap के लिए इस विधि पाया 2.0

यह उत्पादन करेगा के बाद प्रपत्र प्रस्तुत किया गया है और एक त्रुटि लौटा दिया गया है निम्नलिखित

<div class="control-group required error"> 
<label for="UserPassword">Password</label> 
<div class="controls"> 
<input name="data[User][password]" class="span3 form-error" type="password" value="" id="UserPassword"> 
<span class="help-inline">Minimum of 5 characters.</span></div> 
<div class="alert alert-error">You must provide a password.</div> 
</div> 

एचटीएमएल से ऊपर है।

Answer 2

बूटस्ट्रैप किसी सर्वर-साइड कोड का उपयोग नहीं करता है।

<link rel="stylesheet/less" type="text/css" href="LESS_FILE_HERE.less"> 
<script src="less.js" type="text/javascript"></script> 

बस लिंक सभी:

कम सीएसएस, जो आप सर्वर पर नियमित रूप से सीएसएस के लिए नीचे संकलन सकते हैं, या के रूप में LESS CSS साइट आपको दिखाता है कि ब्राउज़र इसे इस तरह less.js का उपयोग कर संकलन हो सकता है के अलावा

stylesheet/less और less.js फ़ाइल का उपयोग कर .less फ़ाइलें और इसे काम करना चाहिए।

बूटस्ट्रैप के अलावा बस HTML और जावास्क्रिप्ट है। बस webroot/js फ़ोल्डर में सभी जावास्क्रिप्ट डालें और मुख्य HTML के लिए लेआउट बनाएं और आगे बढ़ें।

Answer 3

मैंने यह किया है। आपको क्या करने की आवश्यकता होगी निम्नलिखित:

• लेआउट ऐप बनाने/दृश्य/लेआउट/default.ctp
• केक विशिष्ट कोड के साथ लेआउट कि
• अद्यतन में बूटस्ट्रैप एचटीएमएल कॉपी

यह एक आकर्षण

Answer 4

की तरह काम करता CakePHP प्लगइन AssetCompress जो कम संकलन संभालती है आप के लिए यदि आप NodeJS है और कम अपने सर्वर पर स्थापित पर एक नज़र डालें।

फिर आपको बस अपने लेआउट में सीएसएस फाइलों को शामिल करने और बूटस्ट्रैप कक्षाओं का उपयोग करके फॉर्मों को स्टाइल करने की आवश्यकता है।

Answer 5

चेकआउट हमारे ट्विटर बूटस्ट्रैप हेल्पर

https://github.com/loadsys/twitter-bootstrap-helper

Answer 6

IMHO, सबसे अच्छा ट्विटर बूटस्ट्रैप प्लगइन (+ बग ट्रैकर में केक devs में से एक ने सिफारिश की) है:

https://github.com/slywalker/TwitterBootstrap

इस बारे में आसान क्या है कि यह मददगारों के लिए Cake 2's aliasing का उपयोग करता है ताकि आपको अपना कोई भी व्यू कोड बदलने की आवश्यकता न हो।

तो नियमित $this->Html-> और $this->Form-> सभी अपने वर्ष कोड होगा उत्पादन बूटस्ट्रैप मार्कअप में। बहुत बढ़िया।

Answer 7

यहाँ एक नए एक है:
http://drawrdesign.com/twitter-bootstrap-for-cakephp

Github पेज:
https://github.com/Rhym/cakeStrap

Answer 8

शायद तुम इस प्लगइन की तरह: https://github.com/BradCrumb/lesscompiler।

यह एक केकपीएचपी घटक है जो स्वचालित रूप से सीएसएस फ़ाइलों को कम फ़ाइलों को संकलित करता है। मैंने बस बूटस्ट्रैप के साथ इसका परीक्षण किया और यह

Answer 9

ढूंढता है यह आसान बनाता है और इसे अपडेट करता है। http://twitter.github.io/bootstrap/getting-started.html

फिर उन्हें खोल और ले जाने के:

css/bootstrap.css 
css/bootstrap.min.css 
css/bootstrap-responsive.css 
css/bootstrap-responsive.min.css 

     -TO- 

app/webroot/css/ 

     -THEN MOVE- 

js/bootstrap.js 
js/bootstrap.min.js 

     -TO- 

app/webroot/js/ 

     -THEN MOVE- 

img/glyphicons-halflings-white.png 
img/glyphicons-halflings.png 

     -TO- 

app/webroot/img/ 

2,9

बूटस्ट्रैप यहाँ 3 फ़ोल्डर्स डाउनलोड करें: यह करने के लिए सबसे तेज और आसान तरीके के रूप में इस प्रकार है और वी के रूप में वर्तमान है

*** यह बहुत महत्वपूर्ण है कि आपने अपनी साइट के रूट में इन फाइलों को नहीं डाला है (मैं बाद में समझाऊंगा ...) !!!

फिर, (मैं Netbeans पसंद करते हैं) अपनी पसंद के कोड संपादक फ़ाइल को खोलने में:

app/View/Layouts/default.ctp 

यह तरह दिखना चाहिए:

<?php 
/** 
* 
* PHP 5 
* 
* CakePHP(tm) : Rapid Development Framework (http://cakephp.org) 
* Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org) 
* 
* Licensed under The MIT License 
* For full copyright and license information, please see the LICENSE.txt 
* Redistributions of files must retain the above copyright notice. 
* 
* @copyright  Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org) 
* @link   http://cakephp.org CakePHP(tm) Project 
* @package  app.View.Layouts 
* @since   CakePHP(tm) v 0.10.0.1076 
* @license  MIT License (http://www.opensource.org/licenses/mit-license.php) 
*/ 

$cakeDescription = __d('cake_dev', 'CakePHP: the rapid development php framework'); 
?> 
<!DOCTYPE html> 
<html> 
<head> 
<?php echo $this->Html->charset(); ?> 
<title> 
    <?php echo $cakeDescription ?>: 
    <?php echo $title_for_layout; ?> 
</title> 
<?php 
    echo $this->Html->meta('icon'); 

    echo $this->Html->css('cake.generic'); 


    echo $this->fetch('meta'); 
    echo $this->fetch('css'); 
    echo $this->fetch('script'); 

?> 
</head> 
<body> 
<div id="container"> 
    <div id="header"> 
     <h1><?php echo $this->Html->link($cakeDescription, 'http://cakephp.org'); ?></h1> 
    </div> 
    <div id="content"> 

     <?php echo $this->Session->flash(); ?> 

     <?php echo $this->fetch('content'); ?> 
    </div> 
    <div id="footer"> 
     <?php echo $this->Html->link(
       $this->Html->image('cake.power.gif', array('alt' =>  $cakeDescription, 'border' => '0')), 
       'http://www.cakephp.org/', 
       array('target' => '_blank', 'escape' => false) 
      ); 
     ?> 
    </div> 
</div> 
<?php echo $this->element('sql_dump'); ?> 
</body> 
</html> 

इस खोजें:

echo $this->Html->css('cake.generic'); 

नीचे इसे जोड़ें:

echo $this->Html->css('cake.generic'); 

echo $this->Html->css('bootstrap'); 

echo $this->Html->css('bootstrap.min'); 

echo $this->Html->css('bootstrap-responsive'); 

echo $this->Html->css('bootstrap-responsive.min'); 

इस खोजें:

echo $this->fetch('script'); 

नीचे यह इस जोड़ें:

echo $this->Html->script('bootstrap'); 

echo $this->Html->script('bootstrap.min'); 

*** पहले याद रखें कि जब मैंने कहा कि मैं समझाने के लिए क्यों फ़ाइलों चाहिए webroot निर्देशिका में होना (के लिए जा रहा था कोई भी एमवीसी के लिए नया)? उपर्युक्त कोड यह है कि कैसे केक अपनी स्क्रिप्ट और सीएसएस शामिल करता है। जावास्क्रिप्ट फ़ाइलों के लिए ऐप/वेबूट/जेएस में इस विधि के लिए उपयोग की जाने वाली विधि; और क्रमशः सीएसएस फाइलों के लिए ऐप/वेबूट/सीएसएस में।यह iscluding जेएस और सीएसएस फाइलों को एक synch बनाता है। यदि आप जेएस/सीएसएस फाइलों को शामिल करना चाहते हैं तो वैश्विक रूप से उन्हें default.ctp शामिल करें।

* आप केवल एक दृश्य के साथ उपयोग के लिए एक स्क्रिप्ट की जरूरत है/पेज तो आप उस पर की जरूरत है दृश्य फ़ाइल पर यह एक ही कोड का उपयोग करें।

यह थोड़ा जटिल लग सकता है लेकिन इसे इस तरह से ट्विटर बूटस्ट्रैप को वैश्विक रूप से शामिल करने में केवल 3 मिनट लगना चाहिए।

आशा है कि इससे मदद मिलती है!

Answer 10

मैं @ कोस्टा से सहमत हूं, स्लीवाल्कर प्लगइन सबसे अच्छा समाधान है। ट्विटर प्लगइन 2.x और 3.x दोनों शाखाओं के साथ काम करते हुए, उनकी प्लगइन का नया संस्करण यहां दिया गया है।

यह प्लगइन काफी बेहतर है क्योंकि यह अच्छी तरह से एचटीएमएल हेल्पर, फॉर्म हेल्पर और अलर्ट बढ़ाता है।

Fork BoostCake Plugin for CakePHP 2.x at Github

Answer 11

मैं slywalker/CakePHP-प्लगइन-boost_cake का उपयोग कर एक ही समस्या थी। मैंने टिकट खोला और उसने कुछ घंटों में तय किया था। उन्होंने 1,03 तक अपडेट किया और मुझे इस तरह इसका उपयोग करने के लिए कहा:

<?php echo $this->Form->input('email', array('label' => array('text' => __('Email:'),), 'beforeInput' => '<div class="input-append">', 'afterInput' => '<span class="add-on"><i class="icon-envelope"></i></span></div>')); ?> 

मुझे उम्मीद है कि यह किसी और की भी मदद करता है।