zoukankan      html  css  js  c++  java
  • bootstrap框架应用

    ---------------------------------------------------------------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,那么  smmdlg一个样子,xs没有样子
        @ 第三种情况  设置smmd  那么 sm一个样子, md和lg一个样子,xs没有样子
         第四种情况  只设置xs ,那么xssmmdlg全设置上了  (所以说xs特殊)
         注:若有同行中元素A设置offset,元素B不设置,则B还会紧贴着A,并不会覆盖住B;若A偏移,B也偏移,那他们就各自偏移,互不影响;
        也就是offset会影响其他,会带着其他一起偏移,
        但,push-几个单位或者pull-几个单位,不会影响其他,也就是,若A发生偏移,B没有设置偏移,所以会出现A覆盖住了B.
    (3)栅格系统
           《1》栅格系统:是bootstrap提供的响应式布局方式
                    栅格系统的核心
                    row(被划分为12个大小的单位)
                           列   列  列
                    row
                    row
    -------------------------------------------------------望共同进步--------------------------------------------------
  • 相关阅读:
    从句分析
    artDialog ( v 6.0.2 ) content 参数引入页面 html 内容
    Java实现 LeetCode 13 罗马数字转整数
    Java实现 LeetCode 13 罗马数字转整数
    Java实现 LeetCode 13 罗马数字转整数
    Java实现 LeetCode 12 整数转罗马数字
    Java实现 LeetCode 12 整数转罗马数字
    Java实现 LeetCode 12 整数转罗马数字
    Java实现 LeetCode 11 盛最多水的容器
    Java实现 LeetCode 11 盛最多水的容器
  • 原文地址:https://www.cnblogs.com/zhaojing/p/6165601.html
Copyright © 2011-2022 走看看