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定义图标的样式以及文字
在bootstrap 中的aria相关属性,比如aria-hidden,aria-label,其实都是用于屏幕阅读器的,帮助残障人士更好的访问网站,默认true就可以了。
这是一篇关于使用方法的详细博客/article/5377170.html
还有专为残障人士设计的sr-only系统,全称其实就是screen reader only,它可以把图标读出来,其实就是把图标的意思设置出来,然后通过屏幕阅读器就可以使用了,非常的方便
[b]这里的声明要注意的是用role而不是type,先放一个警告的图标,然后弹出这个图标表达的意思[/b]
bootstrap carousel 轮播功能,其实没太多说的,按照模板即可,其中标签中一般要定义上alt参数,用于图片的说明
Ubuntu下提示/usr/bin/env: node: 没有那个文件或目录
解决方法
psd格式文件:photoshop document ,PSD格式在保存时会将文件压缩,以减少占用磁盘空间,但PSD格式所包含图像数据信息较多(如图层、通道、剪辑路径、参考线等),因此比其他格式的图像文件还是要大得多。由于PSD文件保留所有原图像数据信息,因而修改起来较为方便
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系列参数
名称 | 类型 | 默认值 | 描述 |
backdrop | boolean或字符串’static’ | true | Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn’t close the modal on click. |
keyboard | boolean | true | 键盘上的 esc 键被按下时关闭模态框。 |
show | boolean | true | 模态框初始化之后就立即显示出来。 |
remote | path | false | 如果提供的是 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文件保留所有原图像数据信息,因而修改起来较为方便
相关文章推荐
- Bootstrap (Web前端CSS框架)—Form Builder and Generator
- bootstrap树形菜单
- rails使用bootstrap
- 系统学习bootstrap——day1
- javaEE 后台框架 SpringMVC Mybatis Shiro druid Bootstrap HTML5 hibernate
- bootstrap学习
- Bootstrap fileinput.js,最好用的文件上传组件
- bootstrap 实现 contextmenu 的最小代码(无需第三方库)
- bootstrap iCheck插件 全选和获取value值的解决方法
- Bootstrap fileinput.js,最好用的文件上传组件
- bootstrap使用记录
- 为Bootstrap模态对话框添加拖拽移动功能
- Bootstrap on ROR
- 【Bootstrap3.0建站笔记一】表单元素排版
- Bootstrap 学习
- bootstrap fileinput 文件上传工具
- andorid 控件 Bootstrap3.0风格的控件 精美UI控件库
- JS组件系列之Bootstrap Icon图标选择组件
- 很不错的两款Bootstrap Icon图标选择组件
- JS组件系列——不容错过的两款Bootstrap Icon图标选择组件