Я пытаюсь создать простое веб-приложение Django, которое я написал сам. Но я абсолютно не знаю, как создать его так, как я хочу. HTML и CSS похожи на Word, если вы попытаетесь вставить простое изображение, и это разрушит весь ваш макет и дизайн файла Word. Я совсем не понимаю ...
Я использую этот шаблон HTML : https://colorlib.com/wp/template/tools-ui-kit/
DEMO : https://colorlib.com/preview/theme/tools/
И я использую эту Боковую панель : https://bootstrapious.com/p/bootstrap-sidebar#further-improvements
Я нарисовал Скриншот , чтобы вы могли видеть, что я хочуархив и текущее поведение:
Я хочу центрировать стол независимо от того, есть ли перед ним кнопка или нет. Я хочу одинаковые отступы влево и вправо независимо от того, свернута ли боковая панель или нет. Красный показывает действительные значения, Зеленый показывает значение, которое я хочу использовать, но динамическое.
Детали <script> и Детали <link>, которые включают в себя всеСкрипты и CSS-файлы включены в base_generic.html, который является частью любого другого html-файла.
Это мой CSS-файл :
.sidebar-nav {
margin-top: 20px;
padding: 0;
list-style: none;
}
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #DDDDDD;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #DDDDDD;
}
#sidebarCollapse {
/*width: 40px;*/
height: 40px;
/*display: block;*/
/*position: absolute;*/
/*margin-left: 400px;*/
background: #f5f5f5;
}
#sidebarCollapse span {
width: 80%;
height: 2px;
margin: 0 auto;
display: block;
background: #555;
transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
}
#sidebarCollapse span:first-of-type {
/* rotate first one */
transform: rotate(45deg) translate(2px, 2px);
}
#sidebarCollapse span:nth-of-type(2) {
/* second one is not visible */
opacity: 0;
}
#sidebarCollapse span:last-of-type {
/* rotate third one */
transform: rotate(-45deg) translate(1px, -1px);
}
#sidebarCollapse.active span {
/* no rotation */
transform: none;
/* all bars are visible */
opacity: 1;
margin: 5px auto;
}
.wrapper {
display: flex;
align-items: stretch;
perspective: 1500px;
}
#sidebar {
min-width: 400px;
max-width: 400px;
background: #343A40;
color: #fff;
transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
transform-origin: center left; /* Set the transformed position of sidebar to center left side. */
}
#sidebar.active {
margin-left: -400px;
transform: rotateY(100deg); /* Rotate sidebar vertically by 100 degrees. */
}
И наконец, этомой HTML-файл :
{% extends "base_generic.html " %}
{% block content %}
<div class="main-section">
<section class="ftco-section pb-md-3 bg-dark">
</section>
<div class="wrapper" id="carousel">
<nav class="active" id="sidebar">
<div class="sidebar-header">
<h1 class="heading-section mb-4 pb-md-3">SIP-Benutzer</h1>
</div>
<h4 class="heading-section mb-4 pb-md-3">Was ist ein SIP-Benutzer?</h4>
<p>
Mit einem SIP-Benutzer loggen Sie sich auf Ihrem Telefon Endgerät oder in der Telba Cloud App ein.
Der SIP-Benutzer enthält den Nutzernamen das Passwort die Nebenstelle und die Nummer die nach außen hin
signalisiert wird sowie der angezeigte Name für interne Anrufe.
Sie müssen zunächst ihre SIP-Nutzer eintragen. Anschließend können Sie über die Tabellen "Funktionen" oder.
"Routen" einstellen, wie dieser SIP Nutzer behandelt werden soll.
Soll der SIP-Nutzer zum Beispiel eine Fax2Mail Adresse darstellen muss man nach dem Eintragen des SIP-Nutzers
zur Funktiostabelle wechseln und entsprechend Fax2Mail für die Durchwahl des SIP-Nutzers erstellen.
</p>
</nav>
<button class="btn btn-outline-info" id="sidebarCollapse" type="button">
<!-- <i class="ion-ios-more"></i> Was ist ein SIP-Benutzer?-->
<i class="ion-ios-more"></i> Hilfe
</button>
<div class="container-table">
<section>
<h1 class="text-center">SIP-Benutzer</h1>
{% if sipuser_list %}
<table class="table table-hover">
<thead>
<tr>
<th scope="col">CallerID</th>
<th scope="col">Name</th>
<th scope="col">Nebenstelle</th>
<th scope="col">Externe Anzeigenummer</th>
<th scope="col">Sip-User</th>
<th scope="col">Sip-Password</th>
<th scope="col">Aktionen</th>
</tr>
</thead>
<tbody>
{% for sipuser in sipuser_list %}
<tr>
<th scope="row">{{ sipuser.CALLERID }}</th>
<th>{{ sipuser.NAME }}</th>
<th>{{ sipuser.NST }}</th>
<th>{{ sipuser.EXTSIGNALNUMBER }}</th>
<th>{{ sipuser.SIPUSER }}</th>
<th>{{ sipuser.SIPPASSWD }}</th>
<th><a href="{{ sipuser.get_absolute_url }}">View</a> -
<a href="{% url 'sipuser-update' sipuser.pk %}">Update</a> -
<a href="{% url 'sipuser-delete' sipuser.pk %}">Delete</a>
</th>
</tr>
{% endfor %}
</tbody>
</table>
<!-- <p class="col-md-4 blockquote">-->
<!-- Test TestTest TestTestTest TestTestTestTest TestTestTestTestTestTest TestTestTestTestTestTest-->
<!-- TestTestTestTestTestTestTest TestTestTestTestTestTestTestTestTest-->
<!-- TestTestTestTestTestTestTestTestTestTest-->
<!-- </p>-->
{% else %}
<p class="text-center">There are no contexts in the library.</p>
{% endif %}
{% endblock %}
</section>
</div>
</div>
</div>