Bootstrap Специальный персонаж, показывающий случайным образом?

Начинающий здесь, извините, если это простая вещь.Bootstrap Специальный персонаж, показывающий случайным образом?

Я использую чью-то работу, чтобы сделать кнопки флажок, так как здесь:

Источник:

(К сожалению, можно только размещать одну ссылку в то время, но, пожалуйста, Google bootsnipp флажок.)

Это, как я знаю, использует Bootstrap 3.1.1.

Когда я копирую код скрипта в простой html-файл и вставляю javascript, я получаю странный вид «A» перед текстом. Если я удалю слово «Успех», появится только символ «А».

Вот пример того, что моя проблема: http://i.imgur.com/cJqwXZV.png

Я снова скопировал код. Я убедился, что у меня загрузочный файл v 3.1.1, и все правильно загружается. Кто-нибудь знает, почему это происходит?

Спасибо!

<!DOCTYPE html> 

<html lang="en"> 
<head> 

    <title>Example of Twitter Bootstrap</title> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 

    <script> 
    $(function() { 
    $('.button-checkbox').each(function() { 

     // Settings 
     var $widget = $(this), 
      $button = $widget.find('button'), 
      $checkbox = $widget.find('input:checkbox'), 
      color = $button.data('color'), 
      settings = { 
       on: { 
        icon: 'glyphicon glyphicon-check' 
       }, 
       off: { 
        icon: 'glyphicon glyphicon-unchecked' 
       } 
      }; 

     // Event Handlers 
     $button.on('click', function() { 
      $checkbox.prop('checked', !$checkbox.is(':checked')); 
      $checkbox.triggerHandler('change'); 
      updateDisplay(); 
     }); 
     $checkbox.on('change', function() { 
      updateDisplay(); 
     }); 

     // Actions 
     function updateDisplay() { 
      var isChecked = $checkbox.is(':checked'); 

      // Set the button's state 
      $button.data('state', (isChecked) ? "on" : "off"); 

      // Set the button's icon 
      $button.find('.state-icon') 
       .removeClass() 
       .addClass('state-icon ' + settings[$button.data('state')].icon); 

      // Update the button's color 
      if (isChecked) { 
       $button 
        .removeClass('btn-default') 
        .addClass('btn-' + color + ' active'); 
      } 
      else { 
       $button 
        .removeClass('btn-' + color + ' active') 
        .addClass('btn-default'); 
      } 
     } 

     // Initialization 
     function init() { 

      updateDisplay(); 

      // Inject the icon if applicable 
      if ($button.find('.state-icon').length === 0) { 
       $button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i> '); 
      } 
     } 
     init(); 
    }); 
}); 





var  new_checkbox_button = function(name,id){ 
      return "<li><span class='button-checkbox'><button type='button' class='btn btn-sm btn-primary active' data-color='primary'><i class='state-icon glyphicon glyphicon-check'></i>&nbsp;"+name+"</button><input type='checkbox' class='hidden' checked=''></span></li>"; 
     }; 

$("#add").click(function(){ 
     $("#selected_targets").append(new_checkbox_button("lallalala","1111")); 
}); 
    </script> 
</head> 

<body> 
<p> Existing checkboxes</p> 


    <span class="button-checkbox"> 
     <button type="button" class="btn" data-color="success">Success</button> 
     <input type="checkbox" class="hidden" checked /> 
    </span> 

    <span class = "button-checkbox"> 
     <button type = "button" class = "btn" data-color = "success"> Success </button> 
     <input type = "checkbox" class = "hidden" unchecked /> 
    </span> 
</body> 
</html>

источник

2014-12-28 AMoghrabi

Я думаю, что это из-за вашего шрифта не поддерживает это. Проверьте использование шрифта. Попробуйте удалить свой шрифт – practice2perfect

Спасибо за ответ. Как точно удалить шрифт? – AMoghrabi

Проверьте файл css. Используете ли вы какой-либо атрибут 'font-family'? если это так удалить строку или прокомментировать строку. – practice2perfect

Кто-то на reddit понял это для меня. Это потому, что я забыл поместить метатеги для типа кодирования (UTF8):

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Bootstrap 101 Template</title> 
     <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> 
     <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" rel="stylesheet"> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
     <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 


    </head> 
    <body> 
     <div class="container"> 
     <span class="button-checkbox"> 
      <button type="button" class="btn" data-color="success">Success</button> 
      <input type="checkbox" class="hidden" checked /> 
     </span> 


     <script> 

    $(function() { 
    $('.button-checkbox').each(function() { 

     // Settings 
     var $widget = $(this), 
      $button = $widget.find('button'), 
      $checkbox = $widget.find('input:checkbox'), 
      color = $button.data('color'), 
      settings = { 
       on: { 
        icon: 'glyphicon glyphicon-check' 
       }, 
       off: { 
        icon: 'glyphicon glyphicon-unchecked' 
       } 
      }; 

     // Event Handlers 
     $button.on('click', function() { 
      $checkbox.prop('checked', !$checkbox.is(':checked')); 
      $checkbox.triggerHandler('change'); 
      updateDisplay(); 
     }); 
     $checkbox.on('change', function() { 
      updateDisplay(); 
     }); 

     // Actions 
     function updateDisplay() { 
      var isChecked = $checkbox.is(':checked'); 

      // Set the button's state 
      $button.data('state', (isChecked) ? "on" : "off"); 

      // Set the button's icon 
      $button.find('.state-icon') 
       .removeClass() 
       .addClass('state-icon ' + settings[$button.data('state')].icon); 

      // Update the button's color 
      if (isChecked) { 
       $button 
        .removeClass('btn-default') 
        .addClass('btn-' + color + ' active'); 
      } 
      else { 
       $button 
        .removeClass('btn-' + color + ' active') 
        .addClass('btn-default'); 
      } 
     } 

     // Initialization 
     function init() { 

      updateDisplay(); 

      // Inject the icon if applicable 
      if ($button.find('.state-icon').length == 0) { 
       $button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i> '); 
      } 
     } 
     init(); 
    }); 
}); 


    </script> 

    </div> 
    </body> 
    </html>

источник

2014-12-29 05:44:36 AMoghrabi

Это происходит, когда вы пытаетесь использовать глификоны, включенные в Bootstrap, и значок значка не может быть найден.

Чтобы проверить, действительно ли проблема открыта, например, DevTools от Chrome, и посмотрите на вкладке «Сеть», чтобы увидеть, что ресурс, такой как glyphicons-halflings-regular.woff, не найден.

Еще один простой способ проверить это - временно использовать cdn, изменить <link href="css/bootstrap.min.css" rel="stylesheet"> на <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />.

По умолчанию Bootstrap ищет шрифты в ../fonts относительно вашего css. Поскольку ваш css равен css/bootstrap.min.css, он ищет fonts. Создайте папку fonts и скопируйте содержимое папки шрифтов Bootstraps.

источник

2014-12-28 10:41:54 ckuijjer

Спасибо. Я сделал все ваши предложения, и у меня такая же проблема. Я буду продолжать изучать его и буду принимать ваш ответ, когда выясню это. – AMoghrabi

Bootstrap Специальный персонаж, показывающий случайным образом?

ответ

Смежные вопросы