bootstrap book

bootstrap最常用的几个网站

http://www.bootcss.com/

https://getbootstrap.com/

 

1移动设备优先策略

内容
决定什么是最重要的。
布局
优先设计更小的宽度。
基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。
渐进增强
随着屏幕大小的增加而添加元素。

bootstrap 嵌套行 嵌套列 溢出 宽度不正确 栅格化系统计算[转]

引用自(还提醒了less编译,从docs取新css) 赞: http://www.cnblogs.com/isdom/p/webtips004.html?tvd

我自己试验先把外围<row>置样式"overflow:hidden" ,再加大内层<row>的<div>的 padding,而不是把padding置0

.row.no_gutter [class^="col-"], .row.no_gutter [class*="col-"] {
    padding-right: 20px;
    padding-left: 20px;
}

data-toggle,data-target

data-toggle指以什么事件触发，常用的如modal,popover,tooltips等，data-target指事件的目标，一起使用就是代表data-target所指的元素以data-toggle指定的形式显示

 

1bootstrap辅助类

http://www.runoob.com/bootstrap/bootstrap-helper-classes.html

 1clearfix 

菜鸟教程(极好样例-多改变窗口宽度): http://www.runoob.com/try/try2.php?filename=trybs_grid_ex7-block

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap .clearfix 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-xs-6 col-sm-3" style="background-color:lavender;">
      列 1<br>
      重置窗口大小，查看效果。也尝试删除有 clearfix  的 div 查看效果。
    </div>
    <div class="col-xs-6 col-sm-3" style="background-color:lavenderblush;">列 2</div>
    <!-- Add clearfix for only the required viewport -->
    <div class="clearfix visible-xs"></div>
    <div class="col-xs-6 col-sm-3" style="background-color:lightcyan;">列 3</div>
    <div class="col-xs-6 col-sm-3" style="background-color:lightgray;">列 4</div>
  </div>
</div>

</body>
</html>
View Code

 

1在bootstrap3中怎么强制让label和input保持在同一行里

http://www.runoob.com/bootstrap/bootstrap-forms.html

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="form-label">Search</label>
    <input type="text" class="form-control">
  </div>
 </form>

 效果: 

 

 

 

2bootstrap中container类和container-fluid类的区别

 container：类用于固定宽度并支持响应式布局的容器 , 固定960px宽度； （如果又引入了响应式样式，则会适当调整；例如1600×900，它会使用1200px ；

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

container-fluid：类用于 100% 宽度，占据全部视口（viewport）的容器 ,自适应屏幕宽度，即满屏显示；

3 bootstrap-datetimepicker

 http://www.bootcss.com/p/bootstrap-datetimepicker/

4

 

 

class="form-control"后面跟的元素如<label>不换行

<input name="address" class="form-control" style="display:inline;width: 80%" type="text"  placeholder="url请求地址..." /><label>e</label>

 

6 Bootstrap 的导航菜单navbar的高度调整.

在页面引入自定义样式,不要去改源文件.

<style type="text/css">

            
            .navbar-nav>li>a {
                padding-top: 10px;
                padding-bottom: 10px;
            }
            
            .navbar-brand {
                height: 40px;
                padding-top: 10px;
            }
            
            .navbar {
                min-height: 40px;
            }
            
            .navbar-toggle {
                margin-top: 4px;
                margin-bottom: 4px;
            }
</style>

 

 

 

container：固定960px宽度； （如果又引入了响应式样式，则会适当调整；例如1600×900，它会使用1200px ； 参见css文档：
/* 大屏幕 */
@media (min-width: 1200px) { ... } 

/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... } 

/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... }

/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }) ）

container-fluid：自适应屏幕宽度，即满屏显示；


Scrollspy  bug

在使用Scrollspy滚动监听时,有个弱点,<nav>下的<a>标签必须是<li>的直接子元素,才能有滚动监听效果

强力插件

英文名 解释 参考网页
Bootstrap Auto-Hiding Navbar nav导入自动隐藏 http://www.virtuosoft.eu/code/bootstrap-autohidingnavbar/
bootstrap-datepicker 日期控件 https://github.com/uxsolutions/bootstrap-datepicker
bootstrap-datetimepicker 时间控件  https://github.com/smalot/bootstrap-datetimepicker

 

 

 

 

bootstrapModal整合百度地图

引用自: http://bbs.csdn.net/topics/391052982

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 模态框（Modal）插件</title>
   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5dEsfUlwMV0GdHlxoqgvlxE0"></script>  
</head>
<body>
 
<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" 
   data-target="#myModal" id="createMap">
   开始演示模态框
</button>
 
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" 
               data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
               模态框（Modal）标题
            </h4>
         </div>
         <div class="modal-body" id="maps" style="height:400px;">
            在这里添加一些文本
         </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><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<script type="text/javascript">
$(function(){
$("#createMap").click(function(){
setTimeout(function() {//添加延时加载。解决问题
var map = new BMap.Map("maps");
var myCity = new BMap.LocalCity();
myCity.get(function(res){
    map.centerAndZoom(res.center,res.level); 
});
},300);
});
});
</script>
</body>
</html>
View Code

 

bootstrapTable在最后新增一行

$('#xxxTable').bootstrapTable('insertRow', {
　　index:$('#xxxTable').bootstrapTable('getOptions').totalRows,
　　row:datas
});

 

 

 

 

 

 

 

 

posted @ 2016-12-10 20:18  苦涩泪滴  阅读(223)  评论(0)  编辑  收藏  举报