hmm: Hausaufgabe: Layout mit Bootstrap nachbauen? Hä?

SELF-Forum

Hausaufgabe: Layout mit Bootstrap nachbauen? Hä?

hmm
– Informationen zu den Bewertungsregeln

Hi Leute,

bevor ich mit meinem webseitenprojekt weitermachen kann muss ich zu morgen meine zweiwöchigen Hausaufgaben für den webkurs fertigmachen den ich dieses semester belegt habe.

ich soll u.a. das folgende layout in bootstrap nachbauen:

<body>
        
        <div class="row">
            <header class="col-12">
                <h1>Max's Homepage</h1>
            </header>
        </div>
        
        <div class="row">
            <nav id="navMain" class="col-3">
                <ul>
                    <li><a href="WelcomePage.html#top">Willkommen</a></li>
                    <li><a href="Blog.html">Blog</a></li>
                    <li><a href="ContactPage.html">Kontakt</a></li>
                    <li><a href="About.html">Über den Autor</a></li>
                </ul>
            </nav>
            <main class="col-9">
                <article>
                  <h2>Lorem ipsum</h2> 
                  <p>dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>

                <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>

                <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>

                <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>

                <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. </p>
                </article>
                <article>
                  <h2>Lorem ipsum</h2> 
                  <p>dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>

                <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>

                <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>

                <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>

                <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. </p>
                </article>
            </main>
        </div>
        
        <footer class="row">
            <nav class="col-12">
                <ul>
                    <li><a href="PrivacyRegulations.html">Datenschutzerklärung</a></li> 
                    <li><a href="Impressum.html">Impressum</a></li>
                </ul>
            </nav>
        </footer>
    </body>

ich denke mal, dass ich statt nav, footer, main jetzt passende bootstrap sachen benutzen muss? könnt ihr mir sagen was der entsprechende bootstrapersatz dafür ist (beim googlen find ich nur div sachen...)? muss ich auch die css sachen per bootstrap machen?

Beitrag melden
–
Informationen zu den Bewertungsregeln

akzeptierte Antworten

  1. Hausaufgabe: Layout mit Bootstrap nachbauen? Hä?

    hmm
    – Informationen zu den Bewertungsregeln

    Erstellen Sie nun mit Hilfe des Gridsystems das selbe Layout wie in der vorherigen Aufgabe 4.1. Dabei definiert Bootstrap standardmäßig bestimmte Breakpoints für unterschiedliche Geräteklassen. Nutzen Sie > für das Einspalten-Layout die Klassen für Extra Small Devices und für das Zweispalten-Layout die anderen >Geräteklassen. Experimentieren Sie mit flexiblen und flüssigen Containern. Was ist der Unterschied?

    wie versteht ihr diese formulierung? ist "erstellen sie .. das selbe layout" die erste teilaufgabe? oder fängt die aufgabe erst bei "nutzen sie für..." an? so wie ich das verstehe muss ich css und head/main/footer/nav gegen bootstrapsachen austauchen oder wie? :/

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Hausaufgabe: Layout mit Bootstrap nachbauen? Hä?

      MrMurphy1 (Versionen)
      – Informationen zu den Bewertungsregeln

      Hallo

      wie versteht ihr diese formulierung? ist "erstellen sie .. das selbe layout" die erste teilaufgabe?

      Ja.

      so wie ich das verstehe muss ich css und head/main/footer/nav gegen bootstrapsachen austauchen oder wie?

      Nein. Das ist bereits eine fast fertige Bootstrap Seite.

      Du musst nur noch einen umgebenden Container erstellen und einige Klassen für Bootstrap anpassen. Alle mit col- und einer Zahl. Zum Beispiel col-12. Darauf zielt auch die Fragestellung ab.

      Experimentieren Sie mit flexiblen und flüssigen Containern. Was ist der Unterschied?

      Das kannst du direkt bei Bootstrap nachlesen und ist wichtig für den noch fehlenden umgebenden Container.

      Insgesamt erfordert die Lösung etwa 5 Minuten. Und lass die Finger von den HTML-Elementen, die passen bereits zu einem Blindtext. Am CSS musst du schon gar nichts ändern.

      Gruss

      MrMurphy

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Hausaufgabe: Layout mit Bootstrap nachbauen? Hä?

        hmm
        – Informationen zu den Bewertungsregeln

        danke, die class dinger sind mir erst jetzt aufgefallen.

        soll bootstrap das css jetzt ersetzen?

        <div class="container-fluid"> 
            
            <div class="row">
                <header class="col-xs-12">
                    <h1>Max's Homepage</h1>
                </header>
            </div>
...
</div>

        so ein container und bei col-12 usw einfach ein -xs einfügen? wenn ich das richtig verstehe würde dann ein class="col-xs-12" das alte css zum header ersetzen? oder was tut das?

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Hausaufgabe: Layout mit Bootstrap nachbauen? Hä?

          hmm
          – Informationen zu den Bewertungsregeln

          bin gerade dabei mich einzulesen in die geschichte. diese buchstaben und nummern sind anscheind für die positionierung im zusammenhang mit der bildschirmgröße gut:

          <div class="container-fluid">
 <div class="row" id="row1">
 <div class="col-xs-3 col">3 Spalten</div>
 <div class="col-xs-3 col">3 Spalten</div>
 <div class="col-xs-3 col">3 Spalten</div>
 <div class="col-xs-3 col">3 Spalten</div>
 </div>
</div>

          container-fluid für einen flüssigen container ich brauche anscheind ein beispiel mit flüssigen und eins mit container für ein flexiblen container. -> was wohl die lösung eines teils der aufgabe wäre?!?

          flüssiger container stellt die vier spalten nebeneinander da und der flexible würde ab einer bestimmten größe die zuklein ist nurnoch drei spalten in einer zeile anzeigen und die vierte darunter?!?

          Nutzen Sie für das Einspalten-Layout die Klassen für Extra Small Devices und für das Zweispalten-Layout die anderen Geräteklassen

          wie mach ich das mit bootstrap? ich dachte ich kann css nur wechseln indem ich mediaquerys verwende?

          bei dem folgenden, stimmt da die syntax für -webkit... und -moz...? (ich habs nur in chrome getestet und da funktioniert das, aber meine entwicklungsumgebung mekert bei webkit und moz...)

          @media ( orientation: landscape) {
    main {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
    }
}
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Hausaufgabe: Layout mit Bootstrap nachbauen? Hä?

            hmm
            – Informationen zu den Bewertungsregeln

            mein aktueller versuch ist es den ganzen mist entsprechend der bildschirmgröße auf 1 spalte bzw 2 spalten zu verteilen

            <body>
        <div class="container-fluid"> 
            
            <div class="row">
                <header class="col-xs-1 col-sm-2 col-md-2">
                    <h1>Max's Homepage</h1>
                </header>
            </div>
            
            <div class="row">
                <nav id="navMain" class="col-xs-1 col-sm-2 col-md-2">
                    <ul>
                        <li><a href="WelcomePage.html#top">Willkommen</a></li>
                        <li><a href="Blog.html">Blog</a></li>
                        <li><a href="ContactPage.html">Kontakt</a></li>
                        <li><a href="About.html">Über den Autor</a></li>
                    </ul>
                </nav>
                <main class="col-xs-1 col-sm-12 col-md-12">
                    <article>
                      <h2>Lorem ipsum</h2> 
                      <p>dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
    
                    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
    
                    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
    
                    <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
    
                    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. </p>
                    </article>
                    <article>
                      <h2>Lorem ipsum</h2> 
                      <p>dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
    
                    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
    
                    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
    
                    <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
    
                    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. </p>
                    </article>
                </main>
            </div>
            
            <footer class="row">
                <nav class=""col-xs-1 col-sm-2 col-md-2">
                    <ul>
                        <li><a href="PrivacyRegulations.html">Datenschutzerklärung</a></li> 
                        <li><a href="Impressum.html">Impressum</a></li>
                    </ul>
                </nav>
            </footer>
        </div>
    </body>

            funktioniert aber noch nicht so ganz, ist das der richtige weg?

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Hausaufgabe: Layout mit Bootstrap nachbauen? Hä?

              MrMurphy1 (Versionen)
              +1 Informationen zu den Bewertungsregeln

              Hallo

              Du denkst und machst das viel zu kompliziert. Die Aufgabe fordert nur und ausschließlich die Angaben umzusetzen.

              Änderungen am CSS von Bootstrap oder gar eigenes CSS sind nicht gefordert und nicht erforderlich.

              Den umschließenden Container mit der der Klasse "container-fluid" hast du erstellt. Ich kenne die Aufgabe 4.1 nicht. Wenn dort für den umschließenden Container die Klasse "container" verwendet wurde solltest du ihn auch in dieser Aufgabe verwenden. Ansonsten kannst du einen wählen.

              In dem Quellcode sollen nun nur noch die Breakpoints über die dafür von Bootstrap vorgesehen Klassen nach den Vorgaben gesetzt werden. Dabei sollen die vorgegebenen Zahlen (3, 9 und 12) jeweils beibehalten werden. Deshalb werden sie ja vorgegeben.

              Das sind vier Stück. header, nav mit der id navMain, main und nav im Footer.

              Nutzen Sie für das Einspalten-Layout die Klassen für Extra Small Devices

              Das sind in einem 12er-Grid die col mit 12. In dem vorgegebenen Quelltext somit header und nav im footer. Extra small Devices (Extra kleine Geräte) bekommen in Bootstrap den Zusatz xs. Also bekommen header und nav im footer nur jeweils die Klasse col-xs-12 und keine weiteren.

              für das Zweispalten-Layout die anderen Geräteklassen

              Das betrifft nav mit der id navMain und main. Die anderen Geräteklassen sind sm, md und lg. Das nav mit der id navMain bekommt also die drei Klassen "col-sm-3 col-md-3 col-lg-3" und main die Klassen "col-sm-9 col-md-9 col-lg-9".

              Damit sind alle Änderungen im Quelltext erledigt und du musst nur noch den Unterschied zwischen den Klassen container und container-fluid erklären.

              Nachtrag: Wenn in der Aufgabe 4.1 noch andere Layoutangaben gefordert wurden sollen die in dieser Aufgabe auch durchgeführt werden, falls sie noch nicht vorhanden sind.

              Gruss

              MrMurphy

              Beitrag melden
              +1
              Informationen zu den Bewertungsregeln

              1. Hausaufgabe: Layout mit Bootstrap nachbauen? Hä?

                hmm
                – Informationen zu den Bewertungsregeln

                danke!

                ich hab jetzt eins der beiden css dateien drin gelassen und gemerkt, dass bootstrap macht, dass ich das zweite nicht mehr brauche (in 4.1 habe ich media querys verwendet um das richtige auszuwählen)

                container-fluid fügt einen rand zu den ich bei container nicht habe

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Hausaufgabe: Layout mit Bootstrap nachbauen? Hä?

                  MrMurphy1
                  – Informationen zu den Bewertungsregeln

                  Hallo

                  ich hab jetzt eins der beiden css dateien drin gelassen und gemerkt, dass bootstrap macht, dass ich das zweite nicht mehr brauche (in 4.1 habe ich media querys verwendet um das richtige auszuwählen)

                  Nix verstehn. Wenn du die Aufgabe 4.1 so gelöst hast wie diese enthält die wahrscheinlich auch Fehler.

                  container-fluid fügt einen rand zu den ich bei container nicht habe

                  Das soll aber hoffentlich nicht der Unterschied zwischen den beiden sein.

                  Gruss

                  MrMurphy

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln