3
votes

Disposition du pied de page, réactivité et masquage sur les petits appareils avec Bootstrap 4

Nouveau sur Bootstrap 4 ici. J'essaie de faire en sorte que mon pied de page soit conforme à la même disposition que la maquette suivante:

Ma meilleure tentative à ce jour est la suivante:

index.html (extrait):

html, body {
    height: 100%;
    font-family: 'Lato';
}

.bordered {
    border-radius: 5px;
    border: 1px solid white;
}

.navbar {
    background-color: #00142E;
}

#navb ul {
    align-items: center;
}

.red-button {
    border-radius: 5px;
    border: 1px solid #A81E30;
    background-color: #A81E30;
    color: beige;
}

.mainlogo {
    height: 50px;
}

.footer-logo {
    height: 100px;
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.linklist {
    list-style-type: none;
    padding-left: 0;
}

.linklist-label {
    font-weight: bolder;
    color: #A81E30;
}

.linklist a.footer-link {
    color: #00142E;
}

.linklist a.footer-link:hover {
    color: gray;
}

main.css:

<!-- footer -->
<hr/>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm">
      <span class="linklist-label">Foobar</span>
      <ul class="linklist">
        <li><a class="footer-link" href="">Fizz</a></li>
        <li><a class="footer-link" href="">Buzz</a></li>
        <li><a class="footer-link" href="">Foobar</a></li>
      </ul>
    </div>
    <div class="col-sm">
      <span class="linklist-label">Other Stuff</span>
      <ul class="linklist">
        <li><a class="footer-link" href="">Cool Links</a></li>
        <li><a class="footer-link" href="">What's New</a></li>
        <li><a class="footer-link" href="">Newsletter</a></li>
      </ul>
    </div>
    <div class="col-sm">
      <span class="linklist-label">Zoo Stuff</span>
      <ul class="linklist">
        <li><a class="footer-link" href="">Zebras</a></li>
        <li><a class="footer-link" href="">Rhinos</a></li>
        <li><a class="footer-link" href="">Monkeys</a></li>
      </ul>
    </div>
  </div>

  <div class="row">
    <div class="col-6">
      <img src="dummy-logo.png" class="img-fluid footer-logo" alt="My logo">
    </div>

    <div class="col-sm">
      <span class="linklist-label">Contact Us</span>
      <br/><span class="fas fa-phone" aria-hidden="true"></span> 800.555.5555
      <br/><span class="fas fa-envelope" aria-hidden="true"></span> <a href="mailto:info@example.com">info@example.com</a>
      <br/><span class="fas fa-map-marker-alt" aria-hidden="true"></span> 123 Testville Rd
      <br/>&nbsp;&nbsp;Testville, XY 12345
    </div>
  </div>
</div>

<div class="row">
  <div class="col-sm"><a href="" class="">Status</a></div>
  <div class="col-sm"><a href="" class="">Legal</a></div>
  <div class="col-sm"><a href="" class="">Privacy</a></div>
  <div class="col-sm"><a href="" class="">Terms</a></div>
</div>

Lorsque cela s'exécute dans le navigateur, j'obtiens:

Comme vous pouvez le voir, je suis un peu là, mais j'ai encore du chemin à parcourir. En ce qui concerne la réactivité, je pense que si l'écran est petit (appareil mobile, etc.) je veux que le pied de page (tout ici) disparaisse complètement.

Quelqu'un peut-il repérer les problèmes de mise en page / positionnement et m'aider à atteindre la fonctionnalité "disparaître sur petit écran" que je recherche?

html css bootstrap-4 responsive-design

1 commentaires

Quelle taille d'écran voulez-vous que le pied de page disparaisse? 320px, 380px, 414px, 575px ou 767px OU quoi?

3 Réponses :

0
votes

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>


<footer class="d-none d-sm-block">
  <div class="container-fluid">
    <div class="row my-2">
      <div class="col-4">
        <div class="footer-col py-5 bg-success">
          <p class="text-white text-center">Title & list items</p>
        </div>
      </div>
      <div class="col-4">
        <div class="footer-col py-5 bg-success">
          <p class="text-white text-center">Title & list items</p>
        </div>
      </div>
      <div class="col-4">
        <div class="footer-col py-5 bg-success">
          <p class="text-white text-center">Title & list items</p>
        </div>
      </div>
    </div>
    <div class="row my-3">
      <div class="col-8">
        <div class="footer-col">
          <figure class="py-5 bg-info">
            <p class="text-white text-center">The image</p>
          </figure>
          <ul class="nav justify-content-around py-1 bg-primary">
            <p class="text-white text-center">Footer nav</p>
          </ul>  
        </div>
      </div>
      <div class="col-4">
        <div class="footer-col py-5 bg-success">
          <p class="text-white text-center">Title & list items</p>
        </div>
      </div>
    </div>
  </div>
</footer>

0 commentaires

1
votes

@media only screen and (max-width: 767px) and (min-width: 480px) {
 .footer{ display: none !important;}
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<hr>        
<div class="container-fluid d-none d-sm-block">
    <div class="row">
        <div class="col-sm-8">
            <div class="row">
                <div class="col-sm-6">
                    <span class="linklist-label">Foobar</span>
                    <ul class="linklist">
                        <li><a class="footer-link" href="">Fizz</a></li>
                        <li><a class="footer-link" href="">Buzz</a></li>
                        <li><a class="footer-link" href="">Foobar</a></li>
                    </ul>
                </div>
                <div class="col-sm-6">
                    <span class="linklist-label">Other Stuff</span>
                    <ul class="linklist">
                        <li><a class="footer-link" href="">Cool Links</a></li>
                        <li><a class="footer-link" href="">What's New</a></li>
                        <li><a class="footer-link" href="">Newsletter</a></li>
                    </ul>
                </div>

                <div class="col-sm-12">
                    <img src="dummy-logo.png" class="img-fluid footer-logo" alt="My logo" id="myLogo">
                </div>
                <div class="col-sm-12">                
                    <div class="row">
                        <div class="col-sm-3"><a href="" class="">Status</a></div>
                        <div class="col-sm-3"><a href="" class="">Legal</a></div>
                        <div class="col-sm-3"><a href="" class="">Privacy</a></div>
                        <div class="col-sm-3"><a href="" class="">Terms</a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <span class="linklist-label">Zoo Stuff</span>
            <ul class="linklist">
                <li><a class="footer-link" href="">Zebras</a></li>
                <li><a class="footer-link" href="">Rhinos</a></li>
                <li><a class="footer-link" href="">Monkeys</a></li>
            </ul>

            <span class="linklist-label">Contact Us</span>
            <br/><span class="fas fa-phone" aria-hidden="true"></span> 800.555.5555
            <br/><span class="fas fa-envelope" aria-hidden="true"></span> <a href="mailto:info@example.com">info@example.com</a>
            <br/><span class="fas fa-map-marker-alt" aria-hidden="true"></span> 123 Testville Rd
            <br/>&nbsp;&nbsp;Testville, XY 12345
        </div>
    </div>
  </div>

Pour faire disparaître votre pied de page pour certains appareils, vous devez mentionner la taille maximale et minimale de l'écran sur lequel vous souhaitez afficher.

.mainlogo {
  height: 50px;
}

.footer-logo {
  height: 100px;
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.linklist {
  list-style-type: none;
  padding-left: 0;
}

.linklist-label {
  font-weight: bolder;
  color: #A81E30;
}

.linklist a.footer-link {
  color: #00142E;
}

.linklist a.footer-link:hover {
  color: gray;
}

#myLogo {
  width: 360px;
  height: 58px;
  border: 1px solid red;
}

0 commentaires

0
votes

Vous pouvez imbriquer des lignes et des colonnes comme ceci:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<hr>        
<div class="container-fluid d-none d-sm-block">
    <div class="row">
        <div class="col-sm-8">
            <div class="row">
                <div class="col-sm-6">
                    <span class="linklist-label">Foobar</span>
                    <ul class="linklist">
                        <li><a class="footer-link" href="">Fizz</a></li>
                        <li><a class="footer-link" href="">Buzz</a></li>
                        <li><a class="footer-link" href="">Foobar</a></li>
                    </ul>
                </div>
                <div class="col-sm-6">
                    <span class="linklist-label">Other Stuff</span>
                    <ul class="linklist">
                        <li><a class="footer-link" href="">Cool Links</a></li>
                        <li><a class="footer-link" href="">What's New</a></li>
                        <li><a class="footer-link" href="">Newsletter</a></li>
                    </ul>
                </div>

                <div class="col-sm-12">
                    <img src="dummy-logo.png" class="img-fluid footer-logo" alt="My logo" id="myLogo">
                </div>
                <div class="col-sm-12">                
                    <div class="row">
                        <div class="col-sm-3"><a href="" class="">Status</a></div>
                        <div class="col-sm-3"><a href="" class="">Legal</a></div>
                        <div class="col-sm-3"><a href="" class="">Privacy</a></div>
                        <div class="col-sm-3"><a href="" class="">Terms</a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <span class="linklist-label">Zoo Stuff</span>
            <ul class="linklist">
                <li><a class="footer-link" href="">Zebras</a></li>
                <li><a class="footer-link" href="">Rhinos</a></li>
                <li><a class="footer-link" href="">Monkeys</a></li>
            </ul>

            <span class="linklist-label">Contact Us</span>
            <br/><span class="fas fa-phone" aria-hidden="true"></span> 800.555.5555
            <br/><span class="fas fa-envelope" aria-hidden="true"></span> <a href="mailto:info@example.com">info@example.com</a>
            <br/><span class="fas fa-map-marker-alt" aria-hidden="true"></span> 123 Testville Rd
            <br/>&nbsp;&nbsp;Testville, XY 12345
        </div>
    </div>
  </div>

html, body {
    height: 100%;
    font-family: 'Lato';
}

.bordered {
    border-radius: 5px;
    border: 1px solid white;
}

.navbar {
    background-color: #00142E;
}

#navb ul {
    align-items: center;
}

.red-button {
    border-radius: 5px;
    border: 1px solid #A81E30;
    background-color: #A81E30;
    color: beige;
}

.mainlogo {
    height: 50px;
}

.footer-logo {
    height: 100px;
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.linklist {
    list-style-type: none;
    padding-left: 0;
}

.linklist-label {
    font-weight: bolder;
    color: #A81E30;
}

.linklist a.footer-link {
    color: #00142E;
}

.linklist a.footer-link:hover {
    color: gray;
}

    #myLogo { display: block; width: 360px; height: 58px; border: 1px solid red; margin: 1em auto;}

Remarques ::

Ce balisage convient parfaitement aux bootstrap 3x et 4x (je n'ai pas essayé 5). En savoir plus sur le système de grille ici: boots4 , boots3 .

La seule différence est la combinaison de classes d-none.d-sm-block qui remplace hidden-xs de bootstrap 3: Cette ou ces classes masqueraient l'élément sur les petits périphériques basés sur les règles du framework @media. En savoir plus sur les classes d'assistance pour l'affichage du contenu ici .

0 commentaires