1. 首页
  2. 问答
  3. 正确的方法来定义bootstrap3此配置文件信息

正确的方法来定义bootstrap3此配置文件信息

2016-04-16 26 views
0

我附有我是怎么想的个人资料信息的列表中设置了在这个特殊方式的图像：http://i.stack.imgur.com/kALXa.jpg正确的方法来定义bootstrap3此配置文件信息

这个列表是假设抓住从数据数据库，并将信息放置在附加图像中标签的右侧。

我想到做一个定义列表，所以dt是标签，而dd是来自数据库的信息，但这在使用定义列表时可能在语义上不正确？

我难以理解这些信息应该是什么样子，或者正确的方式应该是什么？

我添加了一些代码，想到了一个描述列表，但代码没有真正正常工作：/和定义列表可能不是要走的路？

<!DOCTYPE html> 
 

 
<head> 
 

 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-8 center-block"> 
 
     <dl class="dl-horizontal"> 
 
      <dt>heading</dt> 
 
      <dd> 
 
      <button class="btn btn-default"></button> 
 
      </dd> 
 

 
      <dt>another heading</dt> 
 
      <dd> 
 
      <button class="btn btn-default"></button> 
 
      </dd> 
 

 
      <dt>another heading</dt> 
 
      <dd> 
 
      <button class="btn btn-default"></button> 
 
      </dd> 
 

 
      <dt>another heading</dt> 
 
      <dd> 
 
      <button class="btn btn-default"></button> 
 
      </dd> 
 

 
      <dt>another heading</dt> 
 
      <dd> 
 
      <button class="btn btn-default"></button> 
 
      </dd> 
 
     </dl> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

来源

2016-04-16 Krys

回答

0

很简单只要用引导网格系统。把你的服务器端代码放在适当的地方。

body{margin:10px;} 
 
.profile{width:100%;height:auto;} 
 
.name{font-size:40px;} 
 
.row{margin-top:5px;}
<head> 
 

 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
</head> 
 
<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="name"> 
 
     <span>First Name</span> 
 
     <span> Last Name</span> 
 
     <button class="btn btn-default pull-right">Button</button> 
 
     </div> 
 
     <div class="col-xs-4"> 
 

 
     <img src="http://images6.fanpop.com/image/photos/38400000/Stylish-Boy-emo-boys-38433361-1946-3107.jpg" class="imag-responsive profile" > 
 
     </div> 
 
     <div class="col-xs-8"> 
 
     <div class="row"> 
 
      <div class="col-xs-4"><label>heading</label></div> 
 
      <div class="col-xs-8"><button class="btn btn-default">Button</button></div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-xs-4"><label>another heading</label></div> 
 
      <div class="col-xs-8"><img src="http://listaka.com/wp-content/uploads/2015/07/baby-boy-wearing-hat.jpg" width=100px height=100px></div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-xs-4"><label>another heading</label></div> 
 
      <div class="col-xs-8">decription of Heading</div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-xs-4"><label>another heading</label></div> 
 
      <div class="col-xs-8">Date</div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-xs-4"><label>another heading</label></div> 
 
      <div class="col-xs-8">175 cm</div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-xs-4"><label>another heading</label></div> 
 
      <div class="col-xs-8">soccer,hockey,Baseball</div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-xs-4"><label>another heading</label></div> 
 
      <div class="col-xs-8">Some another decription</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

来源

2016-04-16 11:33:03

+0

谢谢，Anureg :) – Krys

+0

如何使此响应？ – Krys

相关问题

 相关问题