您的位置:首页 > Web前端 > BootStrap

bootstrap学习细节笔记

2016-02-01 13:25 573 查看
favicon.icon 这个文件总是被忽略,但是有可能在你调试主页的时候会发现有一个favicon.icon这个文件并没有接收到,favicon还是挺重要的,浏览器可以将favicon显示于浏览器的地址栏中,也可置于书签列表的网站名前,还可以放在标签式浏览界面中的页标题前。

http://www.chami.com/html-kit/services/favicon/ 这是一个比较好用的在线制作favicon的网站

前端如果是用类似bootstrap之类的框架,尽量不要全用默认编译好的css等,可以自己通过less编译出自己喜欢的样式,也可以去github上看一些开源的项目,,注意的是bootstrap3至少要1.11.3以上的jquery支持,否则默认封装好的js代码就会无效

bootstrap中图标的使用,默认的图标来源于 Glyphicon Halflings ,要使用一个图标的方式是先把一个button写出来,然后用button包裹住一个span,这个span中就用class定义图标的样式以及文字

<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>


在bootstrap 中的aria相关属性,比如aria-hidden,aria-label,其实都是用于屏幕阅读器的,帮助残障人士更好的访问网站,默认true就可以了。

这是一篇关于使用方法的详细博客/article/5377170.html

还有专为残障人士设计的sr-only系统,全称其实就是screen reader only,它可以把图标读出来,其实就是把图标的意思设置出来,然后通过屏幕阅读器就可以使用了,非常的方便

<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>


[b]这里的声明要注意的是用role而不是type,先放一个警告的图标,然后弹出这个图标表达的意思[/b]

JS控制的data系列参数

名称类型默认值描述
backdropboolean或字符串’static’trueIncludes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn’t close the modal on click.
keyboardbooleantrue键盘上的 esc 键被按下时关闭模态框。
showbooleantrue模态框初始化之后就立即显示出来。
remotepathfalse如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容(只加载一次)并插入 .modal-content 内。如果使用的是 data 属性 API,还可以利用 href 属性指定内容来源地址。
经常会使用到data-toggle,toggle()方法在jQuery中是切换元素的可见状态


bootstrap carousel 轮播功能,其实没太多说的,按照模板即可,其中标签中一般要定义上alt参数,用于图片的说明

注意拆分问题的解决方法,比如我要实现一个伪gif图的形式,那么首先,我们应该把一张张jpg型图片引进去,然后通过后端逻辑处理来拆分得到


题外话

browsersync 这个工具在ubuntu上安装可能会遇到如下的问题

Ubuntu下提示/usr/bin/env: node: 没有那个文件或目录

解决方法

由于Ubuntu下已经有一个名叫node的库,因此Node.js在ubuntu下默认叫nodejs,需要额外处理一下
 http://stackoverflow.com/questions/18130164/nodejs-vs-node-on-ubuntu-12-04 
sudo ln -s /usr/bin/nodejs /usr/bin/node


psd格式文件:photoshop document ,PSD格式在保存时会将文件压缩,以减少占用磁盘空间,但PSD格式所包含图像数据信息较多(如图层、通道、剪辑路径、参考线等),因此比其他格式的图像文件还是要大得多。由于PSD文件保留所有原图像数据信息,因而修改起来较为方便
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: