• 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
    -------------------------------------------------------望共同进步--------------------------------------------------
  • 相关阅读:
    腾讯视频插入网页的代码;
    FW: 软件持续交付的诉求;
    TOGAF
    Windows WSL2 htop打开黑屏的问题解决
    requests.exceptions.ConnectionError: HTTPSConnectionPool(host='appts.xxx.com%20', port=443):
    sqlalchemy实现模糊查询
    jenkins过滤版本,可选择版本
    QML 布局之一:锚布局详解(各种例子)
    Qt Quick 常用控件:Button(按钮)用法及自定义
    The Common Order Operations of Dis Operation System (DOSS)
  • 原文地址:https://www.cnblogs.com/zhaojing/p/6165601.html
Copyright © 2020-2023  润新知