Maitriser bootstrap 3 PDF en pratique [Eng]


Télécharger Maitriser bootstrap 3 PDF en pratique [Eng]

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


Maitriser bootstrap 3 PDF en pratique [Eng]

CHAPITRE 3 Balises et filtres de modèles

Remarque: dans tous les exemples suivants, il est entendu que vous avez déjà chargé la bibliothèque de balises de modèle bootstrap3, en plaçant le code ci-dessous au début de chaque modèle utilisé par la bibliothèque de balises de modèle bootstrap3. Lisez les sections Installation et Démarrage rapide pour savoir comment procéder.

3.1 bootstrap_form

bootstrap3.templatetags.bootstrap3.bootstrap_form (* arguments, ** kwargs)

Rendre un formulaire

Nom du tag:

bootstrap_form

Paramètres:

form Le formulaire à rendre exclure Une liste de noms de champs (séparés par des virgules) qui ne doivent pas être rendus, par exemple. exclure = sujet, bcc

error_types Ceci contrôle les types d'erreurs qui sont affichés au dessus du formulaire. Les choix sont: "tous", "champs_erreurs", "non-champs_erreurs" ou "aucun". Cela n'affectera pas l'affichage des erreurs sur les champs eux-mêmes.

La valeur par défaut est "non_field_errors".

Voir bootstrap_field pour d'autres arguments

Usage:

{% bootstrap_form form%}

Exemple:

{% bootstrap_form form layout = 'inline'%}

3.2 bootstrap_form_errors

bootstrap3.templatetags.bootstrap3.bootstrap_form_errors (* arguments, ** kwargs)

Rendre les erreurs de formulaire

Nom du tag:

bootstrap_form_errors

Paramètres:

form Le formulaire à rendre

error_types Contrôle le type d'erreur à restituer.

Une des valeurs suivantes:

  • 'tout'
  • 'field_errors'
  • 'non_field_errors'

défaut 'non_field_errors'

layout Valeur de contexte disponible dans le modèle bootstrap3 / form_er

{% bootstrap_formset formset%}

Exemple:

{% bootstrap_formset formset layout = 'horizontal'%}

3.4 bootstrap_formset_errors

bootstrap3.templatetags.bootstrap3.bootstrap_formset_errors (* arguments, ** kwargs)

Erreurs de rendu de formulaires

Nom du tag:

bootstrap_formset_errors

Paramètres:

formset Le formset qui est rendu

layout Valeur de contexte disponible dans le modèle bootstrap3 / form_errors.html en tant que layout.

Usage:

{% bootstrap_formset_errors formset%}

Exemple:

{% bootstrap_formset_errors formset layout = 'inline'%}

3.5 bootstrap_field

bootstrap3.templatetags.bootstrap3.bootstrap_field (* arguments, ** kwargs)

Rendre un champ

Nom du tag:

bootstrap_field

Paramètres:

champ Le champ de formulaire à restituer

layout Si défini sur 'horizontal', le champ et l'étiquette seront rendus côte à côte, tant qu'il n'y a pas de field_class également.

form_group_class Classe CSS de la div qui enveloppe le champ et l'étiquette.

'groupe de formulaire' par défaut

field_class Classe CSS de la div qui enveloppe le champ.

label_class Classe CSS de l'élément label. Aura toujours control-label comme dernier CSS

classe.

show_help Affiche le texte d’aide du champ, si le champ en a un.

3.4. bootstrap_formset_errors par défaut True

show_label Indique si le libellé du champ doit être affiché.

default True exclude Une liste de noms de champs qui ne doivent pas être restitués size Contrôle la taille du groupe div.form-rendu à l'aide de classes CSS.

Une des valeurs suivantes:

  • 'petit'
  • 'moyen'
  • 'grand'

espace réservé Définir / écraser l'espace réservé du champ.

label Remplace le libellé du champ.

horizontal_label_class Classe utilisée sur l'étiquette lorsque la mise en page est définie sur horizontal.

défaut 'col-md-3'. Peut être modifié dans Paramètres horizontal_field_class Classe utilisée dans le champ lorsque la présentation est définie sur horizontal.

défaut 'col-md-9'. Peut être modifié dans Paramètres addon_before Texte devant être ajouté au début du champ de formulaire. Peut également être une icône, par exemple '<span class = "glyphicon glyphicon-calendar"> </ span>'

Consultez la documentation d'amorçage <http://getbootstrap.com/components/#input-groups-basic> pour plus d'exemples.

addon_after Texte à ajouter au champ de formulaire. Peut également être une icône, par exemple '<span class = "glyphicon glyphicon-calendar"> </ span>'

Consultez la documentation d'amorçage <http://getbootstrap.com/components/#input-groups-basic> pour plus d'exemples.

addon_before_class Classe utilisée sur la plage lorsque addon_before est utilisé.

Une des valeurs suivantes:

  • 'input-group-addon'
  • 'input-group-btn' par défaut input-group-addon addon_after_class Classe utilisée sur la plage lorsque addon_after est utilisé.

Une des valeurs suivantes:

  • 'input-group-addon'
  • 'input-group-btn' addon du groupe d'entrée par défaut

error_css_class Classe CSS utilisée lorsque le champ contient une erreur par défaut 'has-error'. Peut être modifié les paramètres

required_css_class Classe CSS utilisée sur le groupe div.form pour indiquer qu'un champ est obligatoire

Chapitre 3. Balises et filtres de modèles

défaut ''. Peut être modifié Paramètres bound_css_class Classe CSS utilisée lorsque le champ est lié par défaut 'has-success'. Peut être modifié les paramètres

Usage:

{% champ bootstrap_field%}

Exemple:

{% champ bootstrap_field show_label = False%}

3.6 bootstrap_label

bootstrap3.templatetags.bootstrap3.bootstrap_label (* arguments, ** kwargs)

Rendre une étiquette

Nom du tag:

bootstrap_label

Paramètres:

contenu Le texte de l'étiquette

label_for La valeur qui sera dans l'attribut for du rendu <label>

label_class La classe CSS pour le rendu <label>

label_title La valeur qui sera dans l'attribut title du <label> rendu

Usage:

{% bootstrap_label content%}

Exemple:

{% bootstrap_label "Adresse électronique" label_for = "exampleInputEmail1"%}

3.7 bootstrap_button

bootstrap3.templatetags.bootstrap3.bootstrap_button (* arguments, ** kwargs)

Rendre un bouton

Nom du tag:

bootstrap_button

Paramètres:

contenu Le texte à afficher dans le bouton

button_type Champ facultatif définissant le type de bouton concerné.

Accepte l'une des valeurs suivantes:

3.6. bootstrap_label

  • 'soumettre'
  • 'réinitialiser'
  • 'bouton'
  • 'lien'

icon Nom d’une icône à afficher dans le contenu visible du bouton. Voir bootstrap_icon pour les valeurs acceptables.

button_class La classe de button à utiliser. Si aucun n'est donné, btn-default sera utilisé.

extra_classes Toute classe CSS supplémentaire à ajouter au bouton.

size Champ facultatif permettant de contrôler la taille du bouton.

Accepte l'une des valeurs suivantes:

  • 'xs'
  • 'sm'
  • 'petit'
  • 'md'
  • 'moyen'
  • 'lg'
  • 'grand'

href Rendez le bouton sous la forme d'un élément <a>. L'attribut href est défini avec cette valeur.

name Valeur de l'attribut name de l'élément rendu.

value Valeur de l'attribut value de l'élément rendu.

Usage:



{% bootstrap_button content%}

Exemple:

{% bootstrap_button "Enregistrer" button_type = "submit" button_class = "btn-primary"%}

3.8 bootstrap_icon

bootstrap3.templatetags.bootstrap3.bootstrap_icon (icône, ** kwargs)

Rendre une icône

Nom du tag:

bootstrap_icon

Paramètres:

icon Nom de l'icône. Voir la documentation Bootstrap pour toutes les icônes.

extra_classes Classes CSS supplémentaires à ajouter à l'icône title HTML title Titre de l'icône (HTML title attrivute)

Usage:

{% icône bootstrap_icon%}

Exemple:

{% bootstrap_icon "star"%}

3.9 bootstrap_alert

bootstrap3.templatetags.bootstrap3.bootstrap_alert (content, type_alerte = u’info ’, licenciable = True)

Rendre une alerte

Nom du tag:

bootstrap_alert

Paramètres:

contenu contenu HTML d'alerte

type d'alerte

  • 'Info'
  • 'Attention'
  • 'danger'
  • 'Succès'

défaut 'info'

booléen licenciable, est alerte licenciable

par défaut True

Usage:

{% bootstrap_alert content%}

Exemple:

{% bootstrap_alert "Une erreur s'est produite" alert_type = 'danger'%}

réinitialiser le texte d'un bouton de réinitialisation

Usage:

{% buttons%} {% endbuttons%}

Exemple:

{% buttons submit = 'OK' reset = "Annuler"%} {% endbuttons%}

3.11 messages bootstrap

bootstrap3.templatetags.bootstrap3.bootstrap_messages (contexte, * arguments, ** kwargs)

Afficher les messages django.contrib.messages dans les conteneurs d’alerte Bootstrap.

Afin de rendre les alertes licenciables (avec le bouton de fermeture), nous devons également définir le paramètre jquery lorsque vous utilisez la balise bootstrap_javascript.

Utilise le modèle bootstrap3 / messages.html.

Nom du tag:

bootstrap_messages

Paramètres:

Aucun.

Usage:

{% bootstrap_messages%}

Exemple:

{% bootstrap_javascript jquery = 1%}

{% bootstrap_messages%}

3.12 bootstrap_pagination

bootstrap3.templatetags.bootstrap3.bootstrap_pagination (page, ** kwargs)

Rendre la pagination pour une page

Nom du tag:

bootstrap_pagination

Paramètres:

page La page de résultats à afficher.

pages_to_show Nombre de pages au total

défaut 11

URL URL vers laquelle naviguer pour la pagination en avant et la pagination en arrière.

par défaut Aucun

14 Chapitre 3. Taille des filtres et filtres de modèle Contrôle la taille de la pagination via CSS. Par défaut, sa taille est normale.

L'un des suivants:

  • 'petit'
  • 'large' par défaut Aucune extra Tout paramètre de page supplémentaire.

par défaut Aucun

nom_paramètre Nom du paramètre de l'URL de pagination.

page par défaut'

Usage:

{% bootstrap_pagination page%}

Exemple:

{% bootstrap_pagination lines url = "/ pagination? page = 1" size = "large"%}

{% bootstrap_pagination page_obj extra = request.GET.urlencode%}

3.13 bootstrap_jquery_url

Nom du tag:

bootstrap_jquery_url

Renvoie l'URL complète dans le fichier jQuery à utiliser

Valeur par défaut: //code.jquery.com/jquery.min.js

Cette valeur est configurable, voir la section Paramètres

Usage:

{% bootstrap_jquery_url%}

Exemple:

{% bootstrap_jquery_url%}

3.14 bootstrap_javascript_url

bootstrap3.templatetags.bootstrap3.bootstrap_javascript_url ()

Renvoyer l'URL complète à la bibliothèque JavaScript Bootstrap

Valeur par défaut: Aucune

Cette valeur est configurable, voir la section Paramètres

Nom du tag:

3.13. bootstrap_jquery_url

bootstrap_javascript_url

Usage:

{% bootstrap_javascript_url%}

Exemple:

{% bootstrap_javascript_url%}

3.15 bootstrap_css_url

Renvoyer l'URL complète à la bibliothèque CSS Bootstrap

Valeur par défaut: Aucune

Cette valeur est configurable, voir la section Paramètres

Nom du tag:

bootstrap_css_url

Usage:

{% bootstrap_css_url%}

Exemple:

{% bootstrap_css_url%}

3.16 bootstrap_css

Renvoyer le code HTML pour Bootstrap CSS. Ajustez l'URL dans les paramètres. Si aucune URL n'est renvoyée, nous ne voulons pas que cette déclaration

renvoyer n'importe quel HTML. Ceci est le comportement prévu.

Valeur par défaut: Aucune

Cette valeur est configurable, voir la section Paramètres

Nom du tag:

bootstrap_css

Usage:

{% bootstrap_css%}

Exemple:

{% bootstrap_css%}

Chapitre 3. Balises et filtres de modèles

3.17 bootstrap_javascript

bootstrap3.templatetags.bootstrap3.bootstrap_javascript (jquery = None)

Renvoie le code HTML pour JavaScript Bootstrap.

Ajustez l'URL dans les paramètres. Si aucune URL n'est renvoyée, nous ne voulons pas que cette instruction renvoie un code HTML. Ceci est le comportement prévu.

Valeur par défaut: Aucune

Cette valeur est configurable, voir la section Paramètres

Nom du tag:

bootstrap_javascript

Paramètres:

jquery Truthy pour inclure jQuery ainsi que Bootstrap

Usage:

{% bootstrap_javascript%}

Exemple:

{% bootstrap_javascript jquery = 1%}

3.17. bootstrap_javascript

18 Chapitre 3. Balises et filtres de modèles

CHAPITRE 4

Réglages

Django-bootstrap3 a certains paramètres préconfigurés.

Ils peuvent être modifiés en ajoutant une variable dict appelée BOOTSTRAP3 dans votre fichier settings.py et en personnalisant les valeurs souhaitées.

La variable dict BOOTSTRAP3 contient les paramètres et les valeurs par défaut suivants:

# Paramètres par défaut

BOOTSTRAP3 = {

# L'URL complète du fichier CSS Bootstrap

# Notez qu'une URL peut être soit

# - une chaîne, par exemple "//code.jquery.com/jquery.min.js"

# - un dict comme la valeur par défaut ci-dessous (utilisez la clé "url" pour le lien réel)

"css_url": {"url": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

˓ → "," intégrité ":" sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / → K68vbdEjh4u ",



"crossorigin": "anonyme",

},

# L'URL complète du fichier CSS Bootstrap (Aucun ne signifie aucun thème)

"theme_url": aucun,

# L'URL complète du fichier JavaScript Bootstrap

"javascript_url": {"url": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js","integrity": "sha384-

˓ → Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa "," crossorigin ":" anonymous ",

},

# L'URL du fichier JavaScript jQuery

"jquery_url": "//code.jquery.com/jquery.min.js", (continue à la page suivante)

 (suite de la page précédente)

# Placez JavaScript dans la section HEAD du document HTML (ne s'applique que si vous

˓ → utilisez bootstrap3.html)

"javascript_in_head": False,

# Inclure jQuery avec le code JavaScript Bootstrap (affecte le modèle django-bootstrap3

˓ → balises)

"include_jquery": False,

# Classe de libellé à utiliser dans les formulaires horizontaux

"horizontal_label_class": "col-md-3",

# Classe de champ à utiliser dans les formulaires horizontaux

"horizontal_field_class": "col-md-9",

# Définissez les attributs d'espace réservé pour indiquer si aucun espace réservé n'est fourni.

# Ceci considère également l'option "label" des balises {% bootstrap_field%}.

"set_placeholder": True,

# Classe pour indiquer que nécessaire (il est préférable de définir ceci dans votre formulaire Django)

"required_css_class": "",

# Classe pour indiquer une erreur (mieux vaut définir ceci dans votre formulaire Django)

"error_css_class": "has-error",

# Classe pour indiquer le succès, ce qui signifie que le champ a une entrée valide (il est préférable de définir

˓ → ceci dans votre formulaire Django)

"success_css_class": "has-success",

# Renderers (définissez-les seulement si vous avez étudié la source et avez compris la

Work → fonctionnement interne)

"formset_renderers": {

"default": "bootstrap3.renderers.FormsetRenderer",

},

"form_renderers": {

"default": "bootstrap3.renderers.FormRenderer",

},

"field_renderers": {

"default": "bootstrap3.renderers.FieldRenderer",

"inline": "bootstrap3.renderers.InlineFieldRenderer",

},

}

……

CHAPITRE 5 Modèles

Vous pouvez personnaliser la sortie de django-bootstrap3 en écrivant vos propres modèles. Ces modèles sont disponibles:

5.1 bootstrap3 / field_help_text_and_errors.html

Cela rend le texte d'aide et l'erreur de chaque champ.

La variable help_text_and_errors contient un tableau de chaînes.

5.2 bootstrap3 / form_errors.html

Cela rend les erreurs de non-champ d'un formulaire.

Les erreurs de variable contiennent un tableau de chaînes.

5.3 bootstrap3 / messages.html

Cela rend la variable de messages Django.

messages / # display-messages

les messages sont passés à travers trois filtres intégrés

… …

5.4 Autre

Il existe deux autres modèles, bootstrap3 / bootstrap3.html et bootstrap3 / pagination.html.

Vous devriez les considérer comme privés pour le moment, ce qui signifie que vous pouvez les utiliser mais pas les modifier.

CHAPITRE 6 Contribuer

Les contributions sont les bienvenues et elles sont grandement appréciées! Chaque petit geste compte et un crédit sera toujours accordé.

Vous pouvez contribuer de plusieurs manières:

6.1 Types de contributions

6.1.1 Signaler les bugs

Signalez les bogues sur https://github.com/dyve/django-bootstrap3/issues.

Si vous signalez un bogue, veuillez inclure:

  • Le nom et la version de votre système d'exploitation.
  • Tout détail sur votre configuration locale qui pourrait être utile pour le dépannage.
  • Étapes détaillées pour reproduire le bogue.

6.1.2 Correction de bugs

Recherchez les bogues dans les numéros de GitHub. Tout ce qui est étiqueté avec «bug» est ouvert à quiconque veut le mettre en œuvre.

6.1.3 Implémenter des fonctionnalités

Recherchez les fonctionnalités dans les numéros de GitHub. Tout ce qui est étiqueté avec «fonctionnalité» est ouvert à quiconque veut l'implémenter.

6.1.4 Écrire de la documentation

6.1.5 Envoyer des commentaires

Si vous proposez une fonctionnalité:

  • Expliquez en détail comment cela fonctionnerait.
  • Gardez le champ d'application aussi étroit que possible afin de faciliter sa mise en œuvre.
  • N'oubliez pas qu'il s'agit d'un projet dirigé par des bénévoles et que les contributions sont les bienvenues :)

6.2 Commencez!

Prêt à contribuer? Voici comment configurer django-bootstrap3 pour le développement local.

  1. Pointez le dépôt django-bootstrap3 sur GitHub.
  2. Clonez votre fourche localement:

$ git clone https://github.com/your_username_here/django-bootstrap3.git

  1. Installez votre copie locale dans un virtualenv. En supposant que virtualenvwrapper soit installé, voici comment configurer votre fork pour le développement local:

$ mkvirtualenv django-bootstrap3

$ cd django-bootstrap3 /

$ python setup.py develop

  1. Créez une branche pour le développement local:

$ git checkout -b nom-de-votre-bugfix-or-feature

Vous pouvez maintenant effectuer vos modifications localement.

  1. Lorsque vous avez terminé, vérifiez que vos modifications sont conformes à flake8 et aux tests, y compris en testant les autres versions de Python avec tox:

tests $ flake8 bootstrap3

test $ python setup.py

$ tox

Pour obtenir flake8 et tox, installez-les simplement dans votre virtualenv.

  1. Validez vos modifications et envoyez votre branche à GitHub:

$ git add.

$ git commit -m "Votre description détaillée de vos modifications."

$ git push origine nom-de-votre-bugfix-or-feature

  1. Soumettez une demande de tirage sur le site Web de GitHub.

6.3 Directives de demande de tirage

Avant de soumettre une demande d'extraction, vérifiez qu'elle respecte les consignes suivantes:

  1. La demande d'extraction doit inclure des tests.
  2. Si la demande d'extraction ajoute une fonctionnalité, les documents doivent être mis à jour. Mettez votre nouvelle fonctionnalité dans une fonction avec docstring et ajoutez-la à la liste dans README.rst.
  3. La demande d'extraction devrait fonctionner pour Python 2.6, 2.7 et 3.3, ainsi que pour PyPy. Vérifiez https://travis-ci.org/dyve/django-bootstrap3/pull_requests et assurez-vous que les tests sont compatibles avec toutes les versions de Python prises en charge.

6.4 Conseils

Pour exécuter un sous-ensemble de tests:

$ python -m unittest tests.test_bootstrap3

Maitriser bootstrap 3 PDF en pratique [Eng]



138