Bootstrap笔记

最新推荐文章于 2023-03-07 20:24:49 发布
原创 最新推荐文章于 2023-03-07 20:24:49 发布 · 346 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 




Bootstrap
简介
什么是Bootstrap？
Bootstrap 官网

 
  • 框架：库 lib library
  • jQuery作为一个框架来讲，提供一套比较便捷的操作DOM的方式
  • 把大家都需要的功能预先写好到一些文件 这就是一个框架
  • Bootstrap 让我们的 Web 开发更简单，更快捷；
  • 注意是 Bootstrap 不是 BootStrap！这是一个词，不是合成词，其含义为：n. 引导指令,引导程序
  • Bootstrap 是当下最流行的前端框架（界面工具集）；
  • 特点就是灵活简洁，代码优雅，美观大方；
  • 其目的是为了让 Web 开发更敏捷；
  • 是 Twitter 公司的两名前端工程师 Mark Otto 和 Jacob Thornton 在 2011 - 年发起的，并利用业余时间完成第一个版本的开发；
为什么使用Bootstarp？

 
  • 生态圈火，不断地更新迭代；
  • 提供一套美观大方地界面组件；
  • 提供一套优雅的 HTML+CSS 编码规范；
  • 让我们的 Web 开发更简单，更快捷；
注意：

 

  
使用 Bootstrap 并不代表不用写 CSS 样式，而是不用写绝大多数大家都会用到的样式

 
准备
下载Bootstrap

 
安装Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
  <!-- 引入Bootstrap核心样式文件（必须） -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- 引入Bootstrap默认主题样式（可选） -->
  <link rel="stylesheet" href="css/bootstrap.theme.min.css">
  <!-- 你自己的样式或其他文件 -->
  <link rel="stylesheet" href="example.css">
</head>
<body>
  <!-- 你的HTML结构...... -->
  <!-- 以下代码，如果不使用JS插件则不需要 -->
  <!-- 由于Bootstrap的JS插件依赖jQuery，so 引入jQuery -->
  <script src="js/jquery.min.js"></script>
  <!-- 引入所有的Bootstrap的JS插件 -->
  <script src="bootstrap.min.js"></script>
  <!-- 你自己的脚本文件 -->
  <script src="example.js"></script>
</body>
</html>

Bootstrap文档

 
基础的Bootstrap模板
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Compatible
<meta http-equiv="X-UA-Compatible" content="IE=edge">


 
  • 此属性为文档兼容模式声明，表示如果在IE浏览器下则使用最新的标准渲染当前文档
视口
<meta name="viewport" content="width=device-width, initial-scale=1">


 
  • 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示
  • 目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；
  • 视口的宽度可以通过meta标签设置
  • 此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）
  • width:视口的宽度
  • initial-scale：初始化缩放
  • user-scalable:是否允许用户自行缩放（值：yes/no; 1/0）
  • minimun-scale:最小缩放initial-scale
第三方依赖

 
  • jQuery
    
   
    
    
    Bootstrap框架中的所有JS组件都依赖于jQuery实现
    
   
  • html5shiv
    
   
    
    
    让低版本浏览器可以识别HTML5的新标签，如header、footer、section等
    
   
  • respond
    
   
    
    
    让低版本浏览器可以支持CSS媒体查询功能
    
   
基础CSS样式

 
预置界面组件

 
JavaScript插件
JavaScript插件的依赖情况
如何使用Javascript插件
内置组件

 
深度自定义 Bootstrap
在线自定义

 
源码编译
LESS语言

Bootstrap

简介

什么是Bootstrap？

Bootstrap 官网

  • 框架：库 lib library
  • jQuery作为一个框架来讲，提供一套比较便捷的操作DOM的方式
  • 把大家都需要的功能预先写好到一些文件 这就是一个框架

  • Bootstrap 让我们的 Web 开发更简单，更快捷；

  • 注意是 Bootstrap 不是 BootStrap！这是一个词，不是合成词，其含义为：n. 引导指令,引导程序

  • Bootstrap 是当下最流行的前端框架（界面工具集）；
  • 特点就是灵活简洁，代码优雅，美观大方；
  • 其目的是为了让 Web 开发更敏捷；
  • 是 Twitter 公司的两名前端工程师 Mark Otto 和 Jacob Thornton 在 2011 - 年发起的，并利用业余时间完成第一个版本的开发；

为什么使用Bootstarp？

  • 生态圈火，不断地更新迭代；
  • 提供一套美观大方地界面组件；
  • 提供一套优雅的 HTML+CSS 编码规范；
  • 让我们的 Web 开发更简单，更快捷；

注意：

使用 Bootstrap 并不代表不用写 CSS 样式，而是不用写绝大多数大家都会用到的样式

准备

下载Bootstrap

安装Bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
  <!-- 引入Bootstrap核心样式文件（必须） -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- 引入Bootstrap默认主题样式（可选） -->
  <link rel="stylesheet" href="css/bootstrap.theme.min.css">
  <!-- 你自己的样式或其他文件 -->
  <link rel="stylesheet" href="example.css">
</head>
<body>
  <!-- 你的HTML结构...... -->
  <!-- 以下代码，如果不使用JS插件则不需要 -->
  <!-- 由于Bootstrap的JS插件依赖jQuery，so 引入jQuery -->
  <script src="js/jquery.min.js"></script>
  <!-- 引入所有的Bootstrap的JS插件 -->
  <script src="bootstrap.min.js"></script>
  <!-- 你自己的脚本文件 -->
  <script src="example.js"></script>
</body>
</html>

Bootstrap文档

基础的Bootstrap模板

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Compatible

<meta http-equiv="X-UA-Compatible" content="IE=edge">
  • 此属性为文档兼容模式声明，表示如果在IE浏览器下则使用最新的标准渲染当前文档

视口

<meta name="viewport" content="width=device-width, initial-scale=1">
  • 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示
  • 目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；
  • 视口的宽度可以通过meta标签设置
  • 此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）
  • width:视口的宽度
  • initial-scale：初始化缩放
  • user-scalable:是否允许用户自行缩放（值：yes/no; 1/0）
  • minimun-scale:最小缩放initial-scale

第三方依赖

  • jQuery

    Bootstrap框架中的所有JS组件都依赖于jQuery实现

  • html5shiv

    让低版本浏览器可以识别HTML5的新标签，如header、footer、section等

  • respond

    让低版本浏览器可以支持CSS媒体查询功能

基础CSS样式

预置界面组件

JavaScript插件

JavaScript插件的依赖情况

如何使用Javascript插件

内置组件

深度自定义 Bootstrap

在线自定义

源码编译

LESS语言

R语言解决Lasso问题----glmnet包（广义线性模型）
orchidzouqr的博客
12-12 12万+
根据Hastie， Tibshirani和Wainwright的Statistical Learning with Sparsity（The Lasso and Generalizations），如下五类模型的变量选择可归结为广义线性模型，且可采用R语言的glmnet包来解决。这五类模型分别是： 1. 二分类logistic回归模型 2. 多分类logistic回归模型 3.Possion模
bootstrap笔记
10-07
无
展示如何用R处理稀疏矩阵和利用GLMNET包
热门推荐
jiabiao1602的专栏
12-30 1万+
展示如何用R处理稀疏矩阵和利用GLMNET包
Android必知必会-Android Studio下配置和使用Lambda
weixin_30420305的博客
06-28 301
移动端如果访问不佳，请访问–>Github版 背景 和朋友讨论 JAVA8 的新特性，聊到Lambda，正好在掘金上看到一篇相关的文章，结合资料，作一个总结，特别是记录下实际使用中遇到的问题。 什么是Lambda表达式 lambda表达式，它将允许我们将行为传到函数里。在Java 8之前，如果想将行为传入函数，仅有的选择就是匿名类，需要6行代码。而定义行...
BootStrap笔记
yue1915364525的博客
08-16 189
今日内容 1. Bootstrap Bootstrap： 1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2. 响应式布局。 * 同一套
Bootstrap 笔记
qq_42316056的博客
08-23 363
Bootstrap 小白笔记
Bootstrap笔记大全
认真学习前端的博客
03-07 2963
Bootstrap笔记大全
BootStrap笔记参考（全）-优极限
weixin_51717662的博客
04-16 2191
BootStrap 1.主要内容 2.BootStrap的安装和使用 2.1BootStrap介绍 2.2BootStrap特点 2.3下载与使用 3.布局容器和栅格网格系统 3.1布局容器 3.2栅格网格系统 4.常用样式 4.1排版 4.2 表单 4.3 缩略图 4.4 面板 5.BootStrap插件 5.1 导航 5.2分页导航 5.3 下拉菜单 5.4模态框
BOOTSTRAP笔记
m0_52552720的博客
01-23 290
BOOTSTRAP笔记 栅格系统, 2.巨幕组件 Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap 主要包含了栅格系统、全局CSS样式、组件和 JavaScript插件， 而 Bootstrap 的所有 JavaScript 插件都是用 jQuery 写的，所以 jQuery 必须在 Bootstrap 之前引入在HTML中，我们用标签引入外部样式(css)。 实例： <link rel="
bootstrap笔记，前端必备！
07-18
Bootstrap是一个非常流行的前端开发框架，由Twitter的设计师和开发者共同创建，主要用于快速开发响应式网站和应用程序。它基于HTML、CSS和JavaScript，提供了一套易于使用的界面组件和布局工具，使得开发者能够快速...
基于Matlab开发的人脸识别考勤系统_人脸识别考勤系统_人脸扫描分割预处理灰度化尺度归一化特征提取对比人脸库数据_输出姓名性别学号等识别结果_统计每人打卡次数时间_一键导出考勤表.zip
12-22
基于Matlab开发的人脸识别考勤系统_人脸识别考勤系统_人脸扫描分割预处理灰度化尺度归一化特征提取对比人脸库数据_输出姓名性别学号等识别结果_统计每人打卡次数时间_一键导出考勤表.zip
Jill5_KG-RNN_46300_1766321738791.zip
12-22
Jill5_KG-RNN_46300_1766321738791.zip
基于Java的学生选课与成绩管理系统的设计与实现
12-22
本系统旨在构建一套面向高等院校的综合性教务管理平台，涵盖学生、教师及教务处三个核心角色的业务需求。系统设计着重于实现教学流程的规范化与数据处理的自动化，以提升日常教学管理工作的效率与准确性。 在面向学生的功能模块中，系统提供了课程选修服务，学生可依据培养方案选择相应课程，并生成个人专属的课表。成绩查询功能支持学生查阅个人各科目成绩，同时系统可自动计算并展示该课程的全班最高分、平均分、最低分以及学生在班级内的成绩排名。 教师端功能主要围绕课程与成绩管理展开。教师可发起课程设置申请，提交包括课程编码、课程名称、学分学时、课程概述在内的新课程信息，亦可对已开设课程的信息进行更新或撤销。在课程管理方面，教师具备录入所授课程期末考试成绩的权限，并可导出选修该课程的学生名单。 教务处作为管理中枢，拥有课程审批与教学统筹两大核心职能。课程设置审批模块负责处理教师提交的课程申请，管理员可根据教学计划与资源情况进行审核批复。教学安排模块则负责全局管控，包括管理所有学生的选课最终结果、生成包含学号、姓名、课程及成绩的正式成绩单，并能基于选课与成绩数据，统计各门课程的实际选课人数、最高分、最低分、平均分以及成绩合格的学生数量。 资源来源于网络分享，仅用于学习交流使用，请勿用于商业，如有侵权请联系我删除！
热红外图像温度检测与处理系统_基于MatlabGUI的热红外图像灰度化加噪去噪算法对比温度标定带像素温度提取及可视化软件_用于工业设备故障诊断建筑能耗分析医疗体温筛查电.zip
12-22
热红外图像温度检测与处理系统_基于MatlabGUI的热红外图像灰度化加噪去噪算法对比温度标定带像素温度提取及可视化软件_用于工业设备故障诊断建筑能耗分析医疗体温筛查电.zip
MODWT：基于MATLAB的最大重叠离散小波变换（MODWT）算法的完整实现
最新发布
12-22
最大重叠离散小波变换（MODWT）是传统离散小波变换（DWT）的重要扩展，它通过最大重叠的滑动窗口方式进行多尺度分解，有效克服了DWT的平移敏感性和对数据长度的严格限制。MODWT的核心优势在于其平移不变性和冗余分解特性，能够更精确地捕捉信号的局部特征，同时提供丰富的时频局部化信息。与DWT相比，MODWT对信号长度没有严格要求（无需是2的幂次方），且每个分解层级都包含相同数量的系数，极大方便了多尺度分析与重构。该方法已广泛应用于信号去噪、特征提取、非平稳信号分析等领域，特别适合处理具有复杂时频特性的实时信号。
基于MATLAB实时视频处理与图像分析技术的驾驶员疲劳状态监控预警系统_眼部检测_人脸定位_眼睛状态识别_闭眼频率统计_疲劳驾驶判别_实时监测_报警提示_大巴司机安全驾驶保障_智能.zip
12-22
基于MATLAB实时视频处理与图像分析技术的驾驶员疲劳状态监控预警系统_眼部检测_人脸定位_眼睛状态识别_闭眼频率统计_疲劳驾驶判别_实时监测_报警提示_大巴司机安全驾驶保障_智能.zip
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值