bootstrap 3和一个包含2个按钮的列表

时间:2015-05-07 20:02:42

标签: twitter-bootstrap

我是初学者。我正在使用jsrender,我正在寻找的是一种显示带有文本的列表的方法(如果你点击任何地方,比如说col-lg-9),它会将你带到一个地方,右边的btn类型可以带你到另一个。

我尝试过使用list-group-item

 {{for d }}
     <dl class="list-group-item">
         <div class="btn-group" role="group">
             <a href="PeopleAddEdit.aspx?ID={{:PeopleID}}" class="btn btn-default">
                 <dt>{{: FirstName}} {{: LastName}}</dt>
                                 </a>
             <a href="PeopleDelete.aspx?ID={{:PeopleID}}" class="btn btn-default">delete</a>
         </div>
     </dl>
    {{/for}}

我也尝试过媒体列表

     {{for d }}
     <ul class="media-list">
         <li class="media">
             <a href="PeopleAddEdit.aspx?ID={{:PeopleID}}" class="media-body">
                 <h4>{{: FirstName}} {{: LastName}}</h4>
                               </a>
             <a href="PeopleDelete.aspx?ID={{:PeopleID}}" class="pull-right"><span class="media-object">delete</span></a>
         </li>
     </ul>
    {{/for}}

我只是没有得到它。我也试过使用水平按钮,但也没有让我在那里。

这样做的正确方法是什么。我现在不是要求代码..只是在正确的树上咆哮。

所以我想学习如何制作看起来像这样的东西..当然会有不止一行。

enter image description here

由于 香农

修改。我不确定这是不是应该这样做...但我认为这让我更接近。把它放在别人面前。

 <ul class="media-list">
        <li class="media">

            <div class="media-body">
                <a href="#1">
                <h4 class="media-heading">Media heading 1</h4>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </a>
            </div>
            <div class="media-right">
                <a href="#2">
                    <%--<img class="media-object" src="http://placehold.it/64x64">--%>
                    <h1><span class="glyphicon glyphicon-trash"></span></h1>
                </a>
            </div>
        </li>
        <li class="media">
           <div class="media-body">
                <a href="#3">
                <h4 class="media-heading">Media heading 1</h4>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </a>
            </div>
            <div class="media-right">
                <a href="#4">
                    <%--<img class="media-object" src="http://placehold.it/64x64">--%>
                    <h1><span class="glyphicon glyphicon-trash"></span></h1>
                </a>
            </div>
        </li>
    </ul>

我使用了名为Bootstrap Snippet Pack的VS 2013扩展。它帮助我找到了一个明智的代码。我明白那些不是新手的人可能会发现有点基本但对我来说似乎有所帮助。

编辑 - 我还在试图弄清楚如何制作锚点,以便我可以点击任何地方并关闭链接..现在它只会触发,如果我在文本上...那就是我在等什么在我将此标记为已回答之前。 感谢

0 个答案:

没有答案