@SanDisk

Как реализовать такой рейтинг на Bootstrap?

Как реализовать такой рейтинг (или что-то подобное) на Bootstrap?

5da38ccf28603012375462.jpeg
  • Вопрос задан
  • 1443 просмотра
Пригласить эксперта
Ответы на вопрос 2
@pbozov
Разве это задача bootstrap?

<div class="raiting" data-raiting="4,5"></div>

$( ".raiting" ).each(function(  ) {
  var raiting = $( this ).data( "raiting" );
 // тут сделать проверку и append иконок
});


https://fontawesome.com/icons/star?style=solid
https://fontawesome.com/icons/star-half-alt?style=solid
https://fontawesome.com/icons/star?style=regular
Ответ написан
Комментировать
kores
@kores
Помог ответ? Отметь решением!
Bootstrap совсем не обязателен.

Вот тебе вариант на php + html:

Задаешь массив (задал только 2 строки, делаешь дальше по аналогии):
$bukmeker_arr = array(
	array(
	'pic' => 'winline.jpg',
	'stars' => 5,
	'action' => 'фрибет до 1000 руб.',
	'obzor_link' => 'https://site.ru/winline/review/',
	'bet_link' => 'https://winline.bet/',
	),
	array(
	'pic' => 'fonbet.jpg',
	'stars' => 4,
	'action' => 'до 10000 руб.',
	'obzor_link' => 'https://site.ru/fonbet/review/',
	'bet_link' => 'https://fonbet.bet/',
	),
);


Потом перебираешь массив и выводишь в виде таблицы:

echo '<table>';
	echo '<thead>';
		echo '<tr>';
			echo '<td> № </td>';
			echo '<td> Картинка </td>';
			echo '<td> Звезды </td>';
			echo '<td> Акция </td>';
			echo '<td> Обзор </td>';
			echo '<td> Сайт </td>';
		echo '</tr>';	
	echo '</thead>';
	echo '<tbody>';
	$i = 0;
	foreach($bukmeker_arr as $bukmeker) {
		$i++;
		echo '<tr>';
			echo '<td>#'.$i.'</td>';
			echo '<td><img src="'.$bukmeker['pic'].'" alt="" title="" /></td>';
			echo '<td><img src="star_'.$bukmeker['pic'].'.jpg" alt="" title="" /></td>';
			echo '<td>'.$bukmeker['action'].'</td>';
			echo '<td><a href="'.$bukmeker['obzor_link'].'">обзор</a></td>';
			echo '<td><a href="'.$bukmeker['bet_link'].'">сайт</a></td>';
		echo '</tr>';
	}
	echo '</tbody>';
echo '</table>';


Осталось только добавить оформление через стили CSS для твоей таблицы. Все максимально просто...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
SPIKS Санкт-Петербург
от 70 000 до 90 000 ₽
PERX Нижний Новгород
До 50 000 ₽