Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bootstrap #13

Open
uniquejava opened this issue Dec 29, 2015 · 1 comment
Open

bootstrap #13

uniquejava opened this issue Dec 29, 2015 · 1 comment

Comments

@uniquejava
Copy link
Owner

glyphicon

http://getbootstrap.com/components/

表单

结构如下
form.form-horizontal > .form-group > label + input.form-control
其中form上的.form-horizontal是可选的(我觉得如果是手机就不用加。。)

@uniquejava
Copy link
Owner Author

modals

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-modals.php

Options

There are certain options which may be passed to modal() Bootstrap method to customize the functionality of a modal window.

Name Type Default Value Description
backdrop boolean or the string 'static' true Includes a modal-backdrop (black overlay area) element. Alternatively, you may specify static for a backdrop which doesn't close the modal on click.
keyboard boolean true Closes the modal window on press of escape key.
show boolean true Shows the modal when initialized or activate.
remote URL false Deprecated If a remote url is provided, content will be loaded one time via jQuery's load method and injected into the '.modal-content' div.

You may set these options either through the use of data attributes or JavaScript. For setting the modals options via data attributes, just append the option name to data-, like data-backdrop="static", data-keyboard="false" etc.
However, JavaScript is the more preferable way for setting these options as it prevents you from repetitive work. See the modal's method .modal(options) in the section below to know how to set the options for modals using the JavaScript.

<script type="text/javascript">
$(document).ready(function(){
    $(".launch-modal").click(function(){
        $("#myModal").modal({
            backdrop: 'static'
        });
    }); 
});
</script>

Events

Bootstrap's modal class includes few events for hooking into modal functionality.

Event Description
show.bs.modal This event fires immediately when the show instance method is called.
shown.bs.modal This event is fired when the modal has been made visible to the user. It will wait until the CSS transition process has been fully completed before getting fired.
hide.bs.modal This event is fired immediately when the hide instance method has been called.
hidden.bs.modal This event is fired when the modal has finished being hidden from the user. It will wait until the CSS transition process has been fully completed before getting fired.
loaded.bs.modal This event is fired when the modal has loaded content using the remote option.

The following example displays an alert message to the user when fade out transition of the modal window has been fully completed.

<script type="text/javascript">
$(document).ready(function(){
    $("#myModal").on('hidden.bs.modal', function(){
        alert("Modal window has been completely closed.");
    });
});
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant