如何设计带有输入和文本区域的Bootstrap表单？

Question

如何使用bootstrap4设计附件图像？我是Web开发的新手。

Answer 1

这样的事情如何作为起点？

HTML

<div class="container main-form">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 custom-col">
      <div class="p-5">
        <form>
          <div class="form-group">
            <label for="exampleFormControlInput1">Email address</label>
            <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
          </div>
          <div class="form-group">
            <label for="exampleFormControlSelect1">Example select</label>
            <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
          </div>
          <div class="form-group">
            <label for="exampleFormControlSelect2">Example multiple select</label>
            <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
          </div>
          <div class="form-group">
            <label for="exampleFormControlTextarea1">Example textarea</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
          </div>
          <div class="row justify-content-center align-items-center">
            <button class="btn btn-primary" type="submit">Button</button>
          </div>
        </form>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 custom-col">
      <div class="p-5">
        <form>
          <div class="form-group">
            <label for="exampleFormControlInput1">Email address</label>
            <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
          </div>
          <div class="form-group">
            <label for="exampleFormControlSelect1">Example select</label>
            <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
          </div>
          <div class="form-group">
            <label for="exampleFormControlSelect2">Example multiple select</label>
            <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
          </div>
          <div class="form-group">
            <label for="exampleFormControlTextarea1">Example textarea</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
          </div>
          <div class="row justify-content-center align-items-center">
            <button class="btn btn-primary" type="submit">Button</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

CSS

.main-form {
  margin-top: 30px;
}

.custom-col {
  border : 2px solid #ccc;
  background-color : #eee;
}

链接到笔

https://codepen.io/anjanasilva/pen/dgMggQ

我希望这会有所帮助。谢谢。

Answer 2

只是让您大致了解主要组成部分。推荐这个 员工姓名：

HTML

<input type="text" class="input_primary">

<!-- THIS IS HOW WE CAN MAKE THE INPUT -->
<div class="parent">
  <span class="arrow-down icon"></span>
  <input type="text" class="input_secondary">
</div>
<!-- DIVS -->

<div class="parentidv">
  <div class="div2">a</div>
  <div class="div2" style="border-left:1px solid black">as</div>
</div>

CSS：

.input_primary{
  border:none;
  border-bottom: 2px solid black;
  height:31px;
}
.parent{
  position: relative;
  width:200px;
  padding:20px;
}
.input_secondary{
  width:100%;

  height:31px;
  border:2px solid black;
}
/* GOT ARROW FROM HERE https://cssicon.space/#/icon/arrow-down */
.arrow-down.icon {
  color: #000;
  position: absolute;
  margin-left: 10px;
  margin-top: 2px;
  right:35px;bottom:30px;
  width: 1px;
  height: 16px;
  background-color: currentColor;
}

.arrow-down.icon:before {
  content: '';
  position: absolute;
  left: -5px;
  top: 3px;
  width: 10px;
  height: 10px;
  border-top: solid 1px currentColor;
  border-right: solid 1px currentColor;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}
.parentidv{
  height:200px;width:300px;
  border:1px solid black;
  margin:0px auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-gap:10px;
  padding:10px;
}
.div2{
  height:100%;width:100%;
}

笔。https://codepen.io/kalpeshshende/pen/ZqYwXm