[TOC] ## css 部分 ### 文本对齐 ``` <p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> ``` ### 内联表单 多个input 都不进行换行 ``` <form class="form-inline"> <div class="form-group"> <label >账户<input type="text" class="form-control" placeholder="Jane Doe"></label> </div> </form> ``` ### input,textarea,优化样式 可添加`form-control` 添加样式 ### 内联单选和多选框 ``` <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label> ``` ## 辅助类 ### 关闭按钮 ``` <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button> ``` ### 三角符号 `<span class="caret"></span> ` ### 快速浮动 ``` <div class="pull-left">...</div> <div class="pull-right">...</div> ``` ### 让内容块居中 `<div class="center-block">...</div> ` ### 显示或隐藏内容 ``` <div class="show">...</div> <div class="hidden">...</div> ``` ## 按钮状态 ``` <button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off"> Loading state </button> <script> $('#myButton').on('click', function () { var $btn = $(this).button('loading') //code $btn.button('reset') }) </script> ``` ### 表单中将一行纯文本和`label`元素放置于同一行 ## js 部分 ### 拟态框 只保持`data-target`的值与Model中Id 值一致即可 通过给 `modal-dialog` 加后缀,` modal-lg` ```css <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog modal-lg" role="document"> </div> </div> ```