如何使用bootstrap中的按钮向下移动页面

时间:2016-05-01 20:09:47

标签: html css twitter-bootstrap

我正在尝试在页面顶部添加按钮,在我点击按钮时在底部添加一个表单,它应该在同一页面上的表单位置向下。我不知道如何做到这一点。

这是我的按钮代码



 <div class="col-xs-12 col-sm-2">
                     <p style="padding:40px;"></p>
                <button class="btn btn-block btn-warning">Reserve Table</button>
                </div>
&#13;
&#13;
&#13;

这是我的表格代码

&#13;
&#13;
<div class="col-xs-6 col-sm-3">
                <div class="form-vertical" role="form">
                      <p style="padding:10px;"></p>
                    <h3>Table Reservation</h3>
             </div>
        </div>
          <div class="col-xs-6 col-sm-9">
                <div class="form-horizontal" role="form">
                      <div class="form-group">
                <label for="Number" class="col-sm-2 control-label">Number of people</label>  
                   <label class="radio-inline">
                       <input type="radio" name="optradio">1
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="optradio">2
                    </label>
                <label class="radio-inline">
                    <input type="radio" name="optradio">3
                </label>
                           <label class="radio-inline">
                    <input type="radio" name="optradio">4
                </label>
                           <label class="radio-inline">
                    <input type="radio" name="optradio">5
                </label>
                           <label class="radio-inline">
                    <input type="radio" name="optradio">6
                </label>
                    </div>
                <div class="form-group has-feedback">
                 <label for="Date-time" class="col-sm-2 control-label">Date &amp; Time</label>  
                    <div class="col-sm-3">
          
                <input type="text" class="form-control pull-left" name="Date-time" placeholder="date">
                          <i class="glyphicon glyphicon-calendar form-control-feedback"></i>
                        </div>
                        
                     <div class="form-group  has-feedback">
                 
                              <div class="col-sm-3">
                <input type="text" class="form-control"  placeholder="time">
                          <i class="glyphicon glyphicon-time form-control-feedback"></i>
                        </div>
                        </div>
                    <div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  Please <strong ><a href="tel:81343444" style="color:black">call</a></strong> for bookinng of more than 6 people.
</div>
                    </div>
             </div>
&#13;
&#13;
&#13;

请告诉我怎么做?

2 个答案:

答案 0 :(得分:1)

你好@lomesh shah这很容易。

第1步

首先给该表单一个像

的id
<a href="#testform" class="btn btn-block btn-warning">Go to form</a>

第2步

你必须使用锚标记而不是按钮,但是通过使用bootstrap的btn类,你可以给它一个按钮外观然后使用href中的表单的id,点击它将把你带到表单。见下面的代码

define ([a-zA-Z_]\w*) as ("[^"]+"|[\w.]+)
困惑?打我回来:)我会回复

答案 1 :(得分:0)

提供表单ID 然后用这个

@Component
public class CustomGitInfoContributor extends GitInfoContributor {

  @Autowired
  public CustomGitInfoContributor(GitProperties properties) {
    super(properties);
  }

  @Override
  public void contribute(Info.Builder builder) {
    Map<String, Object> map = generateContent();
    map.put("dirty", getProperties().get("dirty"));
    builder.withDetail("git", map);
  }
}