英文:
How to apply a Bootstrap combobox to a Flask combobox?
问题
我想在Flask combobox上使用Bootstrap combobox。目前Flask combobox对我来说运行正常。如何将Bootstrap按钮样式应用于它？
Bootstrap Combobox
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button
</button>
Flask 代码
<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>
英文:
I would like to use a Bootstrap combobox with the Flask combobox. Currently the Flask combobox works fine for me. How can I apply the Bootstrap button graphic to it?
Bootstrap Combobox
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button
</button>
Flask Code
<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>
答案1
得分: 0
你可以按照以下方法更改你的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">
选择颜色
</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="提交">
</form>
这段代码将按钮和选择组件包装在一个btn-group div中。选择元素具有类btn btn-secondary btn-sm，这使它具有Bootstrap样式，按钮具有类btn btn-secondary btn-sm dropdown-toggle，使其看起来像Bootstrap按钮。
最后但同样重要的是，为了给它应用Bootstrap的主要按钮样式，提交按钮的输入元素具有类btn btn-primary btn-sm。
英文:
You can change your Flask code in the following method to give your Flask combobox the Bootstrap button styling:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
This code covers the button and select components in a btn-group div. The select element has the class btn btn-secondary btn-sm, which gives it the Bootstrap styling, and the button has the classes btn btn-secondary btn-sm dropdown-toggle, which makes it resemble the Bootstrap button.
Last but not least, to give it the Bootstrap primary button style, the input element for the submit button has the class btn btn-primary btn-sm.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论