{"id":354,"date":"2015-03-25T23:10:35","date_gmt":"2015-03-25T23:10:35","guid":{"rendered":"http:\/\/razonartificial.com\/themes\/reason-wp\/?page_id=354"},"modified":"2015-03-25T23:10:35","modified_gmt":"2015-03-25T23:10:35","slug":"lists","status":"publish","type":"page","link":"http:\/\/re-test.ru\/?page_id=354","title":{"rendered":"Lists"},"content":{"rendered":"<section class=\"css-section\">\n<h2 class=\"section-title no-margin-top\">List group<\/h2>\n<div class=\"row\">\n<div class=\"col-md-6\">\n<h3 class=\"no-margin-top\">Basic list group<\/h3>\n<p>Basic list with borders, you can use <a href=\"#\">flags and badges<\/a> on the right.<\/p>\n<p>To use just add a span badges with <code>badge badge-primary<\/code> class element. Replaced <code>primary<\/code> by <code>success<\/code>, <code>info<\/code>, <code>warning<\/code>, <code>danger<\/code> or <code>royal<\/code>, depending on the color you want.<\/p>\n<\/p><\/div>\n<div class=\"col-md-6\">\n<ul class=\"list-group\">\n<li class=\"list-group-item\">Cras justo odio<\/li>\n<li class=\"list-group-item\"><span class=\"label label-royal pull-right\">New<\/span> Dapibus ac facilisis in<\/li>\n<li class=\"list-group-item\">Morbi leo risus<\/li>\n<li class=\"list-group-item\"><span class=\"badge badge-primary\">98<\/span> Porta ac consectetur ac<\/li>\n<li class=\"list-group-item\">Vestibulum at eros<\/li>\n<\/ul><\/div>\n<div class=\"col-md-12\">\n<div class=\"panel panel-default\">\n<div class=\"panel-heading panel-heading-link\">\n                                <a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse1\" class=\"collapsed\"><i class=\"fa fa-terminal\"><\/i> Show Code<\/a>\n                            <\/div>\n<div id=\"collapse1\" class=\"panel-collapse collapse\">\n<div class=\"panel-body panel-body-no-padding\">\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;ul class=&quot;list-group&quot;&gt;\n&lt;li class=&quot;list-group-item&quot;&gt;...&lt;\/li&gt;\n&lt;li class=&quot;list-group-item&quot;&gt;&lt;span class=&quot;label label-royal pull-right&quot;&gt;New&lt;\/span&gt; ...&lt;\/li&gt;\n&lt;li class=&quot;list-group-item&quot;&gt;...&lt;\/li&gt;\n&lt;li class=&quot;list-group-item&quot;&gt;&lt;span class=&quot;badge badge-primary&quot;&gt;98&lt;\/span&gt; ...&lt;\/li&gt;\n&lt;li class=&quot;list-group-item&quot;&gt;...&lt;\/li&gt;\n&lt;\/ul&gt;\n                                    <\/pre>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <!-- panel show code -->\n                    <\/div>\n<\/p><\/div>\n<hr class=\"dotted\">\n<div class=\"row\">\n<div class=\"col-md-6 col-md-push-6\">\n<h3 class=\"no-margin-top\">Striped list group<\/h3>\n<p>You can add class to the <code>striped<\/code> shading in columns of links. <\/p>\n<p class=\"alert alert-warning\">This only works with lists of items, not linked lists.<\/p>\n<\/p><\/div>\n<div class=\"col-md-6 col-md-pull-6\">\n<ul class=\"list-group list-group-striped\">\n<li class=\"list-group-item\">\n                            <span class=\"badge badge-primary badge-round\">14<\/span><br \/>\n                            Cras justo odio\n                          <\/li>\n<li class=\"list-group-item\">\n                            <span class=\"badge badge-primary badge-square\">778<\/span><br \/>\n                            Cras justo odio\n                          <\/li>\n<li class=\"list-group-item\">\n                            <span class=\"badge\">9<\/span><br \/>\n                            Dapibus ac facilisis in\n                          <\/li>\n<li class=\"list-group-item\">\n                            <span class=\"badge badge-primary\">98<\/span><br \/>\n                            Cras justo odio\n                          <\/li>\n<li class=\"list-group-item\">\n                            <span class=\"badge badge-primary badge-round\">17<\/span><br \/>\n                            Vestibulum at eros\n                          <\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<hr class=\"dotted\">\n<div class=\"row\">\n<div class=\"col-md-12\">\n<h3>Link lists<\/h3>\n<p>The link lists are created with a <code>div<\/code> element of class <code>list-group<\/code> composed of elements <code>a<\/code> of the class <code>list-group-item<\/code>.<\/p>\n<p>You can also use badges and flags. as in Item Lists.<\/p>\n<\/p><\/div>\n<div class=\"col-md-6\">\n<div class=\"list-group\">\n                          <a href=\"#\" class=\"list-group-item active\"><br \/>\n                            Cras justo odio<br \/>\n                          <\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item\">Dapibus ac facilisis in<\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item\">Morbi leo risus<\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item\">Porta ac consectetur ac<\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item\">Vestibulum at eros<\/a>\n                        <\/div>\n<\/p><\/div>\n<div class=\"col-md-6\">\n<div class=\"list-group\">\n                          <a href=\"#\" class=\"list-group-item\"><br \/>\n                            <span class=\"badge badge-round\">9<\/span><br \/>\n                            Cras justo odio<br \/>\n                          <\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item\"><span class=\"badge\">9<\/span> Dapibus ac facilisis in<\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item\"><span class=\"badge\">19<\/span> Morbi leo risus<\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item active\"><span class=\"badge badge-round\">999<\/span> Porta ac consectetur ac<\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item\">Vestibulum at eros<\/a>\n                        <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<hr class=\"dotted\">\n<div class=\"row\">\n<div class=\"col-md-12\">\n<h3>Colorful elements<\/h3>\n<p>You can use the class <code>list-item-group-success<\/code> or <code>-info<\/code>, <code>-warning<\/code>, <code>-danger<\/code>, <code>-royal<\/code> for coloring and highlighting elements of a list.<\/p>\n<\/p><\/div>\n<div class=\"col-md-6\">\n<ul class=\"list-group\">\n<li class=\"list-group-item list-group-item-success\">Dapibus ac facilisis in<\/li>\n<li class=\"list-group-item list-group-item-info\">Cras sit amet nibh libero<\/li>\n<li class=\"list-group-item list-group-item-warning\">Porta ac consectetur ac<\/li>\n<li class=\"list-group-item list-group-item-danger\">Vestibulum at eros<\/li>\n<li class=\"list-group-item list-group-item-royal\">Dapibus ac facilisis in<\/li>\n<\/ul><\/div>\n<div class=\"col-md-6\">\n<div class=\"list-group\">\n                          <a href=\"#\" class=\"list-group-item list-group-item-success\">Dapibus ac facilisis in<\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item list-group-item-info\">Cras sit amet nibh libero<\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item list-group-item-warning\">Porta ac consectetur ac<\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item list-group-item-danger\">Vestibulum at eros<\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item list-group-item-royal\">Dapibus ac facilisis in<\/a>\n                        <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"row\">\n<div class=\"col-md-12\">\n<h3>compressed lists<\/h3>\n<p>You can use the <code>list-group-sm<\/code> class to make more compact lists.<\/p>\n<\/p><\/div>\n<div class=\"col-md-6\">\n<ul class=\"list-group list-group-sm\">\n<li class=\"list-group-item\">Cras justo odio<\/li>\n<li class=\"list-group-item\">Dapibus ac facilisis in<\/li>\n<li class=\"list-group-item\">Morbi leo risus<\/li>\n<li class=\"list-group-item\">Porta ac consectetur ac<\/li>\n<li class=\"list-group-item\">Vestibulum at eros<\/li>\n<\/ul><\/div>\n<div class=\"col-md-6\">\n<ul class=\"list-group list-group-striped list-group-sm\">\n<li class=\"list-group-item\">\n                            <span class=\"badge badge-primary badge-round\">14<\/span><br \/>\n                            Cras justo odio\n                          <\/li>\n<li class=\"list-group-item\">\n                            <span class=\"badge badge-primary badge-square\">778<\/span><br \/>\n                            Cras justo odio\n                          <\/li>\n<li class=\"list-group-item\">\n                            <span class=\"badge\">9<\/span><br \/>\n                            Dapibus ac facilisis in\n                          <\/li>\n<li class=\"list-group-item\">\n                            <span class=\"badge badge-primary\">98<\/span><br \/>\n                            Cras justo odio\n                          <\/li>\n<li class=\"list-group-item\">\n                            <span class=\"badge badge-primary badge-round\">17<\/span><br \/>\n                            Vestibulum at eros\n                          <\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<hr class=\"dotted\">\n<div class=\"row\">\n<div class=\"col-md-6\">\n<h3>Content lists<\/h3>\n<p>You can also can add content such as headers and paragraphs to lists of links.<\/p>\n<p>Use the class <code>active<\/code> to highlight the currently active element.<\/p>\n<\/p><\/div>\n<div class=\"col-md-6\">\n<div class=\"list-group\">\n                          <a href=\"#\" class=\"list-group-item active\"><\/p>\n<h4 class=\"list-group-item-heading\">List group item heading<\/h4>\n<p class=\"list-group-item-text\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, vitae.!<\/p>\n<p>                          <\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item\"><\/p>\n<h4 class=\"list-group-item-heading\">List group item heading<\/h4>\n<p class=\"list-group-item-text\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, facilis.!<\/p>\n<p>                          <\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item\"><\/p>\n<h4 class=\"list-group-item-heading\">List group item heading<\/h4>\n<p class=\"list-group-item-text\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, nobis?!<\/p>\n<p>                          <\/a>\n                        <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<section class=\"css-section\">\n<h2 class=\"section-title\">Media Objects<\/h2>\n<div class=\"row\">\n<div class=\"col-md-5\">\n<h3 class=\"no-margin-top\">Basic Media list<\/h3>\n<p>Use the <code>media<\/code> class to display multimedia content with a description beside her. They can be images, videos or other multimedia objects. <\/p>\n<p>Use the <code>media-object<\/code> classes and <code>media-heading<\/code> for the media item and the item title respectively.<\/p>\n<\/p><\/div>\n<div class=\"col-md-7\">\n<div class=\"media\">\n                          <a class=\"pull-left\" href=\"#\"><br \/>\n                            <img class=\"media-object\" src=\"..\/assets\/js\/holder.js\/70x70\/social\" alt=\"...\"><br \/>\n                          <\/a><\/p>\n<div class=\"media-body\">\n<h4 class=\"media-heading\">Media heading<\/h4>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, dolor vitae praesentium consectetur molestias.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"media\">\n                          <a class=\"pull-left\" href=\"#\"><br \/>\n                            <img class=\"media-object\" src=\"..\/assets\/js\/holder.js\/70x70\/social\" alt=\"...\"><br \/>\n                          <\/a><\/p>\n<div class=\"media-body\">\n<h4 class=\"media-heading\">Media heading<\/h4>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, dolor vitae praesentium consectetur molestias.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"media\">\n                          <a class=\"pull-left\" href=\"#\"><br \/>\n                            <img class=\"media-object\" src=\"..\/assets\/js\/holder.js\/70x70\/social\" alt=\"...\"><br \/>\n                          <\/a><\/p>\n<div class=\"media-body\">\n<h4 class=\"media-heading\">Media heading<\/h4>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, dolor vitae praesentium consectetur molestias.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<hr class=\"dotted\">\n<div class=\"col-md-12\">\n<h3>Media Lists<\/h3>\n<p>You can use chained lists. Perfect for systems and interests.<\/p>\n<\/p><\/div>\n<div class=\"col-md-12\">\n<ul class=\"media-list\">\n<li class=\"media\">\n                            <a class=\"pull-left\" href=\"#\"><br \/>\n                              <img class=\"media-object\" data-src=\"..\/assets\/js\/holder.js\/64x64\/social\" alt=\"Generic placeholder image\"><br \/>\n                            <\/a><\/p>\n<div class=\"media-body\">\n<h4 class=\"media-heading\">Media heading<\/h4>\n<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.<\/p>\n<p>                              <!-- Nested media object --><\/p>\n<div class=\"media\">\n                                <a class=\"pull-left\" href=\"#\"><br \/>\n                                  <img class=\"media-object\" data-src=\"..\/assets\/js\/holder.js\/64x64\/sky\" alt=\"Generic placeholder image\"><br \/>\n                                <\/a><\/p>\n<div class=\"media-body\">\n<h4 class=\"media-heading\">Nested media heading<\/h4>\n<p>                                  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.<br \/>\n                                  <!-- Nested media object --><\/p>\n<div class=\"media\">\n                                    <a class=\"pull-left\" href=\"#\"><br \/>\n                                      <img class=\"media-object\" data-src=\"..\/assets\/js\/holder.js\/64x64\/social\" alt=\"Generic placeholder image\"><br \/>\n                                    <\/a><\/p>\n<div class=\"media-body\">\n<h4 class=\"media-heading\">Nested media heading<\/h4>\n<p>                                      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.\n                                    <\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>                              <!-- Nested media object --><\/p>\n<div class=\"media\">\n                                <a class=\"pull-left\" href=\"#\"><br \/>\n                                  <img class=\"media-object\" data-src=\"..\/assets\/js\/holder.js\/64x64\/vine\" alt=\"Generic placeholder image\"><br \/>\n                                <\/a><\/p>\n<div class=\"media-body\">\n<h4 class=\"media-heading\">Nested media heading<\/h4>\n<p>                                  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.\n                                <\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/li>\n<li class=\"media\">\n                            <a class=\"pull-right\" href=\"#\"><br \/>\n                              <img class=\"media-object\" data-src=\"..\/assets\/js\/holder.js\/64x64\/lava\" alt=\"Generic placeholder image\"><br \/>\n                            <\/a><\/p>\n<div class=\"media-body\">\n<h4 class=\"media-heading\">Media heading<\/h4>\n<p>                              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.\n                            <\/p><\/div>\n<\/li>\n<\/ul><\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>List group Basic list group Basic list with borders, you can use flags and badges on the right. To use just add a span badges with badge badge-primary class element. Replaced primary by success, info, warning, danger or royal, depending on the color you want. Cras justo odio New Dapibus ac facilisis in Morbi leo &hellip; <a href=\"http:\/\/re-test.ru\/?page_id=354\" class=\"more-link\">\u0427\u0438\u0442\u0430\u0442\u044c \u0434\u0430\u043b\u0435\u0435 <span class=\"screen-reader-text\">Lists<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"page-left-menu.php","meta":{"spay_email":""},"_links":{"self":[{"href":"http:\/\/re-test.ru\/index.php?rest_route=\/wp\/v2\/pages\/354"}],"collection":[{"href":"http:\/\/re-test.ru\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/re-test.ru\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/re-test.ru\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"http:\/\/re-test.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=354"}],"version-history":[{"count":0,"href":"http:\/\/re-test.ru\/index.php?rest_route=\/wp\/v2\/pages\/354\/revisions"}],"wp:attachment":[{"href":"http:\/\/re-test.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}