20分钟轻松创建自己的Bootstrap站点


Posted in Javascript onMay 12, 2016

本文的主要目的让你在20分钟内学会使用twitter bootstrap创建一个站点,如何建立站点,下文为大家介绍:

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

20分钟轻松创建自己的Bootstrap站点

基本的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文件而不需要下载任何的文件。

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的高度并将其背景颜色设置为白色,你所看到的效果会是这样:

20分钟轻松创建自己的Bootstrap站点

标题和导航

现在我们已经有一个地方可以添加额外的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:

20分钟轻松创建自己的Bootstrap站点

小于979px:

20分钟轻松创建自己的Bootstrap站点

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

关于Bootstrap导航的精彩文章分享: 《bootstrap每天必学之导航》、 《Bootstrap每天必学之导航条》

主内容和侧边栏

我们已经完成了站点的主导航,现在我们需要添加主要内容区和一个侧边栏来支持更多的链接或导航路径。请把下面的代码添加到导航条之后。

<div id='content' class='row-fluid'>
  <div class='span9 main'>
   <h2>Main Content Section</h2>
  </div>
  <div class='span3 sidebar'>
   <h2>Sidebar</h2>
  </div>
</div>

这正是我们需要弄懂的bootstrap的栅格系统,当然,bootstrap的官方文档中涵盖了更多的细节,但我们将会以基础开始,让你更好地理解它。

栅格系统利用了12列的布局,这意味着一个页面可以被分割成12个相同的列。下面这张从bootstrap官方文档中拿到的图片给出了一个很好的展示。

20分钟轻松创建自己的Bootstrap站点

在我们刚刚黏贴在导航条下面的代码中你可以看到名为span9和span3的类。它们会把页面分割成左边9列宽度和右边3列宽度的两部分,形成我们的内容区域和侧边栏。使用栅格系统的其中一个好处就是它会根据视窗宽度动态计算出列的宽度,因此你不需要写任何的媒体查询也能使你的站点工作在任何的屏幕分辨率下。

你可以通过改变span的数量和调整浏览器的大小来观察它们的效果。你会注意到当内容区小于724px的时候,这些列会垂直地堆放。

现在我们在主内容区域把下列文本或者任何其他的文本放在在h2标签之后,这只是为了把页面拉长一点。

psum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
<p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>

现在站点会像如下显示:

20分钟轻松创建自己的Bootstrap站点

侧边栏导航

你可以在这里(twitter.github.com/bootstrap/components.html#navs)看到所有的Twitter bootstrap为我们提供的导航元素。

我们将要使用垂直选项卡来创建一个额外的导航区。复制和黏贴下面的代码到sidebar的h2标签之后。

<ul class="nav nav-tabs nav-stacked">
 <li><a href='#'>Another Link 1</a></li>
 <li><a href='#'>Another Link 2</a></li>
 <li><a href='#'>Another Link 3</a></li>
</ul>

这是一个简单的展示!上面的代码照字面理解仅仅是一个具有类为nav-tabs和nav-stacked的无序列表,但它却为我们创造了一个导航面板。

看看最后的效果,一个基于twitter bootstrap的响应式设计的页面完成了。

20分钟轻松创建自己的Bootstrap站点

看完这个教程后你应该能够使用bootstrap来建立一个基本的响应式布局的页面,了解栅格系统,并且能够使用bootstrap导航、导航条和了解响应式设计的基础。

关于Bootstrap的更多内容大家还可以参考专题进行学习: 《Bootstrap学习教程》

以上这些全部都是使用twitter bootstrap所需要具备的知识,希望对大家的学习有所帮助,之后也希望大家能够多花点时间,孰能生巧,不久之后你就可以成为一个bootstrap的专家了。

Javascript 相关文章推荐
用javascript控制iframe滚动的代码
Apr 10 Javascript
javascript Discuz代码中的msn聊天小功能
May 25 Javascript
Javascript 入门基础学习
Mar 10 Javascript
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
Dec 19 Javascript
javascript常见用法总结
May 22 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 #Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 #Javascript
Bootstrap3制作图片轮播效果
May 12 #Javascript
JS创建事件的三种方法(实例代码)
May 12 #Javascript
jQuery判断checkbox选中状态
May 12 #Javascript
Bootstrap3制作自己的导航栏
May 12 #Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 #Javascript
You might like
一些关于PHP的知识
2006/11/17 PHP
php实现文件编码批量转换
2014/03/10 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
Python3安装pip工具的详细步骤
2019/10/14 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
综合办公室个人的自我评价
2013/12/22 职场文书
公司道歉信范文
2014/01/09 职场文书
铁路工务反思材料
2014/02/07 职场文书
留守儿童工作方案
2014/06/02 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
创业计划书之酒厂
2019/10/14 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
详解Python flask的前后端交互
2022/03/31 Python
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript