Bootstrap基本使用操作

1 Bootstrap概述
作为Web前端开发框架,Bootstrap集成了HTML标记、CSS样式以及JavaScript行为,使得开发人员、设计人员不再像过去周而复始地写模板、样式、交互效果,极大地节约了时间,提高了开发效率。它使用了最新的浏览器技术,可以提供精致的网页排版方式以及表单、按钮、表格、网格 栅格化、导航等诸多元素,轻松地创造令人愉快的设计效果。
2 下载Bootstrap
在下载Bootstrap文件前,我们简短介绍下LESS。它是Bootstrap样式定制的核心内容,可以充分地发挥地设计人员与开发人员的创造力和想象力。因此,这里为对Bootstrap有更多的操作空间和提升开发效率,我们选用源代码安装。


最新版是V3.3.5,所下载文件目录如下:

下载文件里的dist目录是已编译好的CSS文件、JavaScript文件、及fonts文件。因为,我们使用LESS文件生成所需要的样式,这里dist目录内容暂不处置。
3 下载html5样板文件H5BP
H5BP实现的是一个web页面的标准模板,尤其针对html5进行了全面优化,同时也对老浏览器向后兼容,深受开发人员喜爱。来看下Github数据:
Github

文件解压后取出src目录,将名称src修改为一个新名称,如Template,包含内容:

4 添加Bootstrap文件

  1. 以上文件准备就绪后,在Template目录中的js文件夹下新建Bootstrap文件夹,接着我们需要将Bootstrap的js插件复制到该目录中。
  2. Template目录的与jsimg目录的同一级目录下创建一个less目录,并在此less文件夹下再新建一个bootstrap目录,将Bootstrap中less文件夹下所有后缀名less的文件复制到bootstrap目录里,同时,在less目录下保留一份bootstrap.less文件,并改名为__main.less
    至此,整个文件存放结构工作搞定了。
    注意,__main.less文件是我们以后通过编译它来基于所有导入LESS文件生成一个统一的样式表,它需要导入的less全部存放在bootstrap目录下,因此,我们必须将__main.less文件导入路径替换为bootstrap下的各文件路径。
  3. 在对需要自定义样式的less操作时,我们最好把对应文件复制到与__main.less同一目录下,以防在原文件上修改出现错误影响开发进度。如,我们需对variables.less变量进行修改,那么,将该文件复制到__main.less同一目录下。为便于区分哪些为自定义文件,对variables.less重命名为_variables.less
  4. 使用WinLess编译器对LESS文件进行编译,需要编译的文件加载进WinLess编译器后,在__main.less文件上右击选择'Select output file',定义一个编译文件输出目录,如css目录,最后编译Compile即可。

5 总结

  1. 在这里,我们对JS、CSS文件的处置操作在实际生产环境中是不可取的,为方便讲解bootstrap整体使用流程,我们没有对JS文件进行做优化,而是把所有JS插件都存放在js/bootstrap目录中。
  2. Bootstrap框架提供非常棒的视觉效果,而且使用Bootstrap可以确保整个web应用程序的风格完全 一致,用户体验一致,操作习惯一致。
  3. 相信,它优雅、简洁的特性会让你爱上它。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容