Django网站的Bootstrap网格
我正在寻找改进我的Django网站，特别是CSS部分。我不知道CSS，因为我开始学习这个库。
我正在使用Bootstrap 3，我希望得到您对使用和切割我的Django网站的专栏的意见。
这是我第一次使用.col-md-x而我不知道这是不是真的？我的网站应用程序将用于大屏幕，但也可用于平板电脑或智能手机。
我有两个例子：
全球网站页面
变体
我可以编写脚本来获取此类内容吗？写这样的CSS / Bootstrap3是否正确？
谢谢 编辑：
我的基本模板脚本如下所示：
<!DOCTYPE html>
<html>
<head>
{% load staticfiles %}
{% load static %}
{% load user_tags %}
<title> DatasystemsEC - Page non trouvée </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="{% get_static_prefix %}{{ mytheme }}/css/Base_Not_Found.css"/>
</head>
<!-- #################### -->
<!-- Upper navigation bar -->
<!-- #################### -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.datasystems.fr/"> DatasystemsEC </a>
</div>
<!-- Home tab -->
<ul class="nav navbar-nav">
<li><a href="{% url "accueil" %}"> <span class="glyphicon glyphicon-home"></span> Accueil </a></li>
{% if user.is_authenticated %}
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
<span class="glyphicon glyphicon-info-sign">
</span> Informations Mairie
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "{% url "Mairieform" %}"> <span class="glyphicon glyphicon-pencil"></span> Créer/Editer les informations de la Mairie </a></li>
<li><a href = "{% url "Mairieresume" %}"> <span class="glyphicon glyphicon-home"></span> Consulter les informations de la Mairie </a></li>
</ul>
</li>
<!-- Resume Tab with acts -->
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-file">
</span> Actes Etat Civil <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user">
</span> Fiches Individuelles
</a>
<ul class="dropdown-menu">
<li><a href="{% url "home" %}">Accueil Fiches Individuelles</a></li>
<li><a href="{% url "form" %}">Création Fiches Individuelles</a></li>
<li><a href="{% url "searched" %}">Consultation Fiches Individuelles</a></li>
{% if request.user|has_group:"admin" %}
<li><a href="{% url "edited" %}">Edition Fiches Individuelles</a></li>
<li><a href="{% url "deleted" %}">Suppression Fiches Individuelles</a></li>
{% endif %}
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-baby-formula"></span> Actes de Naissance</a>
<ul class="dropdown-menu">
<li><a href="{% url "BChome" %}">Accueil Actes de Naissance</a></li>
<li><a href="{% url "BCform" %}">Création Actes de Naissance</a></li>
<li><a href="http://demoged.datasystems.fr:8090/">Consultation Actes de Naissance</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-eye-open"></span> Actes de Reconnaissance / Adoption </a>
<ul class="dropdown-menu">
<li><a href="{% url "BCnotfound" %}">Accueil Actes de Reconnaissance</a></li>
<li><a href="{% url "BCnotfound" %}">Création Actes de Reconnaissance</a></li>
<li><a href="{% url "BCnotfound" %}">Consultation Actes de Reconnaissance</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-heart"></span> Actes de Mariage</a>
<ul class="dropdown-menu">
<li><a href="{% url "BCnotfound" %}">Accueil Actes de Mariage</a></li>
<li><a href="{% url "BCnotfound" %}">Création Actes de Mariage</a></li>
<li><a href="{% url "BCnotfound" %}">Consultation Actes de Mariage</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-flash"></span> Actes de Divorce</a>
<ul class="dropdown-menu">
<li><a href="{% url "BCnotfound" %}">Accueil Actes de Divorce</a></li>
<li><a href="{% url "BCnotfound" %}">Création Actes de Divorce</a></li>
<li><a href="{% url "BCnotfound" %}">Consultation Actes de Divorce</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-fire"></span> Actes de Décès</a>
<ul class="dropdown-menu">
<li><a href="{% url "BCnotfound" %}">Accueil Actes de Décès</a></li>
<li><a href="{% url "BCnotfound" %}">Création Actes de Décès</a></li>
<li><a href="{% url "BCnotfound" %}">Consultation Actes de Décès</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-book">
</span> Tables Annuelles & Décennales <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-file">
</span> Edition Tables annuelles
</a>
<ul class="dropdown-menu">
<li><a href="{% url "annuel" %}">Naissances</a></li>
<li><a href="{% url "BCnotfound" %}">Reconnaissances</a></li>
<li><a href="{% url "BCnotfound" %}">Mariages</a></li>
<li><a href="{% url "BCnotfound" %}">Décès</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-book"></span> Edition Tables décennales</a>
<ul class="dropdown-menu">
<li><a href="{% url "BCnotfound" %}">Naissances</a></li>
<li><a href="{% url "BCnotfound" %}">Reconnaissances</a></li>
<li><a href="{% url "BCnotfound" %}">Mariages</a></li>
<li><a href="{% url "BCnotfound" %}">Décès</a></li>
</ul>
</li>
</ul>
</li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
<span class="glyphicon glyphicon-list-alt">
</span> Recensement
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "{% url "Rhome" %}"> <span class="glyphicon glyphicon-th-list"></span> Liste Recensement </a></li>
<li><a href = "{% url "Rform" %}"> <span class="glyphicon glyphicon-file"></span> Edition de l'Attestation de Recensement </a></li>
</ul>
</li>
{% endif %}
<ul class="nav navbar-nav navbar-right">
{% if user.is_authenticated %}
<li><a href="{% url "logout" %}" ><span class="glyphicon glyphicon-log-out"></span> Déconnexion </a></li>
<li><a>{{user.username}} </a></li>
{% else %}
<li><a href="{% url "login" %}" style = "padding-left: 600px"><span class="glyphicon glyphicon-log-in"></span> Connexion </align></a></li>
{% endif %}
{% if request.user|has_group:"admin" %}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/admin.png' %}{{ user.get_profile.avatar }}">
{% elif request.user|has_group:"visiteur"%}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/visiteur.png' %}{{ user.get_profile.avatar }}">
{% elif request.user|has_group:"employé"%}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/employé.png' %}{{ user.get_profile.avatar }}">
{% elif request.user|has_group:"officier"%}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/officier.png' %}{{ user.get_profile.avatar }}">
{% elif request.user|has_group:"maire"%}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/maire.png' %}{{ user.get_profile.avatar }}">
{% endif %}
</ul>
</ul>
</div>
</div>
</div>
</nav>
<script>
(function($){
$(document).ready(function(){
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
</script>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<div class="logo">
<img src="{% static 'images/logo.png' %}" class="img-responsive center-block" alt="Logo">
</div>
</div>
<div class="col-md-10">
<div class="title">
{% block title %}
{% endblock %}
</div>
</div>
</div>
</div>
{% if user.is_authenticated %}
<div class="container-fluid">
<div class="row">
<div class="col-md-2 sidebar1">
<div class="left-navigation">
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-home"></span> Accueil</strong></h5>
<li><a href="{% url "accueil" %}"> Accueil</a></li>
</ul>
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-book"></span> Informations Mairie</strong></h5>
{% if request.user|has_group:"admin" %}
<li><a href="{% url "Mairieform" %}">Créer/Editer les informations</a></li>
{% endif %}
<li><a href="{% url "Mairieresume" %}">Consulter les informations</a></li>
</ul>
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-baby-formula"></span> Actes Etat Civil</strong></h5>
<li><a href="{% url "home" %}">Fiches Identités</a></li>
<li><a href="{% url "BChome" %}">Actes de Naissance</a></li>
<li><a href="{% url "BCnotfound" %}">Actes de Reconnaissance / Adoption</a></li>
<li><a href="{% url "BCnotfound" %}">Actes de Mariage</a></li>
<li><a href="{% url "BCnotfound" %}">Actes de Divorce</a></li>
<li><a href="{% url "BCnotfound" %}">Actes de Décès</a></li>
</ul>
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-baby-formula"></span> Tables Annuelles & Décennales</strong></h5>
<li><a href="{% url "annuel" %}">Tables Annuelles</a></li>
<li><a href="{% url "BCnotfound" %}">Tables Décennales</a></li>
</ul>
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-baby-formula"></span>Recensement</strong></h5>
<li><a href="{% url "Rhome" %}">Liste de Recensement</a></li>
<li><a href="{% url "Rform" %}">Attestation de Recensement</a></li>
</ul>
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-book"></span> DatasystemsDOC</strong></h5>
<li><a href="https://demoged.datasystems.fr:8090/frontend.jsp?folderId=8552450">Individus</a></li>
<li><a href="https://demoged.datasystems.fr:8090/frontend.jsp?folderId=8978465">Tables</a></li>
<li><a href="https://demoged.datasystems.fr:8090/frontend.jsp?folderId=8978476">Recensement</a></li>
</ul>
{% if request.user|has_group:"admin" %}
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-baby-formula"></span> Configuration</strong></h5>
<li><a href="{% url "options" %}">Thème</a></li>
</ul>
{% endif %}
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-baby-formula"></span> Aide & Support</strong></h5>
<li><a href="{% url "BCnotfound" %}">Besoin d'aide ?</a></li>
<li><a href="{% url "BCnotfound" %}">Mentions légales</a></li>
</ul>
</div>
</div>
<body>
<div class="col-md-10">
{% block content %}
{% endblock content %}
</div>
</body>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<footer>
<p class="text-muted footer"> © DatasystemsEC 2017 - Tous droits réservés <br /> Version Démo</p>
</footer>
</div>
</div>
</div>
{% endif %}
</html>
我添加了一些课程row和.col-md-x。我想用Bootstrap网格正确地构建我的脚本，但我以前从未这样做过。
1 个答案:
答案 0 :(得分：0)
我有一些建议 -
<强>一号
您说您的网站将以所有屏幕尺寸查看，因此您必须使其响应。
为了使网站在引导程序中响应，您需要使用所有responsive grid classes --- col-sm-* col-xs-* col-md-* col-lg-*。您的设计在xs和sm设备中看起来不合适。
<强>第2期
您不需要在导航中使用col-md-*，因为它会自动占据全宽。
<强>第3期
变体部分中的您正在使用空白.col-md-1，而不是如何在引导程序中实现空格间距而是使用offset类。使用.col-md-1 col-md-offset-1它会创建一个空白列。
<强> 4号
您的设计在超小型设备上看起来不太好看。尝试为xs设备引入更多行，以便将你的内容堆叠在中间部分（虽然这是主观的，因为我不知道你将会拥有什么内容。只是我的一般想法。）< / p>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？