了解Bootstrap框架

最新推荐文章于 2023-07-14 22:13:43 发布
最新推荐文章于 2023-07-14 22:13:43 发布
阅读量337 收藏
点赞数
文章标签： bootstrap jquery css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53489791/article/details/120612658
版权

Bootstrap简介

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

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

下载

官方网站：

https://v3.bootcss.com/
在这里插入图片描述

Bootstrap 的内容

  1. 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
  2. CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
  3. 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
  4. JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
  5. 定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

使用Bootstrap

1. 布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。并提供了两个作此用处的类。这两种 容器类不能互相嵌套。
（1）.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>
  • 响应式布局的容器 固定宽度
  • 大屏 ( >=1200px) 宽度定为 1170px
  • 中屏 ( >=992px) 宽度定为 970px
  • 小屏 ( >=768px) 宽度定为 750px
  • 超小屏 (100%)

（2）.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

2. 栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

简介

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
类前缀 .col-xs- .col-sm- .col-md- .col-lg-

  • 按照不同屏幕划分为1~12 等份
  • 行（row） 可以去除父容器作用15px的边距
  • xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
  • 列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
  • 每一列默认有左右15像素的 padding
  • 可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class=“col-md-4 col-sm-6”
栅格嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-*
元素内。

<!-- 列嵌套 -->
 <div class="col-sm-4">
 外列
    <div class="row">
         <div class="col-sm-4">内列</div>
         <div class="col-sm-4">内列</div>
         <div class="col-sm-4">内列</div>
    </div>
</div>
列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

 <!-- 列排序 -->
  <div class="row">
      <div class="col-lg-4 col-lg-push-8">左</div>
      <div class="col-lg-8 col-lg-pull-4">右</div>
  </div>

类前缀 .col-xs- .col-sm- .col-md- .col-lg-

模板

拷贝并粘贴下面给出的 HTML 代码，这就是一个最简单的 Bootstrap 页面了。

<!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>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 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" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>
借我一秋风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端移动Web第四天知识点：响应式布局（bootstrap框架）
m0_46597922的博客
04-19 355
1.响应式开发 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 1.2 响应式布局容器 1.响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。 2.原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。 平时我们的响应式尺寸划分 超小屏...
移动端WEB开发之响应式布局和bootstrap的介绍
zh_hunan的博客
11-05 536
响应式开发原理 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 响应式布局容器 响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。 bootstrap的介绍 Bootstrap框架：顾名思义就...
【前端布局篇】响应式布局 Bootstrap 移动端布局
前端知识分享喵
06-20 6810
布局:layout 对事物的全面规划和安排页面布局：对页面的文字、图形或表格进行格式设置。包括字体、字号、颜色纸张大小和方向以及页边距等。网页布局：利用html搭建结构与内容，使用CSS添加装饰网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。**注：**所有的页面布局都是基于盒子模型基础之上进行布置。响应式布局是 Ethan Marcotte 在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。
移动端响应式布局开发的几种方式
最新发布
mengran_code的博客
07-14 1036
所谓移动端响应式布局，就是最终布局适配不同的手机型号，针对不同的屏幕分辨率的终端上能够浏览网页展示的不同方式，我们也可以称为移动端适配布局。总结就是一个移动端网站能够兼容多个终端——而不是为每个终端做一个特定的版本。面对不同分辨率设备灵活性较强能够快捷解决多设备显示适应问题。
移动端web开发（四）--- 响应式布局和bootstrap 框架
weixin_45092437的博客
09-18 380
一、响应式开发 1、开发原理 ​ 所谓的响应式布局，就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而达到适配不同设备的目的。 我们将常用的智能设备分为： 小于768的为超小屏幕（手机） 768~992之间的为小屏设备（平板） 992~1200的中等屏幕（桌面显示器） 大于1200的宽屏设备（大桌面显示器） 2、布局容器 ​ 响应式布局需要一个父级元素作为布局容器，来配合子级元素实现响应变化效果。在不同的屏幕尺寸下，通过媒体查询来改变这个布局容器的大小。然后再改变李曼子元素的排列和大小，从
如何使用bootstrap框架 bootstrap入门必看!
11-28
前言: 前几天，本想做一个登陆界面，但自己写form表单必然很丑，所以想用下bootstarp框架，之前听别人说bootstrap很牛的样子。但我完全不会bootstrap… 下载&目录 看bootstrap官网，接着我下载了用于生产环境...
Bootstrap开发框架-界面代码分析_Bootstrap开发框架_bootstrap_collect5g1_
10-01
Metronic 的 Bootstrap 开发框架》 的基础上，通过分析各个模块相关的代码、各种常见组件的使用、特殊应用场景的处理， 熟悉掌握框架里面相关代码和组件的使用，以便能够更全面的、更真实了解《Bootstrap 开发框架》...
bootstrap响应式前端框架拼图视频教程.zip
08-15
本Bootstrap教程能够让您了解到，Bootstrap框架是一个非常受欢迎的前端开发框架...在这个Bootstrap教程中，将带领大家了解Bootstrap框架以及如何使用Bootstrap框架，通过本教程学习能够独立定制出适合自己的Bootstrap。
Bootstrap期末课程设计
03-09
内容使用语言：HTML5+css3+js+bootstrap框架 使用/学习场景：完成整个学期成果，了解框架的好处 应用场景：对于使用框架对于完成一个网页的实现更加容易 特点：加深对前端语言的应用（HTML，css, js） 适用人群：想...
Bootstrap每天必学之前端开发框架
09-03
Bootstrap每天必学之前端开发框架，今天这篇文章就带着大家了解认识当下最流行的前端开发框架Bootstrap，bootstrap深受大家喜爱的原因到底是什么呢，我们一探究竟。
移动端WEB开发之响应式布局
DongShanYuXiao的博客
12-11 454
一、响应式开发 二、Bootstrap前端开发框架 三、Bootstrap栅格系统 一、响应式开发 1.1原理 就是使用媒体查询对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 1.2响应式布局容器 响应式需要一个父级做为布局容器·，来配合子元素实现变化的效果。 二、Bootstrap简介 它来自Twitter(推特），是目前最受欢迎的前端框架，它是基于html、css、和js的，简介灵活，使得web开发更加快捷。优点就是提供了一套简介、直观、强悍的组件。 使用四部曲：
移动端布局-响应式布局常用解决方案
qq_62415996的博客
01-17 786
前言：前端开发常用的自适应方法如下： Px和视口，媒体查询，百分比，自适应场景下的rem解决方案 ，通过Vw/Vh来实现自适应。介绍一些移动端开发技巧以及css3新单位，适合于混合响应式布局
移动端 响应式布局
m0_46515475的博客
07-24 388
移动端响应式布局
18.移动端响应式布局
samllucky的博客
01-14 470
1.响应式开发原理：利用媒体查询，针对不同的设备进行布局和样式的设置，从而适配不同的设备目的 2.响应式布局容器： <style> .container{ height: 150px; background-color: pink; margin: 0 auto; } /* 1. 超小屏幕 小于768 布局容器的宽度为100% */ @media screen and (max-width:767px){ .
Bootstrap table的一些简单使用总结
white__cat的专栏
12-04 4333
最近接触一个NB插件，Bootstrap table 没做过前端的表示对table的印象还只停留在html的table标签那一套，用过bootstrap table之后不得不说真是牛X。 构造方式 1 、HTML div class="btn-group hidden-xs"id="exampleTableEventsToolbar" > //定义一系列工具栏... /
BootStrap前端框架
Skf_0004010的博客
11-04 5001
BootStrap 1、Bootstrap介绍 什么是bootstrap? 简单，直观，强悍的前端开发框架，让web开发更迅速，简单。来自Twitter，是目前很受欢迎的前端框架之一。 Bootstrap是基于HTML,CSS,Javascript的 特点 移动端设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式 响应式设计：采用栅格布局（底层实现原理：媒体查询结合流体布局） 偏UI，综合框架，包含一些常用的UI组件以及一些JS组件 Bootstrap的适用场景？ b
移动端之响应式布局
qq_45256777的博客
09-30 876
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 优点： 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点： 兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况 所以在页面布局较为简单，内容偏少时可以使用响应式布局，而不用为每一个终端做一个页
移动Web开发之Bootstrap （Web框架）
weixin_42442856的博客
11-11 1808
一、为什么使用Bootstrap？ 1.标准化的html+css编码规范 2.提供一套简洁，直观，强悍的组件 3.有自己的生态圈，不断的更新迭代 4.让开发更简单。提高了开发的效率 二、如何使用Bootstrap？ 下载网址：Bootstrap中文网Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。目前，Bootstrap最新版本为3.0 。Bootstrap中文网
移动端—响应式布局
weixin_46191548的博客
02-07 264
移动端开发的两种主流方案之一：响应式布局兼容 (1)内容没有受到(屏幕宽度)明显影响时，自适应宽高即可 (2)内容受到明显的影响时，改变布局，来保证内容的清晰 响应式布局：用于解决不同浏览器，不同分辨率及不同设备的不同显示效果 优点： 1)面对不同分辨率的设备灵活性很强 2)能够快捷的解决多设备显示适应的问题 缺点： 1)兼容各种设备工作量大，效率低，页面加载时间长 2)一定的程度上，会改变网站原...
利用Bootstrap框架制作Bootstrap中文网首页
05-24
抱歉，作为语言模型，我无法直接展示...1. 首先，在HTML文档中引入Bootstrap框架的CSS和JavaScript文件。可以在Bootstrap官网上下载最新版本的框架文件，或者使用CDN链接。 ```html <!-- 引入Bootstrap的CSS文件 --> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值