基于Bootstrap的前端框架–Flat UI

介绍

Flat UI  是一套精美的扁平风格 UI 工具包,基于 Twitter Bootstrap 实现。这套界面工具包包含许多基本的和复杂的 UI 部件,例如按钮,输入框,组合按钮,复选框,单选按钮,标签,菜单,进度条和滑块,导航元素等等。最新版支持bootstrap3

用法

Flat UI用法和bootstrap用法完全一致。你只需要对着bootstrap文档写代码即可。代码:

演示

flatui_buttons

更多

Flat UI官网:http://designmodo.github.io/Flat-UI/

Bootstrap官网:http://www.getbootstrap.com/

Bootstrap教程:http://www.cnsecer.com/3295.html

Bootstrap3使用教程一:Bootstrap介绍及入门

介绍:

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,是一个CSS/HTML框架.另外Bootstrap是基于Jquery的.随意使用之前必须引入Jquery

在开始之前你需要知道什么:

  • 1、明白DIV标签及其作用,
  • 2、明白CSS中id和class这两个属性的区别
  • 3、明白CSS的三种样式及其优先级 (内联式,外联式,嵌入式)
  • 4、知道常用的CSS属性用法

如果上面三个不是很了解,请登陆http://www.w3school.com.cn/h.asp,然后里面的HTML和CSS教程

获取Bootstrap:

官方网站: http://getbootstrap.com/ (这里有Bootstrap的最新文档)
Bootstrap中文网:http://www.bootcss.com/ (文档更新速度较慢)

然后,你得有一个NB的编辑器,这里选择sublime text

再然后,做一些初始化工作,引入CSS JS什么的

再再然后,开始仿作我们的目标站:http://www.cnsecer.com/ ,这个站是用PHP写的,这里我们用纯静态的HTML仿作

如何学习Bootstrap3

想要学好Bootstrap3,除了掌握上面的四个要点,另外一点就是必须得学会看文档
中文文档:http://v3.bootcss.com/
官方文档:http://getbootstrap.com/getting-started/
本人英语二级水平,这里选择中文文档,其实只要你学会看这些文档,后面的我写的教程你就不用看了.

开始使用BootStrap

1、进入官网下载最新版的Bootstrap。

2、初始化项目,建立index.html style.css 和jquery.min.js 并解压bootstrap.zip

然后看一下bootstrap的目录结构:

mulu

bootstrap/css:
只需要引入bootstrap.min.css
其中*.css 和 *.min.css的唯一区别就是*.min.css是压缩过的,发布项目时候请引入*.min.css,因为这样可以提升加载速度,如果你想看源码,请看*.css 。
bootstrap/js :
只需要引入bootstrap.min.js
*.js和*.min.js同CSS,另外bootstrap-theme.min.css可以不引入.
bootstrap/font:
不需要引入
字体文件,bootstrap所有图标都在这里面。用法查看 http://v3.bootcss.com/components/#glyphicons

style.css用来自定义样式和重写bootstrap中的属性参数(很少用)

jquery.min.js 必须引入 ,而且必须放到bootstrap.min.js之前。因为bootstrap.min.js基于JQ,代码从上往下执行

3、用sublime text编辑index.html。我们可以看到文档里面就有用法:http://v3.bootcss.com/getting-started/

start

index.html代码如下:

这样Bootstrap3的初始化算是完成了,剩下的就是对着文档调试代码..

本节代码下载:download

视频教程下载: http://pan.baidu.com/s/1c05UvcO

未完待续

BootStrap中使用JS控制图片自适应大小

bs文章中的图片在手机上显示时经常越界,解决方法很简单,你需要添加两个boorstrap的内置属性就可以了

代码如下,我是以本博客的文章内容页为例的,详细代码查看本页面的img标签样式

只需要添加下面一句JS代码即可

<code> $(“.article img”).addClass(“carousel-inner img-responsive img-rounded”);  <code>

封装最新的Kali ISO

Kali Linux允许你用Debian的live-build脚本封装最新的Kali ISO.封装镜像最简单的办法就是在Kali Linux环境下做如下操作.

你需要先安装live-build 和 cdebootstrap 这两个包:

下一步克隆Kali cdimage的Git源:

现在切换到cdimage.kali.org目录下的live目录里,然后封装ISO.

live-build脚本可以完整的定制Kali Linux镜像.更多关于Kali live-build脚本的信息,请查阅定制Kali页面.