---------------------------------------------------------------bootstrap-------------------------------------------------
开发中文网:v3.bootcss.com
(1)前段?  框架 ?
用户 --》  前端应用程序 ---》后端应用程序 ---》后端服务器。
框架:Library 或者lib,都值得是框架。第三方提供的,一些接口或者功能。
 
一.Bootstrap框架是什么??
   BootStrap,最早的时候是两个单词的合成。现在成为专有名词Bootstrap,它是一个快速开发web应用程序和网站的前端框架。
 
二.为什么要学boot,而且为什么那么火爆?
(1)容易上手,学过HTML和CSS的人就能来学习
(2)游览器支持,几乎所有的游览器都支持bootstrap框架
(3)开发速度快,代码优雅简单
(4)移动先行,移动设备优先:自从3。0版本以后更好的适应于移动端开发。但是并不是不能开发PC端
(5)响应式设计:Bootstrap自带响应式设计,CSS可以适用于PC\移动端设备的自适应
 
 
三.strap所要学的方向或者东西?
(1)基本的页面结构:网格系统和基本的页面模板
(2)全局CSS样式:框架提供的CSS类
(3)组件:导航栏、警告框、下拉菜单等等
(4)JavaScript插件:用到的是JQ支持的插件。  轮播图等等。。
 (5) 定制 :定制自己的组件   (不是重点)
 
 
四.如何下载呢?
(1)Bootstrap: 这是一个专有的名词, 意思为引导指令和引导程序
(2)下载:http://www.bootcss.com/ 是boot的官网,文档是英文的
(3)中文的官方网站:v3.bootcss.com  现在学的而是3版本
 
 类似的框架还有很多:妹子UI amaze UI 也是一样的,是国内开发的
 
五.viewport使用
 
  <!-- 1.设置 字符的编码格式-->
    <meta charset="utf-8">
    <!-- 2.让IE游览器渲染试图,按照edge游览器的方法 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 3.这是vieport 视口 -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    <!-- meta:vp -->
 
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
     <!-- width=device-width 让网页的尺寸等于手机的尺寸
          user-scalable = no; 禁止缩放(不推荐所有页面使用,具体看情况)
          initial-scale = 1;使CSS里面的标签 按照设置的尺寸1:1显示在手机上
 
      -->
 
六,布局容器-版心
(1)bootstrap已经给 body设置了基本的字体.颜色等等。所有的a标签,有颜色。而且正常状态下不显示下划线,除了hover显示下划线。
(2)布局容器:container 版心。bootstrap需要为页面内容和栅格系统包裹一个 .container 容器。
       版心取值范围
       1.屏幕大小  手机(<768) 宽度   宽度100% 
      2.小屏幕  768--992     宽度为750px             
      3.显示器  992-1200   宽度为970                  
      4.超大屏幕 大于1200   宽度为1170               
 
    <!-- .container 类用于固定宽度并支持响应式布局的容器。 -->
    <!-- .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器 -->
注意:栅格系统使用会出现的几种情况
    @ 第一种情况  只设置md,那么 lg也会和md现象一致。而xs,md没有响应式样子
    @第二种情况  只设sm,那么  sm\md\lg一个样子,xs没有样子
    @ 第三种情况  设置sm\md  那么 sm一个样子, md和lg一个样子,xs没有样子
     第四种情况  只设置xs ,那么xs\sm\md\lg全设置上了  (所以说xs特殊)
     注:若有同行中元素A设置offset,元素B不设置,则B还会紧贴着A,并不会覆盖住B;若A偏移,B也偏移,那他们就各自偏移,互不影响;
    也就是offset会影响其他,会带着其他一起偏移,
    但,push-几个单位或者pull-几个单位,不会影响其他,也就是,若A发生偏移,B没有设置偏移,所以会出现A覆盖住了B.
(3)栅格系统
       《1》栅格系统:是bootstrap提供的响应式布局方式
                栅格系统的核心
                row(被划分为12个大小的单位)
                       列   列  列
                row
                row
-------------------------------------------------------望共同进步--------------------------------------------------

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,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷,是一个CSS ...

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

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

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

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

  7. Bootstrap框架(基础篇)

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

  8. bootstrap框架禁用谷歌字体

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

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

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

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

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

随机推荐

  1. Effective C# Chapter1-Language Elements

    <EffectiveC#>这本书讲了一些关于C#语言的使用技巧和经验. 该系列文章是备忘录和自己的一些见解.程序猿们最喜欢这类问题了,欢迎讨论~ 菜单 Item 1 使用属性取代公共成员变 ...

  2. Improving Lock Performance in Java--reference

    After we introduced locked thread detection to Plumbr couple of months ago, we have started to recei ...

  3. 正确的使用枚举(Enum)

    状态与选项的区别(states and options) 在用enum之前,我个人觉得,区分一下状态和选项的概念还是很必要的. 状态,同时只能有一种,如“OK”,“Error”,不可能同时是OK和Er ...

  4. Android5.0之NavigationView的使用

    导航菜单的制作方式多种多样,网上也有各种炫酷效果的具体实现方式,那么今天我主要是想来说说Google在Android5.0之后推出的NavigationView的具体使用方式. NavigationV ...

  5. Mac通过以太网共享网络

    在日常工作和学习中,需要WiFi热点而没有路由器,这个时候我们可以用我们工作的Mac来共享网络. 系统偏好设置->共享->互联网共享:设置共享来源和共享端口->WiFi选项:设置网络 ...

  6. How to: cgminer (Bitcoin, Litecoin etc.) + AMD Radeon driver install on CentOS

    UPDATE 7/7/13: If you want to use Catalyst drivers version 12.8 you will find that X won’t start (er ...

  7. ActionBar功能,效果图一览

    这里提供了效果预览,如果由你需要的界面,详细的代码可以去看原文. http://blog.csdn.net/android2me/article/details/8874846 一.概述 1.App ...

  8. Js5中基本类型

    分别是: Number,//数值 string,字符串 Boolean,//布尔 null,null类型 undefined//未定义 标准库提供了对 布尔 ,数值,字符串三种的构造函数封装 aler ...

  9. WPF-TxtBox控件利用KeyDown来控制键盘输入

    private void TextBox_PreviewKeyDown(object sender, KeyEventArgs e)        {            TextBox txt = ...

  10. centos 6.4 安装firefox使用的flashplayer插件

    1.centos安装完后居然没flash-plugin,去官网下载居然告诉已经安装了,可是firefox又的确放不出来flash视频. 2.google一下,去官网下载个tar.gz格式文件.把lib ...