码迷,mamicode.com
首页 > Web开发 > 详细

前端框架Bootstrap - 快速搭建网站

时间:2015-05-10 17:26:10      阅读:434      评论:0      收藏:0      [点我收藏+]

标签:

Bootstrap简介

        Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。是一个CSS/HTML/JavaScript框架。Bootstrap是基于HTML5和CSS3开发的,包含丰富的组件,根据这些组件可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件:下拉菜单、按钮组、导航、导航条等等。可以说Bootstrap是一个简洁简单的前端开发框架,可以让Web开发更迅速更简单。
        学习和下载资料主要可以通过官方中文网 www.bootcss.com 。 

Bootstrap优势

  • 响应式开发: 让一个网站可以兼容不同分辨力的设备,给用户更好的视觉使用体验。
  • 丰富的组件: http://v3.bootcss.com/components/ 提供了丰富的组件可供选择。
  • 界面美观。
  • 未来趋势,现在很多平台默认引用,比如微软新建asp.net MVC5 ,微软默认引用Bootstrap的包。

如何使用Bootstrap

  1. 进入官方网站:www.bootcss.com 可以下载和查看文档。(如果不想下载,可以使用CDN连接,Bootstrap专门构建的自己的免费CND加速服务,基于国内云厂商速度快)
  2. 直接使用Bootstrap提供的基本模版的基础上进行开发 http://v3.bootcss.com/getting-started/#template 
    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
        <title>Bootstrap 101 Template</title>
    
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
    
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
        <h1>你好,世界!</h1>
    
        <!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
        <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
      </body>
    </html>
    然后在http://v3.bootcss.com/components/ 拷贝我们需要的组件到body里面就可以自己组装界面。
  3. 这里有搭建两个简单页面的视频, 可以参考。链接:http://pan.baidu.com/s/1dDIqLdZ 密码:z58a 效果:                                                                                     技术分享技术分享

栅格系统

栅格系统是比较重要的一部分,Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。详情 http://v3.bootcss.com/css/#grid
每一块加起来要十二列。
技术分享
        效果
    技术分享

前端框架Bootstrap - 快速搭建网站

标签:

原文地址:http://blog.csdn.net/jerome_s/article/details/45621391

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!