简介:
  Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言less写成。Bootstrap一经推出后颇受欢迎,国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。
  Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件:
下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航,分页、排版、缩略图、警告对话框、进度条、媒体对象等。
布局方式:
  BootStrap框架兼容的是IE8以上的版本,(适合企业管理网站,比较方正,不适合互联网)。
    BootStrap框架采用的是栅格式布局,12格,每列的距离用百分比,以适应不同的屏幕,格子与格子的间距为30px;
使用流程:
  1.到bootstrap官方网站下载,对于我们开发者来说,直接下载编译和压缩后的CSS、JavaScript文件,另外还包含字体文件,但是不包含文档和源码文件。打开解压包之后可以发现包含三个文件夹 css、fonts、js。这是最基本的Bootstrap组织形式:未压缩版的文件可以在任意web项目中直接使用。我们提供了压缩(bootstrap.min.*)与未压缩 (bootstrap.*)的CSS和JS文件。
  2.所有Bootstrap插件都依赖jQuery。而且在正式的项目当中推荐使用压缩之后的版本,因为它的体积很小,到官网下载jQuery支持.
  3.将下载后的就jQuery放到bootstrap中的js目录下
  4.在bootstrap的根目录下新建一个html文件,把bootstrap框架中的css和js文件链接到创建的HTML文件中(注意,必须在根目录下面新建)。
  5.编辑html文件,添加对bootstrap框架中css和js的引用,这样,我们就基本上建立了对bootstrap框架的基本使用架构。
  在使用过程中,我们需要什么组件,就直接参照官方下载提供的使用方法即可
简单的几个语法:
  .container{
        width:1000px !important
        }
    //container为我们要布置的内容区域,可以并列存在多个,但是不能嵌套。
    row:行
    col-xs-num//num为数字1——12,此行的意义是定义元素所占的宽度
    col-xs-push-num//num为数字,把元素向右推num格,不会影响原先排在他后面的元素
    col-xs-pull-num//num为数字,把元素向左推num格,不会影响原先排在他前面的元素
    col-xs-offset-num//把元素及右边的元素一起向右推num格。

嵌套的规则:
    行套列,列套行,不能行套行,列套列。
    
    使用BootStrap框架,只需要找到自己想要的代码,在自己页面中改变class值即可。

BootStrap框架的更多相关文章

  1. Bootstrap框架的学习(一)

    一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...

  2. Web前端学习笔记:Bootstrap框架

    很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...

  3. 基于BootStrap框架构建快速响应的GPS部标监控平台

    最近一个客户要求将gps部标平台移植到bootStrap框架作为前端框架,符合交通部796部标只是他们的一个基本要求,重点是要和他们的冷链云物流平台进行适配.我自己先浏览了客户的云物流平台的界面,采用 ...

  4. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  5. Bootstrap框架(基础篇)之列表,表格,表单

    继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...

  6. Bootstrap框架(基础篇)

    本文引用慕课网http://www.imooc.com/learn/141  作者大漠  讲的很详细,我没有全篇都引用,其中很多是添加了自己的一些理解. Bootstrap框架是基于JQuery 所以 ...

  7. bootstrap框架禁用谷歌字体

    bootstrap框架禁用谷歌字体 H5框架换字体.png

  8. css去掉使用bootstrap框架后打印网页时预览效果下的超链接

    在我们写网页的时候,超链接是链接各个页面的桥梁,也是搜索引擎爬虫(spider)收录网站页面的关键,因此,在每个网页中会有许多的超链. 今天,一个同行妹妹在使用了bootstrap框架来搭建自己的网站 ...

  9. 响应式设计,bootstrap框架的IE兼容问题

    学习bootstrap框架,主要是为了集成好的响应式框架,及其兼容性. 但是按bootstrap中文站的说明文档 制作了一个栅格布局的test.html后,怎么测试都不成功,在ie8下一直看不到媒体查 ...

随机推荐

  1. windows下安装python模块

    如何在windows下安装python模块 1. 官网下载安装包,比如(pip : https://pypi.python.org/pypi/pip#downloads) pip-9.0.1.tar. ...

  2. native vlan(本征VLAN)

    其实就是不打tag的VLAN,因为你想,一个VLAN在经过交换设备老是打tag,然后再脱掉tag...这个很浪费计算资源,尤其是在转发的报文量相当大的时候. 如何解决:     可以定义一种vlan, ...

  3. 【转】 C++的精髓——虚函数

    虚函数为了重载和多态的需要,在基类中是由定义的,即便定义是空,所以子类中可以重写也可以不写基类中的函数! 纯虚函数在基类中是没有定义的,必须在子类中加以实现,很像java中的接口函数! 虚函数 引入原 ...

  4. 【JAVA】【leetcode】【使用堆栈实现后向计算】

    题目:evaluate-reverse-polish-notation 要求: Evaluate the value of an arithmetic expression in Reverse Po ...

  5. 我需要在Web上完成一个图片上传的功能(+2)

    增加一个页面,用于判断传参是否正确. @{     //判断是否具备会员参数     if (UrlData.Count > 0)     {         Session["Arg ...

  6. ajax和sap以及网络安全

    1.sap(single page  applaction)一个页面通过众多ajax请求完成的一个app 优点是:减少页面跳转,UI公用部分的重复加载 缺点: 1.ajax过多的请求,对服务器性能有所 ...

  7. F:ungeon Master

    总时间限制: 1000ms 内存限制: 65536kB描述You are trapped in a 3D dungeon and need to find the quickest way out! ...

  8. Codeforces Round #373 (Div. 2) E. Sasha and Array

    题目链接 分析:矩阵快速幂+线段树 斐波那契数列的计算是矩阵快速幂的模板题,这个也没什么很多好解释的,学了矩阵快速幂应该就知道的东西= =这道题比较巧妙的在于需要用线段树来维护矩阵,达到快速查询区间斐 ...

  9. Asp.net MVC3表格共用分页功能

    在建立的mvc3项目中,在Razor(CSHTML)视图引擎下,数据会在表格中自动的生成,但分页没有好的控件实现,这里我们开发了设计了一个分页的模板,适合于没有数据提交和有数据提交的分页的分页. 第一 ...

  10. C#winform调整控件的位置

    现在有三个控件并排放置 第二个控件有隐藏功能 隐藏后第一个控件和第三个控件的距离要缩小,于是就要改变第三个控件的位置 尝试用Location.X属性去设置,但是被告知此非变量 于是只能另外想办法 搜到 ...