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 - 快速搭建网站的更多相关文章

  1. 利用Columnal网格系统快速搭建网站的基本布局结构

    1.下面是一些对响应式设计提供了不同程度支持的CSS框架: (1)Semantic(http://semantic.gs); (2)Skeleton(http://getskeleton.com); ...

  2. 前端框架 bootstrap 的使用

    内容概要 前端框架 bootstrap 简介 引入方式 布局容器 栅格系统 图标 内容详细 简介 网址:https://v3.bootcss.com/ 版本: 2.X 3.X 4.X 推荐使用3.X版 ...

  3. 前端框架Bootstrap

    前端框架Bootstrap http://www.bootcss.com/ Bootstrap 编码规范 http://codeguide.bootcss.com/

  4. golang开源项目qor快速搭建网站qor-example运行实践

    最近想找几个基于Go语言开发的简单的开源项目学习下,分享给大家,github上有心人的收集的awesome-go项目集锦:github地址 发现一个Qor项目: Qor 是基于 Golang 开发的的 ...

  5. bootstrap快速搭建属于自己的后台模板库

    不论做什么项目,我们都以快速搭建为主,设计师固然重要,但是,我们前端开发的也必须能给出自己以前做过什么样的模板,自己收藏的模板,或者我们弹框的形式,我的提示框的形式,我用的下拉框的插件,日历的插件,我 ...

  6. 前端框架Bootstrap（10.7国庆补写）

    框架的官网地址:https://v3.bootcss.com/ 主要学习Bootstrap框架提供的样式.组件.插件的使用. 首先下载到本地,在项目中导入使用: 下载的文件中包含:min.css的是压 ...

  7. 利用Bootstrap快速搭建个人响应式主页（附演示+源码）

    1.前言 我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意.做网站后台的开发人员可能了解前端,可是自己写一个不错的前端还是很费事的.幸好我们有Bootstra ...

  8. 前端框架——BootStrap学习

    BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...

  9. 简洁灵活的前端框架------BootStrap

      前  言 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.[1] ...

随机推荐

  1. java中的final和volatile详解

    相比synchronized,final和volatile也是经常使用的关键字,下面聊一聊这两个关键字的使用和实现 1.使用 final使用: 修饰类表示该类为终态类,无法被继承 修饰方法表示该方法无 ...

  2. 学习笔记：Zookeeper 应用案例(上下线动态感知)

    1.Zookeeper 应用案例(上下线动态感知) 8.1 案例1--服务器上下线动态感知 8.1.1 需求描述 某分布式系统中,主节点可以有多台,可以动态上下线 任意一台客户端都能实时感知到主节点服 ...

  3. [extjs5学习笔记]第三十八节 sencha CMD 6.0.0.220版本安装

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/46740381 简介 sencha cmd 6安装过程不需要UAC控制了对于widnow ...

  4. MySQL连接及基本信息查看命令小结

    前言 学习PHP就不得不提MySQL,虽然有phpMyadmin这样的工具可以图形化操作数据库,但我还是想借学习PHP的机会使用下命令行方式操作数据库.以下就是我的学习小结,包括命令行连接数据库,查看 ...

  5. Android开发学习之路--基于vitamio的视频播放器（一）

      之前也试过vitamio这个库,后来不知道被什么事情给耽搁了,就没继续下去.近来觉得视频还是需要学习一下的,谁让直播那么火呢,就想着写一个简单的视频播放的app先吧.好了那就开始吧,暂时取名为JP ...

  6. Programming In Scala笔记-第二、三章

    本系列博客以<Programming in Scala 2nd Edition>为主,围绕其中的代码片段进行学习和分析. 本文主要梳理Chapter2和Chapter3中涉及到的主要概念. ...

  7. mybatis insert 返回主键

    分享牛,分享牛原创.ssm整合的时候,我们操作mybatis insert 的时候,需要返回插入的主键,因为主键是自增的,这个时候怎么办呢?很简单看一下下面的代码示例: 1.1.1. 代码定义 pub ...

  8. Spark核心类：弹性分布式数据集RDD及其转换和操作pyspark.RDD

    http://blog.csdn.net/pipisorry/article/details/53257188 弹性分布式数据集RDD(Resilient Distributed Dataset) 术 ...

  9. Tomcat的系统安全管理

    Tomcat是一个Web容器,我们开发的Web项目运行在Tomcat平台,这就好比将一个应用嵌入到一个平台上面运行,要使嵌入的程序能正常运行,首先平台要能安全正常运行.并且要最大程度做到平台不受嵌入的 ...

  10. XML之SAX解析模型

    DOM解析会把整个XML文件全部映射成Document里的树形结构,当遇到比较大的文件时,它的内存占用很大,查找很慢 SAX就是针对这种情况出现的解决方案,SAX解析器会从XML文件的起始位置起进行解 ...