Pie de página de Bulma – Barcelona Geeks

Bulma es un marco gratuito y de código abierto basado en la propiedad flexbox que se utiliza para crear componentes reutilizables mientras se crean aplicaciones web. Este marco es un marco listo para dispositivos móviles con el que los usuarios pueden ver las aplicaciones web como una aplicación móvil.

El pie de página en Bulma se utiliza para atraer a los usuarios al sitio web y también proporciona enlaces importantes, sobre la empresa, enlaces de páginas de contacto, etc. En Bulma, el pie de página responde, lo que significa que cambiará la interfaz de usuario según los diferentes dispositivos y puede incluir cualquier cosa como columnas, listas, botones, iconos, etc.

Clase de pie de página de Bulma:

pie de página: esta clase se utiliza para agregar un pie de página a su aplicación web.

Sintaxis:

<footer class="footer">
    ....
</footer>

El siguiente ejemplo ilustra el pie de página de Bulma:

Ejemplo: El siguiente ejemplo ilustra el pie de página de Bulma para una página web.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma footer</title>
    <link rel='stylesheet' 
          href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</head>
  
<body class="has-text-centered">
      
  <!-- Header including navbar -->
  <nav class="navbar" 
       role="navigation" 
       aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item has-background-success"
         href="#">
        <h1 class="has-text-white">GeeksforGeeks</h1>
      </a>
    
      <a role="button" 
         class="navbar-burger" 
         aria-label="menu" 
         aria-expanded="false" 
         data-target="navbarBasicExample">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
    
    <div id="navbarBasicExample" 
         class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item"> Home </a>  
        <a class="navbar-item"> Blogs </a>
    
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link"> More </a>
    
          <div class="navbar-dropdown">
            <a class="navbar-item"> About us </a>
            <a class="navbar-item"> Tutorials </a>
            <a class="navbar-item"> Practice </a>
          </div>
        </div>
      </div>
    
      <div class="navbar-end">
        <div class="navbar-item">
          <div class="buttons">
            <a class="button is-success">
              <strong>Sign up</strong>
            </a>
            <a class="button is-light"> Log in </a>
          </div>
        </div>
      </div>
    </div>
  </nav>
  
<!-- Body or Main content -->
  <div class="container content">
    <h1>Welcome to GFG</h1>
    <p>
      A Computer Science portal for geeks. 
      It provides you the well written, 
      well expressed and easy explained CS courses, 
      articles, and programming challenges, etc.
    </p>
  
    <h2>Here! What you get</h2>
    <p>
      Free Tutorials, Millions of Articles, Live,
      Online and Classroom Courses, Frequent Coding 
      Competitions ,Webinars by Industry Experts, 
      Internship opportunities and Job Opportunities.
    </p>
  
    <ul>
      <li>Competitive Programming</li>
      <li>Interview Preparation.</li>
      <li>Coding Challeneges, etc</li>
    </ul>
  </div>
  
    <!--   footer starts from here  -->
  <footer class="footer">
        <!-- Copyright symbol of company -->
      <div class="content has-text-centered">
        <p>Copyright © Geeks</p>
  
      </div>
  
  <!-- Three columns created using columns class of Bulma -->
  <div class="columns">
      <!-- Column 1 -->
    <div class="column">
  
      <!-- Heading is left aligned, medium weight -->
      <h4 class="bd-footer-title 
                 has-text-weight-medium
                 has-text-left">
        GeeksforGeeks
      </h4>
  
      <!-- footer content -->
      <p class="bd-footer-link 
                has-text-left">
        GeeksforGeeks is a web portal for 
        geeks who wants to learn about
        Computer Science and want to see 
        Tutorials, Articles, etc.
      </p>
  
    </div>
  
    <!-- Column 2 -->
    <div class="column">
      <h4 class="bd-footer-title 
                 has-text-weight-medium 
                 has-text-justify">
        Explore
      </h4>
  
      <!-- Column 2 lists with links -->
      <p class="bd-footer-link">
         <a href="https://">
          <span class="icon-text">
            <span>Practice</span>
          </span>
         </a>
          <br />
          <a href="https://">
              <span class="icon-text">
                <span>Blogs</span>
              </span>
            </a>
          <br />
          <a href="https://">
              <span class="icon-text">
                <span>Careers</span>
              </span>
          </a>
      </p>
  
    </div>
  
    <!-- Column 3 -->
    <div class="column">
      <h4 class="bd-footer-title
                 has-text-weight-medium
                 has-text-justify">
        Contact us
      </h4>
  
      <!-- Column 3 lists with links -->
      <p class="bd-footer-link">
          <a href="https://">
              <span class="icon-text">
                <span>Email</span>
              </span>
            </a>
          <br />
          <a href="https://">
              <span class="icon-text">
                <span>Call Us</span>
              </span>
            </a>
          <br />
          <a href="https://">
              <span class="icon-text">
                <span>Chat with us!</span>
              </span>
            </a>
      </p>
  
    </div>
  </div>
</footer>
</body>
</html>

Producción:

Referencia: https://bulma.io/documentation/layout/footer/

Publicación traducida automáticamente

Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta