站长之家首页 > 经验 > Bootstrap3.0学习最新资讯 > 正文

20分钟建立自己的Bootstrap站点

2015-04-17 11:06 · 稿源:w3cplus

这篇教程旨在让你在20分钟内学会使用twitter bootstrap创建一个站点。看完这个教程后你应该能够使用bootstrap来建立一个基本的响应式布局的页面,了解栅格系统,并且能够使用bootstrap导航、导航条和了解响应式设计的基础。这些全部都是使用twitter bootstrap所需要具备的知识。

首先需要说的是twitter bootstrap是非常优秀的一个前端开源框架,它为所有的组键都提供了详细的用例,让你能够轻易地通过复制黏贴而附加到你的设计中。查阅官方文档:twitter.github.com/bootstrap/index.html

基本的HTML模板

我们需要以一个基本的HTML模板,这样我们能够把所需要的bootstrap文件包含进来。下面就是我们twitter bootstrap项目的开头,复制这些代码到一个文件中并将其命名为index.html。

  • <!DOCTYPE html>
  • <head>
  •      <title>Twitter Bootstrap Tutorial - A responsive layout tutorial</title>
  •      <style type='text/css'>
  •           body {
  •               background-color: #CCC;
  •          }
  •      </style>
  • </head>
  • <body>
  • </body>
  • </html>   

这段代码中我们已经添加了一些CSS使页面的背景呈亮灰色,因为这样我们能够轻易地在我们的设计中看见不同的列,使它更加容易理解。

引入twitter bootstrap文件

为了使用twitter bootstrap我们仅仅需要把一个文件引入到我们的模板当中来,引入文件有很多种方法,如果你想了解这些方法请查阅相关文档。

基于本教程的出发点,我们将会通过CDN来引入bootstrap-combined.min.css文件而不需要下载任何的文件。

  • <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">

它能够使所有的twitter bootstrap CSS在我们的模板中生效。

Twitter Bootstrap的容器

bootstrap的container类是非常有用的,它能在页面中创建一个居中的区域,然后我们能够把其他位置的内容放到里面。container类等价于创建了一个具有静态宽度并且magin值为auto的一个居中的div框。twitter bootstrap的 container类的优点在于它是响应式的,它会以当前屏幕的宽度为基础计算出最佳的宽度予以实用。

在body标签中,使用container类创建一个div。它会作为页面主要的放置其他代码的外层包裹。

如果你调整这个DIV的高度并将其背景颜色设置为白色,你所看到的效果会是这样:

标题和导航

现在我们已经有一个地方可以添加额外的HTML代码,我们可以添加标题文本然后再创建站点的主要导航条。

加入如下的文本或者你选择的文字到container类的div标签当中。

  • <h1>TWITTER BOOTSTRAP TUTORIAL</h1>

现在并没有多少新的东西,这仅仅是一个标题,让我们转移到更有趣的方面,twitter bootstrap导航。

Bootstrap 有一个nav类让我们能够创建各种各样的导航元素,你可以在h1标签之后加入如下的代码。

  • <div class='navbar navbar-inverse'>
  •      <div class='nav-collapse' style="height: auto;">
  •           <ul class="nav">
  •                <li class="active"><a href="#">Home</a></li>
  •                <li><a href="#">Page One</a></li>
  •                <li><a href="#">Page Two</a></li>
  •           </ul>
  •      </div>
  • </div>

navbar相关的类拥有导航条所有的样式,添加navbar-inverse类将会应用一个很酷的黑色风格,这是一个twitter bootstrap的常见搭配。我建议在这个样式的基础上进行拓展从而创造你的独一无二的导航。但在这个教程中我们仍然会使用基础的bootstrap样式。

在类为navbar的DIV当中,我们添加另一个类为nav-collapse的DIV并为其添加行内样式height:auto;这是告诉bootstrap当这个页面在小于970px宽度的浏览器窗口当中时,它会提供一个压缩的切换视图。

如果你保存了index.html文件然后在浏览器中打开,当你调整浏览器窗口的宽度时你就能够看到这个变化,如图所示。

大于979px:

小于979px:

另外,我们可以添加nav类到一个HTML无序列表元素中以便从bootstrap CSS文件中应用更多的样式,也可以添加一个active类到“HOME”列表项中。

网友热搜:

  • 大家在看
  • 相关推荐
  • Linux学习路线图,入门教程分享。

    有人说,人生中最美丽的两个字就是学习。是的,学习是最值得做的一件事,不断的学习才能使我们在这个飞速发展的时代不至于被抛弃,古人云,活到老,学到老,还是很有道理的。算算学习Linux也有一年零三个月了,这一年多感触很深,虽说现在也没有到登峰造极的程度,但是门算是已经进去了。记得刚开始学的时候挺难得,自己什么也不懂,就开始上网查各种资料,还好网上信息很发达,想要查什么也差不多能查到。因为我的基础不好,所以?

  • 币安何一如何评价自己团队?

    2017年币安Binance的诞生,BNB作为平台币,首次向全球金融世界,展示数字资产交易平台的综合市值;之后,币安在区块链赋能上取得了巨大的成功;去年,BNB价格达到历史最高价,带动全球数字资产市场回暖等一系列的成就,给人们留下了「创新趋势看币安」的深刻印象。币安团队是如何在每一个节点上都保持高创新率的呢?币安何一曾给出了明确的答案。币安何一:币安的团队如何在短期内创造出这么大的业绩?币安联合创始人何一认为,币安团?

  • 智能电视怎样下载安装沃学习TV版?当贝市场分享教程

    近日,为响应停课不停学,中国联通正式推出了沃学习TV版,这款软件汇聚了教育行业头部品牌的内容,为广大用户群体打造了一个多元化、一站式教育服务软件。该平台聚合了学而思轻课、新东方、沪江网校、卓越教育、豆神大语文、樊登读书等行业头部教育品牌精品内容。通过课堂提分、素质教育、家庭亲子、个人成长、职场教育、听书读书等详细分类,全方位满足不同人群的学习需求。同时由剑桥、麻省理工、清华大学、北大等顶尖学府名师,

  • 谷歌建立针对​新冠病毒信息网站 周一上线

    据外媒报道,谷歌即将推出一针对新冠病毒教育和预防最新信息的全国性新闻网站。

  • 初中生如何在家高效学习?讯飞智能学习机教你这些小妙招

    春意盎然,万物复苏,在这样的大好时光里,初中生们如何做到在家高效学习呢?别急,讯飞智能学习机教你小妙招。讯飞智能学习机就是一款人工智能技术和教学大数据有效结合的一款智能学习提分产品,针对不同的学科,会智能采用不同的学习方法。例如针对数理化这样系统性比较强的学科,我们需要培养自己的系统学习思维。讯飞智能学习机,它有着独特的个性化精准学习系统能够帮助我们做少量题,快速理清知识点。只要在学习机上做少量的?

  • 这款黑科技范儿双屏OK学习机,上手学习超轻松

    如今的产品是越来越智能了,也极大地便利了人们的生活。在学习这件事情上,孩子们、家长们都表现出了很大的压力。如何减轻孩子的学习负担,让孩子的学习智能起来,一定程度上还得借助高科技产品的力量。最近新东方推出的一款OK学习机(S4 Plus),赢得了不少用户的青睐。今天我们就来一探究竟。双屏体验:看视频、书写两不误,更智能、便捷OK学习机给人最直观的一个感受就是“双屏”、可折叠,可以任意角度开合。双屏这个特点很吸睛?

  • 守护孩子学习 阿卡索优质在线英语课程助力学习强国

    当前,全国疫情抗击攻坚战仍在继续,为了取得疫情抗击的最后胜利,保障学生和老师的安全,全国高中小学校开学日期尚未明确,“停课不停学”的倡议还在继续。近日,阿卡索携手“学习强国”学习平台,将为全国孩子提供丰富的在线英语学习课程,让孩子足不出门,在家也能享受到优质的在线外教英语课程。 届时,用户可以通过“学习强国”首页推荐的教育频道进入,搜索“阿卡索”便可以免费观看阿卡索的在线英语教育课程。目前,在“?

  • 学习机什么牌子好?讯飞智能学习机化身弯道超车学习神器

    人们常说养成坏习惯容易,养成好习惯难。眼下的“超长假期”,正是培养孩子形成良好习惯的黄金时期,好习惯养成了,面对学习孩子自然也有自己的方法和理解了。但是想要为孩子找一个好帮手,可不是一件容易的事,我经常听到身边的家长抱怨学习机什么牌子好呢,经过我一个假期的观察,我发现还是讯飞智能学习机靠谱!孩子放假“宅”家的日子里,适当放松可以,但如果任由孩子无节制地玩耍会严重损害孩子的精神状态,消耗意志力,养成?

  • 疫情期间如何让孩子学习护眼两不误?它是宅家网课必备

    受疫情影响,大中小学纷纷延期开学,孩子们则不得不开启居家学习模式,网课成为了唯一选项。而如何让孩子在家能够安全高效地学习,也成为家长们最关心的话题。 3 月 13 日,海信激光电视联合海信学校开展了一场“疫情期间学生高效学习大课堂”线上直播活动。面对疫情我们怎样影响孩子?特级教师、全国优秀教师、海信学校副校长、海信小学校长宋春生,将自己丰富的教学经验分享给各位学生家长。他表示,父母是最好的教育资源,父母的

  • Soul里她用画笔链接世界和自己内心

    说起绘画,这位名叫“甜甜”的Souler脸上露出了微笑。“我们生活在一个行色匆匆的世界,一切似乎都在飞速运转。每天要收集大量视觉信息,但很少去思考我们看到的东西,即使是自己最熟悉的物品。有时候人们也不能够回忆起它的所有细节,只记得其形态、颜色,仅此而已。正是绘画使我从浮躁的环境中安静下来,看见并审视那些在平时的粗略体验中无法发现的东西,从而真正观察到事物的本质。”截止到今天,甜甜已经在Soul上发布了 174 ?

  • 鲸小喜3.0:鲸鲤店商品是拿来送而不是拿来卖

    住宿有酒店贵宾卡、吃饭有扫码支付打折,买房买车有客户俱乐部、刷卡消费有银行积分……不得不承认,在新经济的潮流之下,会员生活已经无处不在了。尤其对于深陷困境的实体店来说,联通线上线下会员服务,发展会员经济优势已势在必行。但是回顾会员经济发展历程,又很容易发现身边的会员经济似乎并不被会员喜欢。重视会员,而又不知该如何营销,成为大多数实体店主的头疼事。传统的会员营销仅仅是手段,并没有深挖客户需求,无法增

  • 大脑未知天赋,睡觉时也能学习

    我们通常认为,学海无涯苦作舟,要想取得好成效,就必须与苦痛作伴,剥削自己的睡眠和休息时间。但是如果睡觉也能学习呢?睡眠占据了我们生命的三分之一时间,科学家们一直在思考,人们是否有可能在这段时间自主学习。我等学子,更是迫切想掌握这种“睡觉中变强”的学习法。而实际上,确实有边睡觉边进行英语记忆的方法,对此科学界已有一系列研究成果。《自然通讯》杂志曾在前几年发布过一篇报道,神经科学家们在里面表示:向睡觉?

  • 超长寒假如何学好物理?讯飞智能学习机告诉你快速提升方法

    “乌云遮不住升起的太阳,疫情挡不住春天的来临”,在蔓延的疫情下,全国学生都在家成为了“宅男”、“宅女”,然而宅在家的这段时间也是学习的宝贵时间,尤其是对很多即将参加中高考的学生来说更是分秒不能浪费。如何利用超长寒假进行高效学习和自我提升,讯飞智能学习机有妙招。讯飞智能学习机以人工智能技术为依托,通过快速测试找到弱项、规划最佳学习路径、精准巩固提升精准三步AI教学帮助学生提高学习成绩。这种精准学习方法

  • Adobe免费给在家学习学生提供Creative Cloud

    3月23日据adobe官方博文介绍,Adobe宣布可由校方申请,让其学生能在3 月 31日前临时在家的电脑上使用完整的CC应用。相关申请需要由学校的 IT 部门提交,并由 Adobe 进行审批,成功的话就能授权学生使用Adobe CC应用的存取权限。不过这项计划的前提是,需要学校方面有订阅 Adobe CC,然后才能向学生批出临时使用权限。

  • 学习护眼台灯?阿尔法蛋新品全新出击

    作为孩子们日常生活、学习必不可少的一部分,台灯在家庭用品中一直占据着重要地位。不少家长认为,选择一个好的台灯,对孩子的学习和眼睛健康有极大的帮助。市面上的台灯产品琳琅满目,都宣称“保护视力”,功能大同小异价格却参差不齐。还在犹豫不决的家长不妨关注一下,阿尔法蛋智能学习台灯L9——一盏集“护眼、智能、学习”于一体的台灯,3 月 1 日火爆上线,买到就是赚到。独有蓝宝石晶体灯珠 专业光学护眼作为一盏专为儿童量

  • 智能电视如何在线观看《青春有你2》?当贝市场教程分享

    近日,一档全新励志综艺《青春有你2》即将上线,很多粉丝朋友们想必已经等候已久。相比于第一季《青春有你》的导师张艺兴、蔡依林、李荣浩、欧阳靖等明星嘉宾,第二季的导师阵容可谓是占据极高话题度的。根据当前曝光的导师阵容,《青春有你2》将由蔡徐坤担任青春制作人代表,LISA担任舞蹈导师,陈嘉桦、JONY J分别担当音乐导师和说唱导师。这样的导师阵容大家想必也是十分期待了。那么新一季《青春有你》又会有哪些学员脱颖而出呢

  • 疫情下“停课不停学” 阿尔法蛋守护孩子“宅家学习

    “让孩子能停课不停学、用最有趣最高效的方式去学习新知识,也让父母们能安心忙碌在各自的工作岗位上,科技就是这样在影响和改变着我们的生活。”昨天,在淘云科技工作的吴丹(化名)在她的朋友圈写下了一段长长的感慨。事情缘起于同事给她转发的一则来自央视新闻客户端的内容,里面意想不到地出现了她所在公司出品的阿尔法蛋智能机器人的身影。在这则新闻里出现的人物,是安徽中科大附一院感染病院ICU杨云主任,在武汉抗击疫情的她?

  • 在家如何保障学习效果?西瓜创客全国赠课,用“学练测赛”给出答案

    自疫情暴发以来,时刻牵动全国人民的心,为积极响应教育部倡导的保障疫情防控期间在线教学,为学生提供优质教学资源的通知,西瓜创客向全国中小学生免费开放《数学思维课》、《宇宙探索课》、《垃圾分类课》等系列优质课程,并采用“学练测赛”四步闭环的方式,充分保障孩子在家学习效果。 西瓜创客为 6-12 岁的小学生提供在线少儿编程教育,自 2017 年创立以来深耕在线教育,已获得超过 100 万用户,在少儿编程行业首创了 AI 双?

  • 2020蚕泊CB·CHOOBO打造属于自己新时代

    随着全球经济发展持续上升,各大行业力争上游,化妆品行业也不例外,在大众对美的追求越来越“仪式化”的现代生活里,各大化妆品品牌纷纷上线。据数据显示,2019年双十一开场仅1小时24分钟,天猫美妆成交额就已突破2018年双11全天,拿到了总成交额在所有行业中排列前三的骄人成绩。随着时代的不断进步,女性对于自己的审美逐步提升。近几年来,国内化妆品市场蓬勃发展,在体贴消费者内心的同时品牌蚕泊CB·CHOOBO不断借鉴行业优秀?

  • 高频学习是关键,阿卡索高质低价课提升英语学习效率

    随着全球化进程加快,英语在工作及日常生活中的作用愈加凸显。尤其对亲身经历了互联网普及浪潮的80、 90 后新生代家长来说,孩子从小开始英语学习,能说流利口语已成普遍共识。而在线学习模式凭借便捷高效、教育资源丰富等优势,成为家长的首要选择。有调查数据显示, 2018 年在线青少儿英语学习市场份额高达26.59%,预计 2022 年在线少儿英语市场将反超线下。在线教育平台为孩子能够长期接触英语创造了极大的便利性,成为众多年轻

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议