你的位置:首页 > 软件开发 > Java > 【Bootstrap】1.初识Bootstrap

【Bootstrap】1.初识Bootstrap

发布时间:2016-09-07 21:00:13
作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好、扩浏览器的解决方案。 1.下载Bootstrap打开官方网址 http://getbootstrap.com/ 进行下载。 2.准备项目模板文件夹接下来,我们为第一个项目创建一个 ...

作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好、扩浏览器的解决方案。

 

1.下载Bootstrap

打开官方网址 http://getbootstrap.com/ 进行下载。

【Bootstrap】1.初识Bootstrap

 

 

2.准备项目模板文件夹

接下来,我们为第一个项目创建一个文件夹以及一些基本的文件。谓词我们还要用到HTML5样板文件 HTML5 Boilerplate(H5BP),然后把Bootstrap的有用文件复制过去。

2.1 下载H5BP

访问网站链接地址:https://html5boilerplate.com/ ,下载B5BP。

【Bootstrap】1.初识Bootstrap

解压后,修改文件夹名为Bootstrap_First,其目录结构如下:

【Bootstrap】1.初识Bootstrap

2.2 然后删除和更新下必要的样板文件

删除下列至于H5BP相关的文件夹和文件:

□ 因为稍后要使用LESS创建自己的CSS文件,所以先删除css文件夹。

□ doc 文件夹及其中内容

2.3 理解样板中的.htaccess文件

这个文件中的内容不一定全部都用,这取决于主机设置和站点需求。这个文件的一个主要用途是保证站点性能最优。

2.4 更新必要的样板文件

样板中的下列文件提供了项目的标准信息,根据需要可以更新它们、直接使用它们或者就放那不管。

□ humans.txt:这个文件记载贡献者,H5BP、Bootstrap的,还有其他贡献者。

□ LICENSE.txt:在H5BP许可前面,加上你基于该许可构建的网站的许可信息,在H5BP许可后,加上Bootstrap以及其他站点中用到的重要的库的许可信息。

2.5 更新站点桌面和触摸设备图标

不要忘了用自己项目的图标替换 Boilerplate 默认的图标文件。

 

 

3.加入Bootstrap文件

3.1 字体

从Bootstrap的主文件夹中,把fonts文件夹复制粘贴到Bootstrap_First文件夹中。这个文件夹里包含着Bootstrap附带的重要的Glyphicon字体。

保险起见,再在fonts文件夹中放一个跨域友好的.htaccess文件:

<FilesMatch "\.(ttf|otf|eot|woff)$"><IfModule mod_headers.c>Header set Access-Control-Allow-Origin "*"</IfModule></FilesMatch>

原标题:【Bootstrap】1.初识Bootstrap

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录