Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add {% bootstrap %} tag that allows custom/grid layout of form fields #104

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Add {% bootstrap %} tag that allows custom/grid layout of form fields #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7442934
{% bootstrap %} tag support
vitalik Jan 12, 2018
efae5ba
Update README.rst
vitalik Jan 12, 2018
b49e26b
Update README.rst
vitalik Jan 12, 2018
c33492a
Graphical examples
vitalik Jan 12, 2018
56708be
tests for django 1.5, 1.6
vitalik Jan 12, 2018
a6b5784
allow passing col size for each field
vitalik Jun 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGES.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
- 2018-01-12:
- {% bootstrap %} tag by @vital1k

- 2015-03-09:

- Fix unit test fail with Django 1.7 @nikolas
Expand Down
32 changes: 32 additions & 0 deletions README.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,9 @@ Add "bootstrapform" to your INSTALLED_APPS.
At the top of your template load in our template tags::

{% load bootstrap %}

Vertical
~~~~~~~~~~~~~~~~~

Then to render your form::

Expand All @@ -50,6 +53,9 @@ You can also set class="form-vertical" on the form element.

To use class="form-inline" on the form element, also change the "|boostrap" template tag to "|bootstrap_inline".

Horizontal
~~~~~~~~~~~~~~~~~

It is also possible to create a horizontal form. The form class and template tag are both changed, and you will also need slightly different CSS around the submit button::

<form class="form-horizontal">
Expand All @@ -64,6 +70,32 @@ It is also possible to create a horizontal form. The form class and template tag
</form>


Custom Layout
~~~~~~~~~~~~~~~~~

For custom layout - use {% bootstrap %} tag - each line in it represent bootstrap .row with fields separted by space::

<form class="form-horizontal">
<legend>Form Title</legend>
{% csrf_token %}
{% bootstrap form %}
char_field choice_field
radio_choice multiple_choice multiple_checkbox
password_field file_fied
textarea
boolean_field
{% endbootstrap %}
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>

Will result layout like this

.. image:: docs/_static/bootstrap_tag.png

Demo
=====

Expand Down
191 changes: 191 additions & 0 deletions bootstrapform/fixtures/bootstrap_tag.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
<div class="row">
<div class="col-4">

<div class="form-group">


<label class="control-label " for="id_char_field">Char field</label>


<div class=" ">
<input class=" form-control" id="id_char_field" name="char_field" type="text" />

</div>

</div>
</div><div class="col-4">

<div class="form-group">


<label class="control-label " for="id_choice_field">Choice field</label>


<div class=" ">
<select class=" form-control" id="id_choice_field" name="choice_field">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>

</div>

</div>
</div><div class="col-4">

<div class="form-group">


<label class="control-label ">Radio choice</label>

<div class="">

<div class="radio">
<label>
<input id="id_radio_choice_0" name="radio_choice" type="radio" value="0" />
Zero
</label>
</div>

<div class="radio">
<label>
<input id="id_radio_choice_1" name="radio_choice" type="radio" value="1" />
One
</label>
</div>

<div class="radio">
<label>
<input id="id_radio_choice_2" name="radio_choice" type="radio" value="2" />
Two
</label>
</div>


</div>

</div>
</div>
</div>

<div class="row">
<div class="col-6">

<div class="form-group">


<label class="control-label " for="id_multiple_choice">Multiple choice</label>


<div class=" ">
<select multiple="multiple" class=" form-control" id="id_multiple_choice" name="multiple_choice">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>


</div>

</div>
</div><div class="col-6">

<div class="form-group">


<label class="control-label " for="id_multiple_checkbox">Multiple checkbox</label>


<div class=" multiple-checkbox">
<ul id="id_multiple_checkbox"><li><label for="id_multiple_checkbox_0"><input id="id_multiple_checkbox_0" name="multiple_checkbox" type="checkbox" value="0" /> Zero</label></li>
<li><label for="id_multiple_checkbox_1"><input id="id_multiple_checkbox_1" name="multiple_checkbox" type="checkbox" value="1" /> One</label></li>
<li><label for="id_multiple_checkbox_2"><input id="id_multiple_checkbox_2" name="multiple_checkbox" type="checkbox" value="2" /> Two</label></li></ul>




</div>

</div>
</div>
</div>

<div class="row">
<div class="col-6">

<div class="form-group">


<label class="control-label " for="id_file_fied">File fied</label>


<div class=" ">
<input id="id_file_fied" name="file_fied" type="file" />




</div>

</div>
</div><div class="col-6">

<div class="form-group">


<label class="control-label " for="id_password_field">Password field</label>


<div class=" ">
<input class=" form-control" id="id_password_field" name="password_field" type="password" />




</div>

</div>
</div>
</div>


<div class="row">

<div class="col-12">

<div class="form-group">


<label class="control-label " for="id_textarea">Textarea</label>


<div class=" ">
<textarea class=" form-control" cols="40" id="id_textarea" name="textarea" rows="10">
</textarea>


</div>

</div>
</div>
</div>

<div class="row">
<div class="col-12">

<div class="form-group">

<div class="">
<div class="checkbox">

<label >
<input id="id_boolean_field" name="boolean_field" type="checkbox" /> <span>Boolean field</span>
</label>


</div>
</div>

</div>
</div>
</div>
Loading