Lista de hitos estilo GitHub con bootstrap-bootstrap-Milestones. CSS

Vista prévia

Descripción

El bootstrap-Milestones. CSS le permite crear una lista de hitos adaptables para identificar los hitos del proyecto mediante estilos de bootstrap.

Similar al historial de solicitud de extracción de GitHub. Construido usando CSS puro (LESS).

Funcionamiento

Descargue e importe tanto bootstrap StyleSheet como bootstrap-Milestones. CSS en el documento.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link rel="stylesheet" href="/path/to/bootstrap-milestones.min.css">

La estructura HTML básica para la lista de hitos.

<ul class="milestones">

<li>


<i class="milestone-success glyphicon glyphicon-ok"></i>


Milestone 1

</li>

<li>


<i class="milestone-error glyphicon glyphicon-remove"></i>


Milestone 2

</li>
</ul>

Añade bordes a los hitos.

<ul class="milestones milestones-bordered-bottom">

<li>


<i class="milestone-success glyphicon glyphicon-ok"></i>


Milestone 1

</li>

<li>


<i class="milestone-error glyphicon glyphicon-remove"></i>


Milestone 2

</li>
</ul>

<ul class="milestones milestones-bordered-top">

<li>


<i class="milestone-success glyphicon glyphicon-ok"></i>


Milestone 1

</li>

<li>


<i class="milestone-error glyphicon glyphicon-remove"></i>


Milestone 2

</li>
</ul>

<ul class="milestones milestones-bordered">

<li>


<i class="milestone-success glyphicon glyphicon-ok"></i>


Milestone 1

</li>

<li>


<i class="milestone-error glyphicon glyphicon-remove"></i>


Milestone 2

</li>
</ul>

Utilice su propia fuente icónica como Font awesome:

<ul class="milestones">

<li>


<i class="milestone-success fa fa-ok"></i>


Milestone 1

</li>

<li>


<i class="milestone-error fa fa-remove"></i>


Milestone 2

</li>
</ul>

Variables predeterminadas.

@milestone-offset-smaller: 5px;
@milestone-offset-small: 10px;
@milestone-offset: 15px;
@milestone-offset-large: 20px;
@milestone-offset-larger: 25px;

@milestone-icon-padding: 7.5px;
@milestone-icon-font-size: 12px;
@milestone-icon-width: @milestone-icon-padding * 2 + @milestone-icon-font-size + 2;