如何将Bootstrap组合框应用到Flask组合框?

wnrlj8wa  于 2023-06-20  发布在  Bootstrap
关注(0)|答案(1)|浏览(129)

我想在Flask组合框中使用Bootstrap组合框。目前,Flask组合框对我来说工作得很好。如何将Bootstrap按钮图形应用到它?

Bootstrap组合框

<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>

瓶码

<form name="Item_1" action="/combobox" method="POST">
    <select name="colours">
      {% for colour in colours %}
        {% if colour == chosen %}
         <option value="{{ colour }}" SELECTED>{{ colour }}</option>
        {% else %}
         <option value="{{ colour }}">{{ colour }}</option>
        {% endif %}     
      {% endfor %}     
   </select>
   <input type="submit">
</form>
wnavrhmk

wnavrhmk1#

你可以在下面的方法中更改你的Flask代码,为你的Flask组合框提供Bootstrap按钮样式:

<form name="Item_1" action="/combobox" method="POST">
  <div class="btn-group">
    <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Select Color
    </button>
    <select class="btn btn-secondary btn-sm" name="colours">
      {% for colour in colours %}
        {% if colour == chosen %}
          <option value="{{ colour }}" SELECTED>{{ colour }}</option>
        {% else %}
          <option value="{{ colour }}">{{ colour }}</option>
        {% endif %}     
      {% endfor %}     
    </select>
  </div>
  <input type="submit" class="btn btn-primary btn-sm" value="Submit">
</form>

这段代码涵盖了btn-group div中的按钮和选择组件。select元素具有btn btn-secondary btn-sm类,这使其具有Bootstrap样式,而button具有btn btn-secondary btn-sm dropdown-toggle类,这使其类似于Bootstrap按钮。
最后但并非最不重要的一点是,为了给予它Bootstrap主按钮样式,提交按钮的输入元素具有类btn btn-primary btn-sm。

相关问题