Ich möchte UI wie in Link, die ich unten zur Verfügung gestellt habe machen. Wie ist es möglich, mit Bootstrap oder mit grundlegenden HTML-Tabelle? in zwei Reihen erstellt werdenBenutzeroberfläche Design mit Bootstrap
Antwort
Dieses Layout kann - ein für die ersten 4 Elemente in der ersten Spalte des großen + Element und ein andere für den Rest 4 kleinen Elemente. Eine Zeile im Bootstrap ist im Grunde eine
Innerhalb der ersten Zeile muss es 2 Spalten mit unterschiedlicher Breite (in Prozent). Der erste könnte <div class="col-xs-3">
sein, während der zweite <div class="col-xs-9">
sein könnte.
[ANMERKUNG]: Die Summe der Zahlen in col-xs-3
und col-xs-9
soll gleich sein.
Das Gleiche gilt für die zweite Zeile. Es gibt 4 Elemente, so dass es leicht zu berechnen wäre:
12/4 = 3
- für jedes Element innerhalb dieser Zeile sollte ein <div class="col-xs-3">
verwendet werden.
Das resultierende HTML würde wie folgt aussehen:
<div>
<div class="row">
<div class="col-sm-3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="col-sm-9"></div>
</div>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
</div>
</div>
Thx. Dieses Beispiel war brillant. Es hat mein Problem gelöst. – user2088073
10 @ user2088073, bitte akzeptieren Sie dies als die richtige Antwort, wenn es Ihnen wirklich geholfen hat. – thexpand
Sie können versuchen, wie dies zu tun:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
</div>
</div>
- 1. Bücher über Android-Benutzeroberfläche Design
- 2. Einfache Form Bootstrap-Design
- 3. Bootstrap volle Breite Design
- 4. Responsive Column Row Design mit Bootstrap
- 5. Bootstrap vs Material Design auswählen
- 6. Design Eingabe in Bootstrap auswählen
- 7. footer design im bootstrap machen?
- 8. Gutes Design und gute Benutzeroberfläche ASP.NET Ajax-Anwendungen?
- 9. Entfernen der Polsterung von Twitter Bootstrap-Design
- 10. Bootstrap-Material-Design-Eingabefeld nicht animieren nicht
- 11. Wie man Responsive Design in Bootstrap anwenden?
- 12. Mit Bootstrap für Angular und Material Design für Angular zusammen
- 13. Bootstrap (CSS) - Overlay One Img über andere mit Responsive Design
- 14. WPF-Touchscreen-Benutzeroberfläche Richtlinien
- 15. Anpassbare Benachrichtigungen Benutzeroberfläche
- 16. Windows Mobile Benutzeroberfläche Vorschläge
- 17. Benutzeroberfläche Interaktion mit der MVVM
- 18. ASP.NET Design-Ansicht - Verschieben von Steuerelementen
- 19. Grafische Benutzeroberfläche
- 20. Benutzeroberfläche Symbole
- 21. Form-Aktionen Klasse ähnliches Design in Twitter Bootstrap 3
- 22. Stellen Bootstrap Spalten stapeln ein Windows-Titel Style Design
- 23. R: Bootstrap BCa Konfidenzintervalle für feste Design-Regression
- 24. XAML Expert Design
- 25. Bootstrap-Gitter für breites Layout im Responsive Design
- 26. Ripple-Effekt funktioniert nicht in Bootstrap Material Design
- 27. Schienen 4 x Bootstrap 3 Datetimepicker: Design ist nicht gut
- 28. Bootstrap-Material-Design: Installieren Sie erfolgreich, aber hat nicht funktioniert
- 29. Kann Header-Hintergrund in Bootstrap-Design nicht ändern
- 30. MYSQL einfach DB Design
seine definitiv möglich. aber du musst es selbst ausprobieren. Wir reparieren den Code hier, schreiben sie nicht für Sie. – MrWitts
Es wird erwartet, dass Sie zumindest versuchen, dies für sich selbst zu programmieren. Stack Overflow ist kein Code-Schreibdienst. Ich würde vorschlagen, dass Sie zusätzliche Recherchen anstellen, entweder über Google oder indem Sie SO suchen, einen Versuch unternehmen und. Wenn Sie immer noch Probleme haben, kommen Sie zurück mit ** Ihrem Code ** und erklären Sie, was Sie versucht haben und warum es nicht funktioniert hat. –