自定义模态与弹出（自举）

时间：2017-12-11 15:39:51

标签： css twitter-bootstrap bootstrap-modal customization bootstrap-popover

我正在为一位朋友写一个基本网站，他制作短片并希望有一个网站来展示他的作品。

我有一个非常简单的问题，但遗憾的是找不到一个好的（或至少可以理解的）答案。

我有一个连续5张图片的网站，每张图片都是一部短片。

现在我想做某事。显示＆＃34;电影细节＆＃34;像这样

enter image description here

因为我不是＆＃34;亲＆＃34;我正在考虑使用modal或popover，但我正努力尝试自定义两者的布局。

所以我的问题是

  1. 我可以自定义模态和布局吗？ popovers，不仅仅是颜色等？
  2. 我应该先使用一个吗？在我看来，模态是更好的＆＃34;如果定位移动电话，因为弹出窗口通常会对悬停行为作出反应（在许多手机中不可能）

    3. 在这里，我的＆＃34;测试＆＃34; CodePend https://codepen.io/rgomez/pen/opvyNq

    ＆＃13;
    ＆＃13; 
    /* HEADER CSS*/

@font-face {
  font-family: 'CoffeeTin';
  src: url('../fonts/CoffeeTinInitials.eot');
  src: url('../fonts/CoffeeTinInitials.eot?#iefix') format('embedded-opentype'), url('../fonts/CoffeeTinInitials.woff') format('woff'), url('../fonts/CoffeeTinInitials.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

#myHeader .navbar {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: black !important;
}

#myHeader .navbar-brand:hover {
  color: red !important;
}

#myHeader .active {
  font-size: 120%
}

#navbarHome .nav-link {
  font-size: 150%;
  font-family: 'CoffeeTin';
  color: red
}


/* BODY CSS*/

.tooltip>.tooltip-inner {
  background-color: #f00;
  max-width: 1000px
}

.tooltip>.tooltip-arrow {
  border-bottom-color: #f00;
}

.tooltip {
  width: 100%
}

html,
body {
  width: 100%;
  height: 100%
}

#movies {
  margin-top: 4rem;
  margin-bottom: 4rem
}

#movies img {
  transition: all .3s ease-in-out;
}

#movies img:hover {
  transform: scale(1.5)
}


/*Footer CSS*/

#myFooter {
  background-color: #000000;
  color: white;
}

#myFooter h5 {
  font-size: 18px;
  color: white;
  font-weight: bold;
  margin-top: 30px;
}

#myFooter a {
  color: #ffffff;
  text-decoration: none;
}

#myFooter a:hover,
#myFooter a:focus {
  color: rgb(250, 4, 4);
}

#myFooter .social-networks {
  text-align: center;
  padding-top: 30px;
  padding-bottom: 16px;
}

#myFooter .social-networks a {
  font-size: 32px;
  color: #f9f9f9;
  padding: 10px;
  transition: 0.2s;
}

#myFooter .contact:hover {
  color: #ffffff;
  background-color: #ef1a1a
}

#myFooter .facebook:hover {
  color: #0077e2;
}

#myFooter .google:hover {
  color: #ef1a1a;
}

#myFooter .twitter:hover {
  color: #00aced;
}

#myFooter .btn {
  color: rgb(0, 0, 0);
  background-color: #ffffff;
  border-radius: 10px;
  border: 0px;
  width: 10rem;
  margin: 0 auto;
  margin-top: .5rem;
  margin-bottom: 1.5rem;
  text-align: center;
  display: block;
  line-height: 25px;
}
    ＆＃13; 
    <html lang="es">

<head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-108836206-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
      dataLayer.push(arguments);
    }
    gtag("js", new Date());

    gtag("config", "UA-108836206-1");
  </script>

  <!-- These meta tags come first. -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <link rel="stylesheet" href<!DOCTYPE html>
  <html lang="es">

  <head>
    <!-- Include Global site tag (gtag.js) - Google Analytics -->


    <title>Panoja Films - Guillermo Paniagua</title>

    <link rel="shortcut icon" href="assets/icons/favicon.ico" type="image/x-icon">

    <!-- These meta tags come first. -->
    <meta charset="utf-8">
    <meta name="keywords" content="film,director,pelicula,guillermo,paniagua,panoja">
    <meta name="description" content="Guillermo Paniagua - Film Director Personal-Site - PanojaFilms 2017">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="application-name" content="Panoja Films">

    <meta property="og:url" content="{{pageUrl}}">
    <meta property="og:image" content="{{imageUrl}}">
    <meta property="og:description" content="{{description}}">
    <meta property="og:title" content="{{pageTitle}}">
    <meta property="og:site_name" content="{{siteTitle}}">
    <meta property="og:see_also" content="{{homepageUrl}}">

    <!-- Include the CSS -->
    <link href="https://fonts.googleapis.com/css?family=Nosifer" rel="stylesheet">
    <!--Bootstrap CSS-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/footer.css">
    <link rel="stylesheet" href="assets/css/body.css">
    <link rel="stylesheet" href="assets/css/header.css">

    <!-- Include jQuery (required) and the JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $('[data-toggle="popover"]').popover();
      });
    </script>
  </head>

  <body style="background-color: black">
    <header id="myHeader">
      <a href="index.html">
        <div id="logoHeader" class=" jumbotron-fluid img-fluid" href="#logoHeader" href="index.html" style="background: url(assets/img/logo-banner.jpg); background-size: 100% 100%; height: 15rem"></div>
      </a>
      <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHome" aria-controls="navbarsExampleDefault">
                    <span class="navbar-toggler-icon"></span>
                </button>

        <div class="collapse navbar-collapse" id="navbarHome">
          <ul class="navbar-nav mx-auto">
            <li class="nav-item active">
              <a class="nav-link" href="cortometrajes.html">Cortometrajes</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="guiones.html">Guiones</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="fotografia.html">Fotografia</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="about.html">Sobre Mi</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>

    <div class="container-fluid" id="movies">
      <div class="row">
        <div class="col-md">
          <img class="img-fluid w-50" src="http://via.placeholder.com/200x250" data-toggle="modal" data-target="#myModal" data-placement="auto" data-trigger="click">
          <p style="color: white">With Modal Test</p>
        </div>
        <!-- The Modal -->
        <div class="modal fade" id="myModal">
          <div class="modal-dialog">
            <div class="modal-content">

              <!-- Modal Header -->
              <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>
              <div id="demo" class="carousel slide" data-ride="carousel">

                <!-- Carousel -->
                <ul class="carousel-indicators">
                  <li data-target="#demo" data-slide-to="0" class="active"></li>
                  <li data-target="#demo" data-slide-to="1"></li>
                  <li data-target="#demo" data-slide-to="2"></li>
                </ul>

                <!-- The slideshow -->
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img src="la.jpg" alt="Los Angeles">
                  </div>
                  <div class="carousel-item">
                    <img src="chicago.jpg" alt="Chicago">
                  </div>
                  <div class="carousel-item">
                    <img src="ny.jpg" alt="New York">
                  </div>
                </div>

                <!-- Left and right controls -->
                <a class="carousel-control-prev" href="#demo" data-slide="prev">
                  <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" href="#demo" data-slide="next">
                  <span class="carousel-control-next-icon"></span>
                </a>

              </div>


              <!-- Modal body -->
              <div class="modal-body">
                Modal body..
              </div>

              <!-- Modal footer -->
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              </div>

            </div>
          </div>
        </div>
        <div class="col-md">
          <img class="img-fluid w-50" src="http://via.placeholder.com/200x250" alt="Card image cap" data-toggle="popover" data-placement="auto" data-trigger="hover click" data-html="true" title="Cuerdos y Locos" data-content="<h1>TEST</h1>">
        </div>
        <div class="col-md">
          <img class="img-fluid w-50" src="http://via.placeholder.com/200x250" alt="Card image cap" data-toggle="popover" data-placement="auto" data-trigger="hover click" data-html="true" title="Cuerdos y Locos" data-content="<h1>TEST</h1>">
        </div>
        <div class="col-md">
          <img class="img-fluid w-50" src="http://via.placeholder.com/200x250" alt="Card image cap" data-toggle="popover" data-placement="auto" data-trigger="hover click" data-html="true" title="Cuerdos y Locos" data-content="<h1>TEST</h1>">
        </div>
        <div class="col-md">
          <img class="img-fluid w-50" src="http://via.placeholder.com/200x250" alt="Card image cap" data-toggle="popover" data-placement="auto" data-trigger="hover click" data-html="true" title="Cuerdos y Locos" data-content="<h1>TEST</h1>">
        </div>
      </div>
    </div>

    <footer id="myFooter" class="">
      <div class="container-fluid">
        <div class="row">
          <div class="col  social-networks">
            <h5>Youtube</h5>
            <a href="https://www.youtube.com/user/panojas90" target="_blank" class="google">
              <i class="fa fa-youtube"></i>
            </a>
          </div>
          <div class="col social-networks">
            <h5>Facebook</h5>
            <a href="#" class="facebook">
              <i class="fa fa-facebook"></i>
            </a>
          </div>
          <div class="col social-networks">
            <h5>Twitter</h5>
            <a href="#" class="twitter">
              <i class="fa fa-twitter"></i>
            </a>
          </div>
        </div>
        <div class="row">
          <a class="btn btn-light contact text-center" href="mailto:" role="button">Contáctame</a>
        </div>
        <div class="footer-copyright text-center mt-5">
          <p>© 2017 Copyright
            <a href="http://panojafilms.com">PanojaFilms</a> - All Rights Reserved. </p>
        </div>
      </div>

    </footer>
  </body>
    ＆＃13;
    ＆＃13;
    ＆＃13;

0 个答案:

没有答案
相关问题
最新问题