@SanDisk

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

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

5da38ccf28603012375462.jpeg
  • Вопрос задан
  • 1391 просмотр
Пригласить эксперта
Ответы на вопрос 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 для твоей таблицы. Все максимально просто...
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы