Question

我是Bulma Framework的新手。我开始在我的HTML文件中关注以下内容。我尚未安装任何软件包。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>

 <section class="section">
    <div class="container">
      <h1 class="title">
        Hello World
      </h1>
      <p class="subtitle">
        My first website with <strong>Bulma</strong>!
      </p>
    </div>
</section>

使用bulma的最佳方法是什么？

我还必须使用布尔玛旋转木马。如何添加bulma轮播CSS和JS？还可以在布尔玛轮播中显示像猫头鹰轮播这样的点状导航吗？

Answer 1

要将 Bulma-Carousel 集成到您的项目中，请执行以下步骤：
确保已从Bulma-Carousel，CSS和JS导入了jQuery和Bulma文件。

然后，像这样初始化 Bulma-Carousel ：

<script>
      $(document).ready(function(){
         var carousels = bulmaCarousel.attach(); // carousels now contains an array of all Carousel instances
      });
</script>

例如，使用以下HTML ：（确保bulma-carousel.min.css位于同一文件夹中。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="bulma-carousel.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">

</head>
<body>


<!-- Enter your code here -->

<!-- Here is an example -->

<div class='carousel carousel-animated carousel-animate-slide'>
  <div class='carousel-container'>
    <div class='carousel-item has-background is-active'>
      <img class="is-background" src="https://wikiki.github.io/images/merry-christmas.jpg" alt="" width="640" height="310" />
      <div class="title">Merry Christmas</div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/singer.jpg" alt="" width="640" height="310" />
      <div class="title">Original Gift: Offer a song with <a href="https://lasongbox.com" target="_blank">La Song Box</a></div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/sushi.jpg" alt="" width="640" height="310" />
      <div class="title">Sushi time</div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/life.jpg" alt="" width="640" height="310" />
      <div class="title">Life</div>
    </div>
  </div>
  <div class="carousel-navigation">
    <div class="carousel-nav-left">
      <i class="fa fa-chevron-left" aria-hidden="true"></i>
    </div>
    <div class="carousel-nav-right">
      <i class="fa fa-chevron-right" aria-hidden="true"></i>
    </div>
  </div>
</div>



<script src="https://cdn.jsdelivr.net/npm/bulma-carousel@3.0.0/dist/js/bulma-carousel.min.js"></script>
<script>
  $(document).ready(function(){
         var carousels = bulmaCarousel.attach(); // carousels now contains an array of all Carousel instances
     });
</script>

</body>
</html>

Answer 2

您可以在此处查看带有布尔玛的Carousel的实现：

https://wikiki.github.io/components/carousel/

它基于Bulma框架构建，因此可以轻松集成。

您将需要此基本结构

<div class='carousel carousel-animated carousel-animate-slide'>
 <div class='carousel-container'>
    <div class='carousel-item has-background is-active'>
      <img class="is-background" src="" alt="" width="640" height="310" />
      <div class="title">Merry Christmas</div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/singer.jpg" alt="" width="640" height="310" />
      <div class="title">Original Gift: Offer a song with <a href="https://lasongbox.com" target="_blank">La Song Box</a></div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/sushi.jpg" alt="" width="640" height="310" />
      <div class="title">Sushi time</div>
    </div>
 </div>

下载软件包后，您还需要与此一同导入。

<script type="text/javascript" src="/node_modules/bulma-extensions/bulma-carousel/dist/bulma-carousel.min.js"></script>

并在您的JavaScript文件中使用此行对其进行初始化

var carousels = bulmaCarousel.attach();

Answer 3

以下文档将帮助您从bulma开始：https://bulma.io/documentation/overview/start/

要开始使用，必须使用以下完整代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Hello World
      </h1>
      <p class="subtitle">
        My first website with <strong>Bulma</strong>!
      </p>
    </div>
  </section>
  </body>
</html>

使用Bulma CSS框架的轮播

3 个答案: