首页 > 代码库 > bootstrap框架应用

bootstrap框架应用

2024-08-26 19:12:00   223人阅读

开发中文网：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）的容器 -->
（3）栅格系统
       《1》栅格系统：是bootstrap提供的响应式布局方式
                栅格系统的核心
                row（被划分为12个大小的单位）
                       列   列  列
                row
                row

bootstrap框架应用


联系
我们