my blog my blog

Tag: bootstrap
建站心得 网络杂记
流式网格布局宽度控制的处理到响应式布局

 

最近写了个小企业站，使用的是BootStrap的fluid layout流式布局，自己的笔记本分辨率是1333×768的，所以页面设计在本机测试没什么问题，但是交付的时候发现人家说在小分辨率上太难看了，然后就得解决，其实说来也简单，就直接用min-width来作控制即可。最简单的方案就是在css中这样子设置

     
  1. html,body{ 
    2.  
  2.     min-width:1333px; 
    3.  
  3. } 
    4.

这样子处理完成后，可以保证页面的最小宽度为1333px，理论上页面就不会走形了，而这个min-width是css2的，所以兼容性肯定也可以保证。但是，从这里，可以引申联想到一些设计时候需要注意的问题。

1.低分辨率的设备访问时候，是否可以根据分辨率自适而不是单纯的用最小宽度来控制。

2.对于移动设备的访问时候，是否可以根据不同的分辨率有不同的排版甚至部分内容的显示隐藏控制。

好吧，响应式，对响应式设计。

默认的BootStrap是没有加入响应式的css的，需要手动引用，官方doc中是这样子描述的

     
  1. Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. 
    2.  
  2. If you've compiled Bootstrap from the Customize page, you need only include the meta tag. 
    3.  
  3.  
    4.  
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    5.  
  5.     <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> 
    6.  
  6.  
    7.  
  7. Heads up! Bootstrap doesn't include responsive features by default at this time as not everything needs to be responsive. 
    8.  
  8. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed. 
    9.

就是说，需要手动引用两行代码到head标签中。第二行引用就不说了，是引用的响应式的css文件，第一行引用需要说下，这是对viewport的说明。宽度与设备的宽度相适应，缩放默认比例为1。当然content还可以有其它内容

     
  1. width：viewport 的宽度，可以指定为一个像素值，如：600，或者为特殊的值，如：device-width （设备的宽度）。 
    2.  
  2. height：viewport的高度。 
    3.  
  3. initial-scale：初始缩放比例，即当浏览器第一次加载页面时的缩放比例。 
    4.  
  4. maximum-scale：允许浏览者缩放到的最大比例，一般设为1.0。 
    5.  
  5. minimum-scale：允许浏览者缩放到的最小比例，一般设为1.0。 
    6.  
  6. user-scalable：浏览者是否可以手动缩放，yes或no。  
    7.

这样子就引入了BootStrap的响应式css了。到了这里还没有完，我们应该去关注下这个响应式的css是怎么具体实现的响应式功能。打开css文件后你会发现最大的不同是该css文件中引用了很多@media，对，这就是Media Queries啦，Media Queries也是css3的一个重要功能，它提供了对不同的设备分辨率进行适配的功能。

Media Queries的格式如下：

     
  1. @media 设备类型 and (设备特性) { 样式代码 } 
    2.

其中的设备类型有：

     
  1. 1、all：所有设备 
    2.  
  2. 2、screen ：电脑显示器 
    3.  
  3. 3、print：打印用纸或打印预览视图 
    4.  
  4. 4、handheld：便携设备 
    5.  
  5. 5、tv：电视机类型的设备 
    6.  
  6. 6、speech：语意和音频盒成器 
    7.  
  7. 7、braille：盲人用点字法触觉回馈设备 
    8.  
  8. 8、embossed：盲文打印机 
    9.  
  9. 9、projection：各种投影设备 
    10.  
  10. 10、tty：使用固定密度字母栅格的媒介，比如电传打字机和终端 
    11.

然后就是设备特性了，这个设备特性跟viewport很相似

     
  1. 1、width：浏览器宽度 
    2.  
  2. 2、height：浏览器高度 
    3.  
  3. 3、device-width：设备屏幕分辨率的宽度值 
    4.  
  4. 4、device-height：设备屏幕分辨率的高度值 
    5.  
  5. 5、orientation：浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为portrait，否则为landscape。 
    6.  
  6. 6、aspect-ratio：比例值，浏览器的纵横比. 
    7.  
  7. 7、device-aspect-ratio：比例值，屏幕的纵横比. 
    8.  
  8. 8、color：设备使用多少位的颜色值，如果不是彩色设备，值为0 
    9.  
  9. 9、color-index：色彩表的色彩数 
    10.  
  10. 10、monochrome：单色帧缓冲器每个像素的字节 
    11.  
  11. 11、resolution：分辨率值，设备分辨率值 
    12.  
  12. 12、scan：电视机类型设备扫描方式，progressive或interlace 
    13.  
  13. 13、grid：只能指定两个值0或1 
    14.

其中呢，设备类型是可以忽略掉不必须写的，默认应该是all。像BootStrap的响应式css中就是用如下的格式来进行css定义的

 

     
  1. /* Large desktop */ 
    2.  
  2. @media (min-width: 1200px) { ... } 
    3.  
  3.   
    4.  
  4. /* Portrait tablet to landscape and desktop */ 
    5.  
  5. @media (min-width: 768px) and (max-width: 979px) { ... } 
    6.  
  6.   
    7.  
  7. /* Landscape phone to portrait tablet */ 
    8.  
  8. @media (max-width: 767px) { ... } 
    9.  
  9.   
    10.  
  10. /* Landscape phones and down */ 
    11.  
  11. @media (max-width: 480px) { ... } 
    12.

如果需要对范围进行一个界定的话可以使用and关键词。这样子就可以完成对不同的分辨率的设备进行单独的布局设置调整了。在BootStrap中还有一点是比较不错的，它支持.visible-phone、.visible-tablet、.visible-desktop、.hidden-phone、.hidden-tablet、.hidden-desktop这几个属性来对不同的设备进行定义是否显示某些模块。

最近要是有空就写个小响应式的demo玩儿玩儿~~~酱说我的文章分类有点儿乱，其实，我也是这么觉得的，很多事儿都该条理下了~

奶牛 | 2013年08月17日
建站心得
bootstrap的tooltip需要手动激活才会生效

 

我说怎么按照官方的代码写都不出效果呢，你妹，原来tooltip要手动激活的好不好，还有那个popover，需要tooltip跟手动激活。

下面来说说那个tooltip的使用，先引用下官方的原话：

  1. For performance reasons,  
  2. the tooltip and popover data-apis are opt in,  
  3. meaning you must initialize them yourself. 

翻译过来就是：出于性能原因的考虑，tooltip和popover的data-apis是可选的，这就意味着你必须手动初始化它们。好吧，手动就手动吧，让人好伤感的手动，而且也没有预留的可选api，就自己写了一个最简单的，js新手，能用就好了。

打开bootstrap.js，搜索tooltip，然后在tooltip的最后添加如下代码：

  1. /* TOOLTIP API 
  2.  * =================== */  
  3. $('a[data-toggle=tooltip]').mouseover(function() { 
  4.  $(this).tooltip('show'); 
  5.   }) 

然后使用方法是：

  1. <a href="#" data-toggle="tooltip" title="http://www.nenew.net">奶牛博客</a> 

在a标签中增加data-toggle=“tooltip”，title为描述，然后就可以看到tooltip的效果了。

PS：JQuery确实好用很多，比如依据tag的选择，而且代码更加简练，好吧，希望有时间可以细致的学习下，最近看了好多东西，脑子有点儿乱，实现一样是一样吧。

奶牛 | 2013年04月1日
建站心得
Bootstrap离线帮助文档下载

 

前几天大双评论说bootstrap很好用，看了两天，试了下twitter的这个web前端框架，果然灰常强大，很多东西直接套用代码就可以了，前端直接可以不用浪费太多时间去搭配css什么的了，当然，有能力的自己修改、配色什么的也当然是没问题的咯，反正css就放在那里，想怎么处置就怎么处置咯，还有一些js也包含在里面了，直接用就可以，省去我等js小白的麻烦。

今天发上来官方的帮助文档的离线文档，以后写东西就可以直接看离线文档了，不用开网页找了，页面跟bootstrap的页面完全一样的，因为是git clone回来的，嘎嘎~~~

打个小包发上来：

在线版本：http://twitter.github.com/bootstrap/

离线版本：点此下载

奶牛 | 2013年03月17日