Bootstrap:是否可以在旋转木马上添加表格?

时间:2017-06-13 14:46:53

标签: html css twitter-bootstrap

我正在使用Bootstrap4。 我一直在开发一个足球网站,允许用户添加自定义播放器。为此我虽然Carousel是一件好事,因为用户可以按箭头浏览表单并添加尽可能多的玩家。
我们可以通过使用Boostrap来制作吗?

1 个答案:

答案 0 :(得分:2)

是的,这是可能的。我将举例说明在第一张幻灯片上运行的表单。幻灯片/定制的其余部分取决于您的想象力。不要过多考虑我的例子。我把它扔在一起表明它是可能的。

<div class="carousel slide" data-ride="carousel" id="carouselExampleSlidesOnly">
<div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
        <form class="form-horizontal" style="width:50%;">
            <fieldset>
                <!-- Form Name -->
                <legend>Form Name</legend> <!-- Text input-->
                <div class="form-group">
                    <label class="col-md-4 control-label" for="textinput">Username</label>
                    <div class="col-md-4">
                        <input class="form-control input-md" id="textinput" name="textinput" placeholder="Username" type="text">
                    </div>
                </div><!-- Password input-->
                <div class="form-group">
                    <label class="col-md-4 control-label" for="passwordinput">Password</label>
                    <div class="col-md-4">
                        <input class="form-control input-md" id="passwordinput" name="passwordinput" placeholder="Password" type="password">
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
    <div class="carousel-item"><img alt="Second slide" class="d-block img-fluid" src="..."></div>
    <div class="carousel-item"><img alt="Third slide" class="d-block img-fluid" src="..."></div>
</div>