乐鱼电竞



教育行业A股IPO第一股（股票代码 003032）

全国咨询/投诉热线：400-618-4000

Bootstrap前端开发框架【使用教程】

更新时间:2021年12月14日14时39分 来源:乐鱼电竞 浏览次数:

Bootstrap 来自 Twitter(推特)，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

中文官网：http://www.bootcss.com/ 

官网：http://getbootstrap.com/ 

推荐使用：http://bootstrap.css88.com/

框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

Bootstrap框架优点：

标准化的html+css编码规范

提供了一套简洁、直观、强悍的组件

有自己的生态圈，不断的更新迭代

让开发更简单，提高了开发的效率

Bootstrap自出现至今一共有3个类型的版本，使用最多最稳定的是3.x.x的版本。

2.x.x：停止维护,兼容性好,代码不够简洁，功能不够完善。

3.x.x：目前使用最多,稳定,但是放弃了 IE6-IE7。对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的 WEB 项目。

4.x.x ：最新版，目前还不是很流行

Bootstrap 使用四步曲： 1. 创建文件夹结构 2. 创建 html 骨架结构 3. 引入相关样式文件 4. 书写内容

1.创建文件夹结构

2.创建html骨架结构

<!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
<meta content="IE=edge" http-equiv="X-UA-Compatible">
    <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
    <meta content="width=device-width, initial-scale=1, user-scalable=0" name="viewport">
<!--[if lt IE 9]>
 <!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
        </script>
        <!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
        </script>
    <![endif]-->

3. 引入相关样式文件

<!-- Bootstrap 核心样式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

4. 书写内容

直接拿Bootstrap 预先定义好的样式来使用

修改Bootstrap 原来的样式，注意权重问题

学好Bootstrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器，它提供了两个作此用处的类。

1. container 类

响应式布局的容器 固定宽度

大屏 ( >=1200px) 宽度定为 1170px 

中屏 ( >=992px) 宽度定为 970px 

小屏 ( >=768px) 宽度定为 750px 

超小屏 (100%)

2. container-fluid 类

流式布局容器 百分百宽度 占据全部视口（viewport）的容器。

好口碑IT培训




猜你喜欢：

Bootstrap是什么？有什么用处？

Bootstrap简介，如何下载和使用Bootstrap？

Bootstrap源文件的目录结构是怎样的？

Bootstrap源文件的目录结构是怎样的？

乐鱼电竞前端与移动开发培训

0 分享到：
和我们在线交谈！
【网站地图】【sitemap】