20分钟轻松创建自己的bootstrap站点_javascript技巧

《20分钟轻松创建自己的bootstrap站点_javascript技巧》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、20分钟轻松创建自己的Bootstrap站点木文的主要目的让你在20分钟内学会使用twitterbootstrap创建一个站点，如何建立站点，下文为大家介绍：首先需要说的是twitterbootstrap是非常优秀的一个前端开源框架，它为所冇的组键都提供了详细的用例，让你能够轻易地通过复制黏贴而附加到你的设计屮。BootstrapSleek,intuitive,andpowerfulfront-endframeworkforfasterandeasierwebdevelopment.DownloadBootstrap基本的HT

2、ML模板我们需要以一个基本的HTML模板，这样我们能够把所需要的bootstrap文件包含进來。卜•面就是我们twitterbootstrap项目的开头，复制这些代码到一个文件中并将其命名为index,htmlo〈titlc>TwittcrBootstrapTutorial一Arcsponsivclayouttutorialbody{background-color:#CCC;}

3、dy>这段代码屮我们已经添加了一些css使页面的背景呈亮灰色，因为这样我们能够轻易地在我们的设计中看见不同的列，使它更加容易理解。引入twitterbootstrap文件为了使用twitterbootstrap我们仅仅需要把一个文件引入到我们的模板当中來，引入文件有很多种方法，如果你想了解这些方法请查阅和关文档。基于木教程的出发点，我们将会通过CDN来引入bootstrap-combined,min.css文件而不需要下载任何的文件。复制代码代码如下：href=nhttp://netdna.bootstrapcd

4、n.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.cssHrel=,,stylesheetH>twitterbootstrapCSS在我们的模板屮生效。TwitterBootstrap的容器bootstrap的container类是非常冇用的，它能在页而屮创建一个居屮的区域，然后我们能够把其他位置的内容放到里面。container类等价于创建了一个具有静态宽度并且magin值为auto的一个居中的div框。twitterbootstrap的container类的优

5、点在于它是响应式的，它会以当前屏幕的宽度为基础计算出最佳的宽度予以实用。在body标签屮，使用container类创建一个div。它会作为页而主要的放置其他代码的外层包裹。如果你调整这个DTV的高度并将其背景颜色设置为白色，你所看到的效果会是这样：标题和导航现在我们已经冇一个地方可以添加额外的HTML代码，我们可以添加标题文本然后再创建站点的主要导航条。加入如下的文木或者你选择的文字到container类的div标签当中。TWTTTERBOOTSTRAPTUTORTAIX/hl>现在并没有多少新的东西，这仅仅是一个标题

6、，让我们转移到更有趣的方面，twitterbootstrap导航。Bootstrap有一个nav类让我们能够创建各种各样的导航元素，你可以在hl标签之后加入如下的代码。〈ahref二〃#"〉Home〈/a>〈/li><1iXahref二"#">PageOne