-
bootstrap 中，checkbox／radio都包装在label标签下，并包装在.checkbox活着.radio容器内。查看全部
-
<!-- data-target触发模态弹出窗元素 --> <button class="btn btn-primary" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#mymodal-data" type="button">通过data-target触发</button> <!-- 模态弹出窗内容 -->查看全部
-
<!-- data-target触发模态弹出窗元素 button标签增加data-toggle="modal" data-target="#mymodal-data"--> <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#mymodal-data">通过data-target触发</button> <!-- 模态弹出窗内容 modal的 id="mymodal-data" --> <div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模态弹出窗标题</h4> </div> <div class="modal-body"> <p>模态弹出窗主体内容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div>查看全部
-
<a data-toggle="modal" href="#mymodal-link" class="btn btn-primary">通过链接href属性触发</a> <!-- 模态弹出窗内容 modal的 id="mymodal-link"--> <div class="modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="mymodal-link"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模态弹出窗标题</h4> </div> <div class="modal-body"> <p>模态弹出窗主体内容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div>查看全部
-
模态窗口定义结构 <!--modal window define--> <div class="modal" id="mymodal"> <!--modal dialog--> <div class="modal-dialog"> <!--modal content--> <div class="modal-content"> <!--modal header--> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span> <span class="sr-only">Close</span></button> <h4 class="modal-title">模态弹出窗标题</h4> </div> <!--modal body--> <div class="modal-body"> <p>模态弹出窗主体内容</p> </div> <!--modal footer--> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->查看全部
-
平时要把css文件放在head中，把js文件放在body的最下面查看全部
-
文本对齐 .text-justify { text-align: justify; }两端对齐. 目前两端对齐在各浏览器下解析各有不同，特别是应用于中文文本的时候。所以项目中慎用。查看全部
-
斜体 在排版中，除了用加粗来强调突出的文本之外，还可以使用斜体。斜体类似于加粗一样，除了可以给元素设置样式font-style值为italic实现之外，在Bootstrap中还可以通过使用标签<em>或<i>来实现。查看全部
-
强调内容 在实际项目中，对于一些重要的文本，希望突出强调的部分都会做另外的样式处理。Bootstrap同样对这部分做了一些轻量级的处理。 如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。查看全部
-
不过Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是： 1、input-sm:让控件比正常大小更小 2、input-lg:让控件比正常大小更大查看全部
-
1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline” 2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline” 3. 相同的name 实现单选查看全部
-
1、不管是checkbox还是radio都使用label包起来了 2、checkbox连同label标签放置在一个名为“.checkbox”的容器内 3、radio连同label标签放置在一个名为“.radio”的容器内 在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式。查看全部
-
单行输入框，常见的文本输入框，也就是input的type属性值为text。 为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”，如： <form role="form"> <div class="form-group"> <input type="email" class="form-control" placeholder="Enter email"> </div> </form>查看全部
-
Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格（标签居左，表单控件居右） 在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件： 1、在<form>元素是使用类名“form-horizontal”。 2、配合Bootstrap框架的网格系统。（网格布局会在以后的章节中详细讲解）查看全部
-
Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。示例如下： <div class="table-responsive"> <table class="table table-bordered"> … </table> </div>查看全部
举报
0/150
提交
取消