首页 技术 正文
技术 2022年11月18日
0 收藏 910 点赞 4,500 浏览 1774 个字

用bootstrap及其它基于它的框架,做了多次网站大改版~对bootstrap的特点有了越来越深的了解~从一开始接触时觉得超级鸡肋,到后来觉得方便,再到后来觉得还是能不用就别用了~为什么这么说?我们先看用法。

1.使用前的准备。

bootstrap是基于jquery的,所以在引用bootstrap的js之前,一定要先引入相应版本的jquery。然后在头部引入bootstrap.min.css,在jquery后面引入bootstrap.min.js。建议都使用它提供的min版本的js和css,这是压缩过的比较小,但是如果需要修改它的默认样式和函数,可以使用不带min版的,这样看源码比较容易。改完再压缩就好~

还有一个要引用的就是fontawesome.css,如果你的页面需要一些图标的话,当然还有响应的svg,eot,woff等字体文件。

如果你是人民币玩家,买的是基于bootstrap的框架,你还要引入这个新框架里的css和js

2.怎么用。

bootstrap就是一个不会用的时候写的特别慢,会用了之后开发特别快的工具。你要使用他提供的一些类,给页面的主要内容部分设置宽度的类:固定宽度用container,自适应用container-fluid。初学者看一遍css和组件的样例,直接把类名写上就行,这里不细说,说说可取的几点:

首先,就是自适应了。

使用它的栅格系统,就可以轻松的完成宽屏、ipad屏手机屏等屏幕的自适应,它使用的是媒体查询的方式进行的自适应,所以你的html的头部,别忘了把需要的和移动端相关的meta都引进来。

/* 超小屏幕(手机,小于 768px) */
/* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) *//* 小屏幕(平板,大于等于 768px) */
@media (min-width: @screen-sm-min) { ... }/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: @screen-md-min) { ... }/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }
上面是bootstrap对屏幕大小的区分界限,可以用来参考自己写媒体查询的时候,用来做界限。使用方法:
<div class="col-sm-5 col-md-6"></div>这个类的意思就是在中屏时,占6个单位,在小屏幕时,占5个单位。

其次,对html元素的初始化。

div ul ol 都有一些浏览器自带的样式,比如margin和padding,这里就很好的重置了~

再次,提出一些可以全局使用的类

比如:m-l-10:margin-left:10px !important;
这让一些只需要这一个css样式的标签,不需要再添加新的类名,直接引用即可。

3.相关插件

bootstrap有很多的插件,比如上传、时间等等~在它的cdn上一搜就有,特别方便。但是这些都是基于bootstrap的,就是说如果你想,比如bootstrap-dateitimepicker插件,如果在其他项目单独使用,还是要把jquery、bootstrap的css和js以及插件本身的js和css都引进来。

4.为什么用?

对于急需快速改版或者建立的网站

对于不会前端的服务端开发者

对于没有设计师的小组织

对于懒得自己写兼容性,自己写样式的前端~

嗯……没了,哦,还有对于想研究bootstrap以及想用bootstrap开发个模板赚钱的。

对于这样的情况,bootstrap是首选的,学习曲线低,可以非常简单的建立一个适应各种端的网站。

5.为什么不用?

对于前端,尤其是有洁癖的处女座,bootstrap实在是太冗余了,你需要引入的js里,有一大堆你网站用不着的样式重置,类等。

为了使用它的样式,你还要根据它的规则,多写很多的html标签。

可能为了不和它的某些组件重复,又是初学者,你要翻看文档,寻找组合,可能自己写已经秒秒钟写完了。

太容易撞站~跟别的网站长得特别像这种事,我会告诉你?

还有就是,每一个模板都会有不足的地方,你还需要去看源码,甚至改源码,添加新功能~

每个人有各自的爱好和癖好~除非是为了偷懒,否则我是不会用这样的模板了~~~~~

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,023
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,513
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,361
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,143
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,774
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,853