Django学习6-Bootstrap样式:导航栏、表单、card

使用Bootstrap样式

  • Bootstrap
    • Bootstrap的安装
    • Bootstrap在Django中的使用
  • 使用Bootstrap设置项目样式
    • 修改base基模板
      • 添加导航栏
      • Bootstrap 元素的间距控制
      • 页面主题内容
    • 主页样式
    • 设置登录界面样式
    • 设置new_topic页面样式
    • topic页面Bootstrap card样式
      • Bootstrap 颜色

Bootstrap

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。它有以下几个优点:

  • 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
  • 浏览器支持:所有的主流浏览器都支持 Bootstrap。
  • 容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。
  • 响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

Bootstrap的安装

pip install django-bootstrap4安装完成。可以在venv下的lib看到bootstrap4:
Django学习6-Bootstrap样式:导航栏、表单、card_第1张图片
然后在setting.py中添加bootstrap应用:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # 创建的应用
    'learning_logs',
    'users',
    'bootstrap4',
]

Bootstrap在Django中的使用

Bootstrap安装后在,模板html文件中导入bootstrap4包,然后在HTML标签前加bootstrap_*前缀,例如在 login.html 中使用Bootstrap样式的表单

{% load bootstrap4 %}

{# Load CSS and JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}

{# Display django.contrib.messages as Bootstrap alerts #}
{% bootstrap_messages %}
...
  <form class="form" action="{% url 'users:login' %} " method="post">
    {% csrf_token %}
    {% bootstrap_form form %}
    <input type="submit" value="Login"/>
    <a href="{% url 'users:register' %}">registera>
    <input type="hidden" name='next' value="{% url 'learning_logs:index' %}"/>
  form>

使用Bootstrap创建的登录表单:
Django学习6-Bootstrap样式:导航栏、表单、card_第2张图片

使用Bootstrap设置项目样式

在Bootstrap的官网上可以找到各种模板,包括框架、相簿、表单和导航等例子。

修改base基模板

{% load bootstrap4 %}
{% load static %}

<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="{% static 'img/dj.ico' %}">
    <title>{% block title %}My amazing site{% endblock %}title>
    {% bootstrap_css %}
    {% bootstrap_javascript jquery='full' %}
  head>

<body>
...

{% load bootstrap4 %}加载了django-bootstrap4中的模板标签集,{% bootstrap_css %}{% bootstrap_javascript jquery='full' %}是其自定义的模板标签,它让Django包含所有的Bootstrap样式文件。接着使用一对

标签,创建导航栏。

添加导航栏

导航栏在应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。根据官方提供的导航栏例子,创建一个带有下拉列表和提供搜索的表单的导航栏。导航栏需要使用.navbar包装,使用.navbar-expand-{-sm|-md|-lg|-xl}来决定响应式折叠设计。
导航栏支持添加的内容:

  • navbar-brand :可以用来显示项目、产品等一些名称;
  • .navbar-nav :提供轻量级的导航栏;
  • .navbar-toggler :提供可折叠的插件;
  • .form-inline :在导航栏提供内置的表单;
  • .navbar-text: 添加垂直居住的文本;
  • .collapse.navbar-collapse :对导航栏内容进行分组和隐藏;
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Bloga>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon">span>
    button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link active" href="{% url 'learning_logs:index' %}">Home <span class="sr-only">(current)span>a>
        li>
        <li class="nav-item">
          <a class="nav-link active" href="{% url 'learning_logs:topics' %}">博客a>
        li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disableda>
        li>
      ul>
      <div>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Searchbutton>
        form>
      div>

      <ul class="nav navbar-nav navbar-right">
        {% if user.is_authenticated %}
          <li class="nav-item dropdown">

            <a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              {{ user.username }}<b class="caret">b>
            a>
            <div class="dropdown-menu" role="menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">我的文章a>
              <a class="dropdown-item" href="{% url 'learning_logs:new_topic' %}">创建博客a>
              <div class="dropdown-divider">div>
              <a class="dropdown-item" href="{% url 'users:logout' %}">退出a>
            div>
          li>
        {% else %}
          <li class="nav-item">
            <a class='nav-link' href="{% url 'users:login' %}">登录a>
          li>
        {% endif %}
      ul>
    div>
  nav>

导航元素的所有内容,都会根据选择器navbar ,navbar-expand-md ,navbar-dark和 bg-dark定义的Bootstrap样式规则来设置样式。navbar-expand-md(长度middle)设置当浏览器窗口太窄、无法水平显示全部的导航栏时,显示出折叠按钮(属性navbar-toggler),点击时会显示导航栏的所有元素。
折叠时
在这里插入图片描述点击
Django学习6-Bootstrap样式:导航栏、表单、card_第3张图片navbar-light bg-light设置导航栏的主题颜色。
接下来通过.collapse navbar-collapse类属性添加一个导航元素列表

你可能感兴趣的:(Django,Python,Bootstrap,学习笔记)