带你快速打造属于自己的Bootstrap站点

2024-01-17 16:04 小编
  特别声明:此篇文章由白牙根据LeonRevill的英文文章原名《TwitterBootstrapTutorial–UpandrunningwithTwitterBootstrapin20Minutes》进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://www.revillwebdesign.com/twitter-bootstrap-tutorial以及作者相关信息
 
  ——作者:LeonRevill
 
  ——译者:白牙
 
  这篇教程旨在让你在20分钟内学会使用twitterbootstrap创建一个站点。看完这个教程后你应该能够使用bootstrap来建立一个基本的响应式布局的页面,了解栅格系统,并且能够使用bootstrap导航、导航条和了解响应式设计的基础。这些全部都是使用twitterbootstrap所需要具备的知识。(推荐教程:bootstrap视频教程)
 
  首先我们需要说的是twitterbootstrap是非常优秀的一个前端开源框架,它为所有的组键都提供了详细的用例,让你能够轻易地通过复制黏贴而附加到你的设计中。
 
  基本的HTML模板
 
  我们需要以一个基本的HTML模板,这样我们能够把所需要的bootstrap文件包含进来。下面就是我们twitterbootstrap项目的开头,复制这些代码到一个文件中并将其命名为index.html。
 
  <!DOCTYPEhtml>
 
  <head>
 
  <title>TwitterBootstrapTutorial-Aresponsivelayouttutorial</title>
 
  <styletype='text/css'>
 
  body{
 
  background-color:#CCC;
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  </body>
 
  </html>
 
  这段代码中我们已经添加了一些CSS使页面的背景呈亮灰色,因为这样我们能够轻易地在我们的设计中看见不同的列,使它更加容易理解。
 
  引入twitterbootstrap文件
 
  为了使用twitterbootstrap我们仅仅需要把一个文件引入到我们的模板当中来,引入文件有很多种方法,如果你想了解这些方法请查阅相关文档。
 
  基于本教程的出发点,我们将会通过CDN来引入bootstrap-combined.min.css文件而不需要下载任何的文件。
 
  <linkhref="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css"rel="stylesheet">
 
  它能够使所有的twitterbootstrapCSS在我们的模板中生效。
 
  TwitterBootstrap的容器
 
  bootstrap的container类是非常有用的,它能在页面中创建一个居中的区域,然后我们能够把其他位置的内容放到里面。container类等价于创建了一个具有静态宽度并且magin值为auto的一个居中的div框。twitterbootstrap的container类的优点在于它是响应式的,它会以当前屏幕的宽度为基础计算出最佳的宽度予以实用。
 
  在body标签中,使用container类创建一个div。它会作为页面主要的放置其他代码的外层包裹。
 
  如果你调整这个DIV的高度并将其背景颜色设置为白色,你所看到的效果会是这样:
 
  微信截图_20190125110126.png
 
  标题和导航
 
  现在我们已经有一个地方可以添加额外的HTML代码,我们可以添加标题文本然后再创建站点的主要导航条。
 
  加入如下的文本或者你选择的文字到container类的div标签当中。
 
  <h1>TWITTERBOOTSTRAPTUTORIAL</h1>
 
  现在并没有多少新的东西,这仅仅是一个标题,让我们转移到更有趣的方面,twitterbootstrap导航。
 
  Bootstrap有一个nav类让我们能够创建各种各样的导航元素,你可以在h1标签之后加入如下的代码。
 
  <divclass='navbarnavbar-inverse'>
 
  <divclass='nav-collapse'style="height:auto;">
 
  <ulclass="nav">
 
  <liclass="active"><ahref="#">Home</a></li>
 
  <li><ahref="#">PageOne</a></li>
 
  <li><ahref="#">PageTwo</a></li>
 
  </ul>
 
  </div>
 
  </div>
 
  navbar相关的类拥有导航条所有的样式,添加navbar-inverse类将会应用一个很酷的黑色风格,这是一个twitterbootstrap的常见搭配。我建议在这个样式的基础上进行拓展从而创造你的独一无二的导航。但在这个教程中我们仍然会使用基础的bootstrap样式。
 
  在类为navbar的DIV当中,我们添加另一个类为nav-collapse的DIV并为其添加行内样式height:auto;这是告诉bootstrap当这个页面在小于970px宽度的浏览器窗口当中时,它会提供一个压缩的切换视图。


在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码