Bootstrap 前端开发框架

最新推荐文章于 2024-07-20 15:49:14 发布

辰逸博客

最新推荐文章于 2024-07-20 15:49:14 发布

阅读量3.1k

点赞数 3

分类专栏： css 文章标签： Bootstrap 前端开发框架 bootstrap 使用创建html骨架结构 Bootstrap 删格系统列嵌套列偏移列排序响应式工具

本文链接：https://blog.csdn.net/chenyiboke/article/details/103236435

版权

本文介绍了Bootstrap前端框架，包括其简介、优点和版本。详细讲解了Bootstrap的布局容器、删格系统，如container类和container-fluid类，以及删格系统的使用，如列的平均划分、嵌套、偏移和排序。还提到了响应式工具，帮助快速开发对移动设备友好的页面。

摘要由CSDN通过智能技术生成

Bootstrap 前端开发框架

Bootstrap 来自TWitter（推特），是目前最受欢迎的前端框架。bootstrap 是基于HTML、CSS
和JavaScript的，它简洁灵活，使得web开发更加快捷。

中文官网： http://www.bootcss.com/
官网：http://getbootstrap.com/
推荐使用：http://bootstrap.css88.com/

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

bootstrap中的按钮引用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <!--[if lt IE 9]>
            <script src="https: //oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->    
        <!-- 不要忘记引入bootstrap 的样式文件 -->
        <link  rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        /* 利用我们自己写的样式覆盖原先的样式 */
        .login{
   
            width: 80px;
            height: 45px;
        }
    </style>
</head>
<body>
    <button type="button" class="btn btn-success">Success</button>
    <div class="btn btn-success login">登录</div>
    <div type="button" class="btn btn-danger">未成功</div>
</body>
</html>

在这里插入图片描述

1. Bootstrap 简介

1. 优点：

		标准化的html+css编码规范。
        提供了一套简洁、直观、强悍的组件。
        有自己的生态圈，不断的更新迭代。
        让开发更简单，提高了开发的效率。

2. 版本

		2.x.x：停止维，兼容性好，代码不够简洁，功能不够完善。
        3.x.x：目前使用最多，稳定，但是放弃了 IE6-IE7。对 IE8 支持但是界面效果不好，
        偏向用于开发响应式布局、  移动设备优先的web项目。
        4.x.x：最新版，目前还不是很流行。

2. bootstrap 使用

在现阶段我们还没有接触JS相关课程，所以我们只考虑使用它的样式库。
控制权在框架本身，使用者要按照所规定的某种规范进行开发。
bootstrap 使用四步曲：1.创建文件夹结构 2. 创建html骨架结构 3. 引入相关样式文件 4.书写内容

书写内容

直接拿bootstrap预先定义好哦的样式来使用
修改bootstrap原来的样式，注意权重问题
学好bootstrap的关键在于知道它定义了那些样式，以及这些样式能实现什么样的效果

创建html骨架结构

 <!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
            <meta name=<

最低0.47元/天解锁文章

辰逸博客

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
1
评论
Bootstrap 前端开发框架

Bootstrap 前端开发框架Bootstrap 来自TWitter（推特），是目前最受欢迎的前端框架。bootstrap 是基于HTML、CSS和JavaScript的，它简洁灵活，使得web开发更加快捷。中文官网： http://www.bootcss.com/官网：http://getbootstrap.com/推荐使用：http://bootstrap.css88.com/...
复制链接

扫一扫