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

Question

[SanDisk]

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

Comments

[Rustam Bainazarov]

А без Bootstrap — всё, никак? Нет там компонента рейтинга-звёздочек.

[SanDisk]

Рустам Байназаров, Звездочки, это картинки.

[Rustam Bainazarov]

SanDisk, тогда не совсем понял в чём заключается вопрос? Как использовать колонки?

[SanDisk]

Рустам Байназаров, да как использовать колонки, и как контент в колонках сделать ровно и красиво, как на картинке.

Answer 1

[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

Answer 2

[Глеб Варганов]

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 для твоей таблицы. Все максимально просто...

Comments

[William]

Дмитрий, кстати, почему ?

[Глеб Варганов]

Дмитрий, не совсем понял, предлагаете все собрать в одну переменную через .=, а потом уже вывести?