Recently, in order to make the pages more concise and beautiful, bootstrap has been introduced. It has to be said that bootstrap encapsulates a lot of things. It is very convenient to use. In the process of development, I mainly applied modal box and form verification. It feels good. I want to record the memo and share it with you at the same time.

Bootstrap modal box

1. Files to be imported

    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <link rel="stylesheet" href="bootstrap.min.css"/>

2. In the page, define a button to trigger the modal box

##  Media Creation Modal Box start
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <form class="form-horizontal" role="form" method="post" id='formva' action = ''>
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">Creating media</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="mediaTypeM" class="col-sm-2 control-label">media type</label>
                        <div class="col-sm-6">
                            <select class="form-control" id="mediaTypeM" name="mediaTypeM">
                                <option value="1">PC</option>
                                <option value="2">WAP</option>
                                <option value="3">APP</option>
                            </select>
                        </div>
                    </div>   
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="saveAppInfo()">Preservation</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </form>
</div>
##  Created modal box end

3. Calling methods

You can directly trigger the opening and closing of the modal box by adding attributes to the button

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

You can also use the onclick method to add a js function to trigger

//open
function createAppInfo(){
        $("#myModal").modal('show');
     }
// Close
 $("#myModal").modal('hide');

Bootstrap-validator form validation

1. Files to be imported

<script src="jquery.min.js"></script>
<link rel="stylesheet" href="bootstrapValidator.min.css"/>
<script type="text/javascript" src="bootstrapValidator.min.js"></script>

2. You need to add an ID =''formva'to the form to let bootstrap find it. When the page is loaded, you begin to load this js. When the page input box is entered, you begin to judge. bootstarp has many rules. See the article for reference: http://www.cnblogs.com/huangcong/p/5335376.html

// bootstrap validator
$(document).ready(function() {
    $('#formva').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            campaignName2: {
                message: 'The campaignName2 is not valid',
                validators: {
                    notEmpty: {
                        message: 'The campaignName2 is required and can\'t be empty'
                    }
                }
            },
            budget: {
                message: 'The budget is not valid',
                validators: {
                    notEmpty: {
                        message: 'The budget is required and can\'t be empty'
                    },
                    stringLength: {
                        min: 1,
                        max: 10,
                        message: 'The budget must be more than 1 and less than 10 characters long'
                    },
              numeric:{
                message: 'The budget is required and can\'t be number'
              },
              regexp: {
                    regexp: /^([1-9]{1}[\d]{0,7}|0{1})(\.[\d]{1,2})?$/,
                    message: 'The budget can only consist of number, dot '
              }
                }
            }
        }
    });
});

3. In form form form, if submit button is submit, then when you click submit, you will prompt the form data that has not been input according to the rules. It is not allowed to submit. If it is not submit, it will prompt, but it can also submit. When using js to control submission, you need to call bootstrap-validator before submission.

// bootstrap form validation
$('#formva').data('bootstrapValidator').validate();
if(!$('#formva').data('bootstrapValidator').isValid()){
    return false;
}

The above is a little record of learning bootstrap, to prevent oneself from forgetting, in case of occasional need. If it is wrong, please leave a message to correct it.