1. 首頁
  2. 問答
  3. 正確的方法來定義bootstrap3此配置文件信息

正確的方法來定義bootstrap3此配置文件信息

2016-04-16 54 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

相關問題

 相關問題