Question

这是一个像我这样的懒骨头的问题〜所以在Bootstrap中我可以这样做：

<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
</div>

我可以制作非常易读的网站。
然而，现在我手中有一大段纯HTML代码，我想做一个非常快速的演示。这是我的纯HTML代码的一小部分：

<input type="button" value="I am a button ._." name="someName"/><br><br>
<input type="checkbox" value="You boy???" name="gender"/><br>
<input type="checkbox" value="You girl???" name="gender"/><br><br>

我想使用Bootstrap样式，以便那些HTML代码可以很好地设置样式，但同时我不想逐个编辑它们来添加＆＃34; form-control＆＃34;在每个输入元素上。

无论如何将引导程序默认表单样式，默认颜色，默认导航样式等应用到我的代码中而不自行添加这些属性吗？

<小时/> 例如，我想要我的：

<input type="button" value="I am a button ._." name="someName"/><br><br>

成为：

<input  class="form-control" type="button" value="I am a button ._." name="someName"/><br><br>

没有我指定表单控件类。

谢谢！

Answer 1

您需要为此解决方案编写 GLOBAL CSS 或使用jquery window.load函数。例如：

CSS解决方案。

来自Bootstrap 3：.form-control

.form-control {
    font-size: 14px;
    line-height: 1.42857;
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    -webkit-transition: border-color ease-in-out .15s,
    box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s,
    -webkit-box-shadow ease-in-out .15s;
    -moz-transition: border-color ease-in-out .15s,
    box-shadow ease-in-out .15s,
    -moz-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,
    box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,
    -webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,
    box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,
    box-shadow ease-in-out .15s,
    -webkit-box-shadow ease-in-out .15s,
    -moz-box-shadow ease-in-out .15s;
    color: #555;
    border: 1px solid #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #fff;
    background-image: none;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

对于全球css：

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="search"],
input[type="week"],
input[type="time"],
input[type="url"],
input[type="tel"],
input[type="range"],
select{
    font-size: 14px;
    line-height: 1.42857;
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    -webkit-transition: border-color ease-in-out .15s,
    box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s,
    -webkit-box-shadow ease-in-out .15s;
    -moz-transition: border-color ease-in-out .15s,
    box-shadow ease-in-out .15s,
    -moz-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,
    box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,
    -webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,
    box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,
    box-shadow ease-in-out .15s,
    -webkit-box-shadow ease-in-out .15s,
    -moz-box-shadow ease-in-out .15s;
    color: #555;
    border: 1px solid #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #fff;
    background-image: none;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

jQuery解决方案：

$(window).on('load',function(){
    $('input[type=text],input[type=email],input[type=number],input[type=password],input[type=date],input[type=datetime-local],input[type=month],input[type=search],input[type=week],input[type=time],input[type=url],input[type=tel],input[type=range],select').addClass('form-control');
});

检查jQuery摘要。

$(window).on('load',function(){
    $('input[type=text],input[type=email],input[type=number],input[type=password],input[type=date],input[type=datetime-local],input[type=month],input[type=search],input[type=week],input[type=time],input[type=url],input[type=tel],input[type=range],select').addClass('form-control');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <input type="text" />
  <input type="email" />
  <input type="number" />
  <input type="password" />
  <input type="date" />
  <input type="datetime-local" />
  <input type="month" />
  <input type="search" />
  <input type="week" />
  <input type="time" />
  <input type="url" />
  <input type="tel" />
  <input type="range" />
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

我在html中没有编写bootstrap属性就找到了这两种方法。

其他选项包含jade

https://www.npmjs.com/package/jade

注意：您可以按JavaScript加载任何内容。但你应该写 JavaScript文件中的所有属性和标记。（我觉得这很难写）。否则你无法跳过写tag和 attribute
中的html

将默认引导程序属性添加到HTML，而无需手动编写所有属性以进行快速演示

1 个答案: