Q:

Add default bootstrap attribute to HTML without manually writing all the attribute for quick demo purposes

This is a question for a lazy bone like me~ 
So in Bootstrap I can do something like this:
<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
</div>

And I can make very readable website.  However, now in my hand is a large piece of pure HTML code that I want to do a very quick demo.  Here a very small part of my pure HTML code:
<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>

I want to use Bootstrap styling so that those HTML codes can be well styled, but at the same time I don't want to edit them one by one to just add "form-control" on each one of the input elements. 
Is there anyway to apply the bootstrap default form styling, default color, default nav style and so on, all into my code without adding those attribute myself? 

For example, I want my: 
<input type="button" value="I am a button ._." name="someName"/><br><br>

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

Without me specifying the form-control class.   
Thank you! 

A:

You need write GLOBAL CSS for this solution or use jquery window.load function.  For example:
CSS solution. 
From 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);
}

For global 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 solution:
$(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');
});

Check the jQuery snippet. 

$(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>

I found this two way for without writing bootstrap attribute in html. 
Other option have jade
https://www.npmjs.com/package/jade

Note: You can load anything by JavaScript.  But you should be write
  all attribute and tag in JavaScript file. ( I think it's hard to
  write).  Otherwise you have no way to skip writing tag and
  attribute in html

