Twitter-Bootstrap et formulaires dans Rails
Cela peut être une des débutants question, mais n'ayant pas beaucoup de chance d'obtenir ce que ça va. Le contexte:
- Rails 3.0.x version
- Bootstrap 2.0 - utilisation en tant que pré-compilé simplement placé dans public/stylesheets.
Att - Essaie de faire un formulaire avec une mise en page horizontale, c'est à dire de l'étiquette à côté du champ de saisie sur la même ligne.
Le problème est que je ne peux pas obtenir le formulaire de travailler, mais vous pouvez obtenir la valeur par défaut de Bootstrap exemple de code, dans la même forme de mise en page correctement. Les Rails forme ressemble:
<div class="row-fluid">
<div class="span4 well">
<%= form_for @member, :html => {:class => "form-horizontal"} do |m| %>
<fieldset>
<%= m.label :title %>
<%= m.text_field :title %>
<%= m.label :first_name %>
<%= m.text_field :first_name %>
<% end %>
</div>
</div>
Avis que le form_for méthode a la classe de form-horizontal comme l'a décrit dans Bootsrap forme CSS
Lors de l'affichage de l'étiquette, par exemple le titre, est sur une ligne ajustée, puis sur la ligne suivante est le champ de saisie, également à gauche ajusté.
Maintenant, si je comprend une partie de l'échantillon Bootstrap code pour les formulaires tels que:
<div>
<form class="form-horizontal">
<fieldset>
<legend>Legend text</legend>
<div class="control-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Supporting help text</p>
</div>
</div>
</fieldset>
</form>
</div>
Puis-je obtenir le résultat escompté -- label et le champ de saisie sur la même ligne dans la disposition horizontale.
J'ai essayé d'ajouter le style "control-label" sur le m.étiquette et m.text_field les composants, mais pas de joie dans l'obtention de la mise en page à l'horizontale.
Donc, vous ne savez pas ce qu'est la question, puisque le travail valide que je peux obtenir de l'amorce du travail, même si avec mon Rails de Forme, c'est ne pas honorer la forme horizontale.
source d'informationauteur Grant Sayer
Vous devez vous connecter pour publier un commentaire.
Si vous voulez faire la forme de la vanille (sans simpleform-bootstrap ou d'autres pierres précieuses), vous avez besoin pour façonner le formulaire HTML en conséquence:
Comme Arun Kumar Arjunan dit, le générateur de formulaire n'est pas de générer le code html nécessaire pour le bootstrap cadre.
Certainement vérifier le code HTML nécessaire à l' bootstrap exemple, les pageset/ou par l'inspection du DOM (j'ai trouvé que ce n'est pas vraiment bien documenté). Dans l'ensemble, vous pouvez le faire manuellement, comme ci-dessus, par la création de votre propre générateur de formulaireou à l'aide de diverses pierres précieuses.
Aussi au passage, assurez-vous de vérifier comment personnaliser les erreurs cssparce que, par défaut, lorsqu'une erreur de validation se produit, le champ est enveloppé par un
<div class ="field_with_errors">
casser les sélecteurs css utilisé par bootstrap.Le problème est le domaine aides ne sont pas de générer le html approprié pour twitter bootstrap.
Vous pouvez utiliser simple_form gem qui prend en charge twitter bootstrap. Voir la documentation:
https://github.com/plataformatec/simple_form
Voici l'exemple d'application: https://github.com/rafaelfranca/simple_form-bootstrap
Démo Live: http://simple-form-bootstrap.plataformatec.com.br/
J'ai trouvé Stephen Potenza s bootstrap-forme de gemme pour être incroyablement utile (et facile à utiliser). Ajouter le joyau à votre gemfile, et l'utilisation de 'bootstrap_form_for" où vous pouvez utiliser 'form_for':
Rend le truc un jeu d'enfant.
https://github.com/potenza/bootstrap_form
Une autre approche qui pourrait être un peu plus simple:
Dans votre
views/<model>/edit.html.erb
:Ensuite, créez un fichier comme ceci
views/<model>/_form.html.erb
qui contiendra votre Bootstrap-activé, les champs de formulaire, à savoir: