Day17-BootStrap

最新推荐文章于 2024-08-05 17:20:59 发布

柳子陌

最新推荐文章于 2024-08-05 17:20:59 发布

阅读量111

点赞数

分类专栏：前端文章标签： bootstrap html css javascript

本文链接：https://blog.csdn.net/qq_38205875/article/details/109071647

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

title: Day17-BootStrap
date: 2020-07-30 19:15:48
tags:

BootStrap

一个前端开发的框架，来自Twitter（推特），是目前很受欢迎的前端框架。BootStrap是基于HTML、CSS、JavaScript的，它简洁灵活，使得web开发更加便捷。

框架：一个半成品软件，开发人员可在框架基础上进行开发，简化编程
好处：
1. 定义了很多CSS样式和JavaScript插件。我们开发人员可以直接使用这些样式和插件得到丰富的页面效果
2. 响应式布局：同一套页面可以兼容不同分辨率的设备

快速入门

步骤：

BootStrap下载
在项目中将三个文件夹拷贝进去
创建一个HTML页面，引入必要资源文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Title</title>

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

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<h1>你好，世界！</h1>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

响应式布局

同一套页面可以兼容不同分辨率的社保
实现：依赖于栅格系统，将一行平均分成12个格子，可以指定元素占几个格子
步骤：
- 定义容器。相当于之前的Table
  - container：两边留白
  - container-fluid：每一种设备都是100%宽度
- 定义行。相当于之前的tr 样式：row
- 定于元素。指定该元素在不同的设备上，所占格子数目。样式.col-设备代号-格子数目
  1. xs：超小屏幕手机（<768px）：.col-xs-12
  2. sm：小屏幕平板（≥768px）：.col-sm-
  3. md：中等屏幕桌面显示器（≥992px）：.col-md-
  4. lg：大屏幕大桌面显示器（≥1200px）：.col-lg-
注意事项：
1. 一行中如果格子超过12，将自动换行
2. 栅格类属性，向上兼容。
3. 如果真实设备宽度，小于设备代号，会一个元素占满一整行

栅格系统

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
        .inner{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--定义容器-->
<div class="container-fluid">
    <!-- 定义行 -->
    <div class="row">
        <!-- 定义元素 -->
        <div class="col-lg-1 col-sm-2 inner">1</div>
        <div class="col-lg-1 col-sm-2 inner">2</div>
        <div class="col-lg-1 col-sm-2 inner">3</div>
        <div class="col-lg-1 col-sm-2 inner">4</div>
        <div class="col-lg-1 col-sm-2 inner">5</div>
        <div class="col-lg-1 col-sm-2 inner">6</div>
        <div class="col-lg-1 col-sm-2 inner">7</div>
        <div class="col-lg-1 col-sm-2 inner">8</div>
        <div class="col-lg-1 col-sm-2 inner">9</div>
        <div class="col-lg-1 col-sm-2 inner">10</div>
        <div class="col-lg-1 col-sm-2 inner">11</div>
        <div class="col-lg-1 col-sm-2 inner">12</div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

CSS和JS插件：

全局CSS样式：
- 按钮：class="btn btn-default"
- 图片：
  - class="img-responsive"：任意尺寸100%宽度
  - class="img-rounded/circle/thumbnail"：方的/圆的/相框
- 表格：class="tablie table-border table-hover"
- 表单：class="form-control"
组件：
- 导航条：
- 分页条：
插件：
- 轮播图：

柳子陌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Day17-BootStrap

title: Day17-BootStrapdate: 2020-07-30 19:15:48tags:BootStrap一个前端开发的框架，来自Twitter（推特），是目前很受欢迎的前端框架。BootStrap是基于HTML、CSS、JavaScript的，它简洁灵活，使得web开发更加便捷。框架：一个半成品软件，开发人员可在框架基础上进行开发，简化编程好处：定义了很多CSS样式和JavaScript插件。我们开发人员可以直接使用这些样式和插件得到丰富的页面效果响应式布局：同一套.
复制链接

扫一扫