使用主題的Bootstrap插件

Question

我有一個我想使用的插件，它是一個滑塊插件，這是它的鏈接： https : //github.com/seiyria/bootstrap-slider

我想通過CDN使用它： https : //cdnjs.com/libraries/bootstrap-slider

因此，在我的html標頭中，它是這樣的：

    <head>
        <title>Slider Test</title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
        <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/bootstrap-slider.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/bootstrap-slider.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/css/bootstrap-slider.css"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/css/bootstrap-slider.min.css"></script>
    </head>

然后，我嘗試使用他們在其頁面上顯示的示例之一： http : //seiyria.com/bootstrap-slider/

示例21：

<input id="ex21" type="text"
          data-provide="slider"
          data-slider-ticks="[1, 2, 3]"
          data-slider-ticks-labels='["short", "medium", "long"]'
          data-slider-min="1"
          data-slider-max="3"
          data-slider-step="1"
          data-slider-value="3"
          data-slider-tooltip="hide" />

結果，我得到的只是一個文本框。 我不是在使用插件或以正確的方式引用它？

Answer 1

首先：您只需要完整版或正式版。 在示例代碼中，您將兩者都包括在內。

出於開發目的，我建議刪除壓縮文件的包含文件（后綴為.min文件）。

其次，您要通過script標簽包含樣式表。 您需要使用link標記包括樣式表。

最后，我沒有看到Bootstrap JavaScript本身包含的內容，您也需要包含它。

我還將更新bootstrap-slider文件的路徑。 一開始使用兩個斜杠可能會導致奇怪的行為。 更新它們以使用https://作為前綴。

這些更改之后，您的head應該看起來像

<head>
    <title>Slider Test</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/css/bootstrap-slider.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/bootstrap-slider.js"></script>
</head>

使用主題的Bootstrap插件

問題描述

1 個解決方案

解決方案1
1 2016-08-30 10:51:44

使用主題的Bootstrap插件

問題描述

1 個解決方案

解決方案1 1 2016-08-30 10:51:44

解決方案1
1 2016-08-30 10:51:44