Dieses Forum nutzt Cookies
Dieses Forum verwendet Cookies, um deine Login-Informationen zu speichern, wenn du registriert bist, und deinen letzten Besuch, wenn du es nicht bist. Cookies sind kleine Textdokumente, die auf deinem Computer gespeichert sind; Die von diesem Forum gesetzten Cookies düfen nur auf dieser Website verwendet werden und stellen kein Sicherheitsrisiko dar. Cookies auf diesem Forum speichern auch die spezifischen Themen, die du gelesen hast und wann du zum letzten Mal gelesen hast. Bitte bestätige, ob du diese Cookies akzeptierst oder ablehnst.

Ein Cookie wird in deinem Browser unabhängig von der Wahl gespeichert, um zu verhindern, dass dir diese Frage erneut gestellt wird. Du kannst deine Cookie-Einstellungen jederzeit über den Link in der Fußzeile ändern.

  div Container bei col-sm nicht anzeigen.
Geschrieben von: Franziska1993 - Gestern, 19:40 - Forum: Bootstrap 4 - Antworten (2)

Hallo Forum,

ich fange ganz frisch mit Bootstrap 4 an und habe mir so einiges angesehen bzw. angelesen.


Bevor ich mit meinen Webprojekt angefangen bin, habe ich mir andere responsive HP's angesehen.

Da ist mir aufgefallen, daß der Betreiber Zellen einer Tabelle nicht anzeigen läßt, wenn man die 
Mobile Ansicht bei Chrome aufruft.

Wie kann man sowas nach programmieren in Bootstrap 4?

Kann man eine einzelne Zelle bzw. Div Container ausblenden oder geht das nur über 


Code:
.d-{sm,md,lg,xl}-none -> Element ausblenden


Gruß Franziska1993

PS: Anbei zwei Screenshots (Desktop- und Mobileansicht)



Angehängte Dateien Thumbnail(s)
       
Drucke diesen Beitrag

  Wie verwende ich Bootstrap richtig in Angular 2++? (Anfängerfrage)
Geschrieben von: noop - 10.09.2019, 20:52 - Forum: Bootstrap 4 - Keine Antworten

Moin,

ich hab mir grad eine kleine test-app mit Angular 8 (ich glaube) erstellt und will eine Komponente für das Hauptmenü mit Bootstrap 4 responsiv stylen.

Ich bin hier nach folgender Anleitung vorgegangen, nachdem ich vorher schon versucht hatte, Bootstrap direkt in der Angular-CLI zu installieren (Bootstrap-Modul zwar soweit erfolgreich eingebunden, aber das Ergebnis war das gleiche wie nach folgendem Versuch:

https://medium.com/codingthesmartway-com...3c3cee3f4a

Statt dem Jumbotron habe ich den Beispielcode von getbootstrap.com für die navbar (gleich die erste) ausprobiert.

Ergebnis war, das die App beim kompilieren zwar keine Fehler gemeldet hat, aber trotzdem nur einen white-screen zeigt.

Die Zeilen für das css und das javascript habe ich wie in obiger Anleitung beschrieben eingebunden, allerdings die aktuellen Zeilen von getbootstrap.com.

Einfache Sachen wie die Buttons funktionieren allerdings.

Kann mir jemand helfen, ich hab grad keinen Plan wo das Problem ist.
In den <li>-Elementen hab ich die href-Attribute durch den routerLink ersetzt. Ohne diese Änderung würde der Beispielcode zwar laufen, aber bringt mir natürlich nichts.

  1. <nav class="navbar navbar-expand-lg navbar-light bg-light">    <a class="navbar-brand" href="#">Navbar</a>    <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" routerLink="/home">Home<span class="sr-only">(current)</span></a>        </li>        <li class="nav-item">          <a class="nav-link" routerLink="/beispiele">Beispiele</a>        </li>        <li class="nav-item">            <a class="nav-link" routerLink="/ueberuns">Über uns</a>        </li>        <li class="nav-item">            <a class="nav-link" routerLink="/kontakt">Kontakt</a>        </li>
Vielen Dank!

Drucke diesen Beitrag

Photo Bootstrap CSS Ferhler
Geschrieben von: SniperNightmare - 07.09.2019, 10:41 - Forum: Bootstrap 4 - Keine Antworten

Guten Tag,

ich bin ein Anfänger in Bootstrap und erlerne mir es gerade. Anwendung in Chrome
Jetzt habe ich eine Nav Klasse im HTML Code eingefügt und anscheinend wird die css-Datei nicht geladen und es kommen folgende Fehler:

Access to CSS stylesheet at 'file:///C:/Users/sven4/Desktop/Webseite/bootstrap-4.3.1-dist/css/bootstrap.min.css' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.


index.html:9 GET file:///C:/Users/sven4/Desktop/Webseite/bootstrap-4.3.1-dist/css/bootstrap.min.css net::ERR_FAILED


index.html:1 Access to script at 'file:///C:/Users/sven4/Desktop/Webseite/bootstrap-4.3.1-dist/js/bootstrap.min.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.


index.html:60 GET file:///C:/Users/sven4/Desktop/Webseite/bootstrap-4.3.1-dist/js/bootstrap.min.js net::ERR_FAILED

Ich hoffe Ihr könnt mir helfen und über eine Rückmeldung würde ich mich freuen.


HTML5
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <!-- Required meta tags -->
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.  
  8.     <!-- Bootstrap CSS -->
  9.     <link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  10.   </head>
  11.   <body>
  12.  
  13.      
  14.      
  15.      
  16. <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  17.           <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  18.             <span class="navbar-toggler-icon"></span>
  19.           </button>
  20.         <a class="navbar-brand" href="#">
  21.             <img src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
  22.             Portfolio
  23.         </a>
  24.      
  25.         <div class="collapse navbar-collapse" id="navbarSupportedContent">
  26.             <ul class="navbar-nav mr-auto">
  27.                 <li class="nav-item">
  28.                     <a class="nav-link active" href="index.html">Home</a>
  29.                 </li>
  30.                 <li class="nav-item">
  31.                     <a class="nav-link disabled" href="#">Lebenslauf</a>
  32.                 </li>
  33.                 <li class="nav-item">
  34.                     <a class="nav-link" href="#">Skills</a>
  35.                 </li>
  36.                 <li class="nav-item dropdown">
  37.                     <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  38.                         Dienstleistungen
  39.                     </a>
  40.                     <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
  41.                         <a class="dropdown-item" href="#">Unterpunkt 1</a>
  42.                         <a class="dropdown-item" href="#">Unterpunkt 2</a>
  43.                         <a class="dropdown-item" href="#">Unterpunkt 3</a>
  44.                     </div>
  45.                 </li>
  46.             </ul>
  47.             <form class="form-inline my-2 my-lg-0">
  48.                 <button class="btn btn-outline-success my-2 my-sm-0">Kontakt</button>
  49.             </form>
  50.         </div>
  51.     </nav>
  52.      
  53.      
  54.      
  55.      
  56.  
  57.     <!-- jQuery first, then Tether, then Bootstrap JS. -->
  58.     <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  59.     <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  60.     <script src="js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  61.   </body>
  62. </html> 


Drucke diesen Beitrag

  Landing Page
Geschrieben von: CrazyMonkey - 06.09.2019, 09:38 - Forum: Bootstrap 4 - Antworten (1)

Guten Tag, 

Ich bin ein Bootstrap anfänger und möchte gerne eine LandingPage erstellen, aber ich weiss nicht wie ich das mache. Hab im Internet gesucht aber finde nichts das ich brauche und deswegen hab ich den Thread geöffnet. Hoffentlich kann mir jemand helfen.

Problem 1. 

Wenn ich die Navigation mache dann scrollt sie nicht mit und ich weiss nicht wie ich das responsive bekomme.

Drucke diesen Beitrag

  Positionierung (links und rechts) von 2 Elementen in Card-Header
Geschrieben von: grumpy cat - 01.09.2019, 17:38 - Forum: Bootstrap 4 - Antworten (2)

Guten Abend,

ich möchte in einem Card-Header 2 Elemente platzieren: 
Einmal einen Card-Titel (links) und einen Button der rechts ausgerichtet werden soll. Mein Code (der in einem Django-Template ist) sieht wie folgt aus:

Code:
  <section id="details" class="col-sm-6 mx-auto">
      <div class="card">
        <h5 class="card-header">Post Id-{{ post.pk }} <a href="#" class="btn btn-primary ml-auto">Edit</a></h5>
        <div class="card-body">
          <h5 class="card-title"><small>Title:</small> {{ post.title}}</h5>
          <p class="card-text"><small>Category:</small> {{ post.category}}</p>
          <p class="card-text"><small>Publish Date:</small> {{ post.publish_date}}</p>

        </div>
      </div>
  </section>
Was ich bisher versucht habe war: ml-auto bzw. mr-auto in der class des buttons bzw. in der h5-class habe ich text-right eingefügt. Dann sind aber der Titel und der Button rechts ausgerichtet.
Hier noch ein Screenshot wie das Ganze momentan aussieht: 
Bootstrap-Card

Vielen Dank schon jetzt für eine Antwort.

grumpy cat

Drucke diesen Beitrag

  Modal mit autoload
Geschrieben von: Harald.Lichowski - 31.08.2019, 09:04 - Forum: Bootstrap 4 - Antworten (3)

Hallo allerseits,

ich bin aktuell auf der suche nach einem Modal mit autoload für Bootstrap

Hat da jemand was passendes für die aktuelle Bootstrap Version?

LG

Drucke diesen Beitrag

Music BS4 fixed Header, left sidebar (y-scroll), main content (y-scroll)
Geschrieben von: Reaper79 - 30.08.2019, 22:10 - Forum: Bootstrap 4 - Keine Antworten

Hi,

ich würde gerne das Layout in dem unten gezeigten Bild "einfach mit BS4" nachbauen, aber irgendwie bin ich zu doof.

[img][Bild: jyalunlr.png][/img]

ich poste auch gerne code, wenn es zu komplex wird ^^

Drucke diesen Beitrag

  Div hover + Alles in der Div soll mit-hovern
Geschrieben von: Spike - 26.08.2019, 16:01 - Forum: CSS - Antworten (3)

Code:
input    { width: 1px; height: auto;  font-family: 'Roboto Mono', monospace; font-size: 1rem; padding: 0.3rem; }
textarea { width: 1px; height: 140px; font-family: 'Roboto Mono', monospace; font-size: 1rem; padding: 0.3rem; }

#nav a:hover {
  left: 0;
  input     { width: 287px; }
  textarea: { width: 288px; }
}

[Bild: BootstrapForum_001.jpg]

Wie kann man das nur machen?
Code:
#nav a:hover und alles drinnen soll sich vergrößern...

Drucke diesen Beitrag

  Hover Effekt
Geschrieben von: aggis - 26.08.2019, 10:08 - Forum: HTML - Antworten (1)

Guten Morgen liebe Forum Mitglieder,

da ich leider nicht so viel Erfahrung in dem Bereich habe, wollte ich nachfragen, ob mir jemand mit einem Code für ein Hover-Effekt Element behilflich sein kann.
Das Ganze soll im Besten Fall wie hier aussehen: https://www.groupon.de/merchant?utm_sour...on-header1 (das 6er Element)

Ich habe bis jetzt keine Antwort auf mein Problem gefunden, daher wäre über jegliche Tipps dankbar

VG

Drucke diesen Beitrag

  @font-face via http link geht nicht
Geschrieben von: Spike - 23.08.2019, 14:40 - Forum: HTML - Antworten (3)

Warum funktioniert das nicht...

Code:
@font-face {
  font-family: 'Spike1977'; font-style: normal; font-weight: 400;
  src: local('Spike1977'), url('https://www.spike1977.de/LW/Spike1977.woff2') format('woff2');
}



Wie kann man das lösen? Ich will sie nicht local abrufen sondern via link...

Gruß Blush

Drucke diesen Beitrag

[-]
Willkommen im ersten deutschen Bootstrap-Forum
You have to register before you can post on our site.

Benutzername/E-Mail:


Passwort





[-]
Letzte Beiträge
div Container bei col-sm nicht anzeigen.
Last Post: Franziska1993
Heute 18:18
» Replies: 2
» Views: 16
Modal mit autoload
Last Post: The-Error
12.09.2019 08:26
» Replies: 3
» Views: 159
Wie verwende ich Bootstrap richtig in An...
Last Post: noop
10.09.2019 20:52
» Replies: 0
» Views: 77

[-]
Private Messages
Please login or register to use this functionality.

[-]
Statistics
» Members: 291
» Latest member: Neocrypton
» Forum threads: 248
» Forum posts: 989

Full Statistics

[-]
Tutorials
Get Started
Text/Typography
Gridsystem
Dropdowns
Navigation Bar
Modal
Farben
Jumpotron
Popover
Formulare
Carousel (Slider)
Die Höhe von Elementen mit Klassen h-*
Flip Cards
Bild Overlay-Hover-Effekt
Google Fonts einbinden
Flexbox Bootstrap 4
Responsive Breakpoints

[-]
Wer ist online
There are currently no members online.

>