Как оптимизировать, и как использовать plugin bootstrap css?

Каков правильный способ использовать bootstrap, чтобы создавать рисунок шаблона я наблюдал какие-то примеры шаблона очень творческие в конце концов некие части очень иллюстративного контента.

Я попробовал имитировать другие шаблоны, но не имел успеха или использования или правильного порядка.

<link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>



<section id="features" class="img-block-3col bg-features">
		<div class="container">
			<div class="title">
				<h2>What Makes it Awesome</h2>
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy rat, sed diam voluptua.</p>
			</div>
			<div class="row">
				<div class="col-sm-4">
					<ul class="item-list-right item-list-big">
						<li class="wow fadeInLeft animated" style="visibility: visible;">
							<i class="icon icon-screen-desktop"></i>
							<h3>Responsive design</h3>
							<p>Your project looks great on any device. Content can be easily read and a user understands freely what you wanted to say him or her.</p>
						</li>
						<li class="wow fadeInLeft animated" style="visibility: visible;">
							<i class="icon icon-drop"></i>
							<h3>Bootstrap 3.1</h3>
							<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy rat, sed diam voluptua.</p>
						</li>
						<li class="wow fadeInLeft animated" style="visibility: visible;">
							<i class="icon icon-doc"></i>
							<h3>Cross-Browser Support </h3>
							<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy rat, sed diam voluptua.</p>
						</li>
					</ul>
				</div>
				<div class="col-sm-4 col-sm-push-4">
					<ul class="item-list-left item-list-big">
						<li class="wow fadeInRight animated" style="visibility: visible;">
							<i class="icon icon-diamond"></i>
							<h3>Pure &amp; Simple</h3>
							<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy rat, sed diam voluptua.</p>
						</li>
						<li class="wow fadeInRight animated" style="visibility: visible;">
							<i class="icon icon-layers"></i>
							<h3>Documentation</h3>
							<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy rat, sed diam voluptua.</p>
						</li>
						<li class="wow fadeInRight animated" style="visibility: visible;">
							<i class="icon icon-bubbles"></i>
							<h3>Creative Design</h3>
							<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy rat, sed diam voluptua.</p>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</section>

Идея состоит в том, чтобы создавать этот рисунок неких иллюстративных частей этих изображений.

<img src="https://2.bp.blogspot.com/-upTfZMYzGP4/WIev-kADSHI/AAAAAAAAAhY/L1Avea3rkosJQqAOY9shlYykDjpAlb8oQCLcB/s1600/aprenderesto.jpg">
<img src="https://4.bp.blogspot.com/-IS2LxmJbzzc/WIev7ChnuXI/AAAAAAAAAhQ/85StbVhCDhId6VYItMYuCF7fuWG4xqrfwCLcB/s1600/ssadsdas4.png">

<img src="https://1.bp.blogspot.com/-tB5DXCUcqK0/WIev7Bxe4XI/AAAAAAAAAhU/Wf6RHBvalkYz8-jzqUEbUlIVb8rWZjH-wCLcB/s1600/ecdsvd.png">

Но я только что не понял использование bootstrap css Каковой была бы правильная структура? или как осуществлять Ваше использование.

1
задан 30.01.2017, 04:17
0 ответов
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">   
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-1"></div>
            <div class="col-md-1">
                <img class="img img-circle" src="http://vignette3.wikia.nocookie.net/horadeaventura/images/f/f9/Lupa.png/revision/latest?cb=20130805152151&path-prefix=es" width="100px" height="100px">                        </div>
            <div class="col-md-3">MOTOR DE BUSQUEDA OPTIMIZADO</div>

            <div class="col-md-1"></div>
            <div class="col-md-1"></div>

            <div class="col-md-1">
                <img class="img img-circle" src="http://horacioreyes.com/wp-content/uploads/2014/01/solarcoin.png" width="100px" height="100px"></div>
            <div class="col-md-3">SOPORTES PARA IMPUESTOS Y MONEDAS GLOBALES</div>
        </div>
    </div>
</div>


@J.Mick В bootstrap система решетки работает с четырьмя типами классов, в зависимости от класса, с которым ты работаешь, он будет виден на твоем экране в зависимости от средств ты стандартизируешь, этот основной код, который я сделал, оказывается немного равным тому, что ты хочешь, но, может быть, на твоем экране он будет оказываться различным. Чтобы не оставлять тебе в самой я оставляю тебе это соединение http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp для того, чтобы ты практиковал, и также я рекомендую тебе много использовать стили CSS для того, чтобы ты дал ему это касание, которое способствует тому, чтобы он оказался очень похожим.
Он одну листает сколько бы он не имеет bootstrap никогда он не избежит иметь стили css.

0
ответ дан 03.12.2019, 17:31