教育行业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 分享到:
和我们在线交谈!