Bootstrap(一)使用准备

最新推荐文章于 2022-04-24 17:13:12 发布
最新推荐文章于 2022-04-24 17:13:12 发布
阅读量113 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/zerobit/blog/3074430
版权

下载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模板

<!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>

文档兼容模式

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

视口viewport

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

条件注释

<!--[if lt IE 9]>
	<script src="lib/html5shiv.min.js"></script>
	<script src="lib/respond.min.js"></script>
<![endif]-->
  • 条件注释的作用就是当判断条件满足时，就会执行注释中的HTML代码，不满足时会当做注释忽略掉

第三方依赖

  • jQuery

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

  • html5shiv

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

  • respond

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

转载于:https://my.oschina.net/zerobit/blog/3074430

chuzhong1074
关注
web---HTML基础知识
Allure泽宇的博客
06-11 5590
HTML基础知识内容总结
bootstrap
weixin_30575309的博客
12-24 65
Start with this basic HTML template, or modify these examples. We hope you'll customize our templates and examples, adapting them to suit your needs. Copy the HTML below to begin working with a m...
HTML入门学习
qq_46556545的博客
03-23 4081
基本标签 文档声明 <!DOCTYPE html> <!--文档声明，表示这是一个HTML页面--> HTML标签 <html> </html> <!--标签对，告诉浏览器这个页面的范围--> head标签 <head> </head> <!--标签对，是网页的头部，用于定义一些特殊的内容--> body标签 标题标签 段落标签 换行标签 水平线标签 字体样式标签 常见特殊符号
HTML基础
weixin_43752912的博客
04-24 4145
HTML介绍 客户端和服务端 基础标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>这是一个网页</title> </head> <body> Hello World<br>你好 <p>这是第一个段落</p> <p>这是第二个段落</p>
HTML基础（一）
牢骚太盛防肠断，风物长宜放眼量
05-17 7605
本文是作者在学习html过程中对知识的初步整理 1.第一个程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的第一个HTML页面</title> </head> <body> hello HTML,I am shuaigeliu </body> </html> htm.
flask-bootstrap, 在 Flask 中，准备使用 Twitter Bootstrap 进行使用.zip
10-10
flask-bootstrap, 在 Flask 中，准备使用 Twitter Bootstrap 进行使用 烧瓶引导 烧瓶引导包 Bootstrap 插件一个扩展，主要由一个名为'Bootstrap'的蓝图组成。 它还可以创建从CDN服务 Bootstrap的链接，并且在你的...
AngularJs bootstrap搭载前台框架——准备工作
10-21
首先，我们需要了解如何准备AngularJS和Bootstrap的环境。如果你还不熟悉这两个技术，AngularJS提供了一个模型-视图-控制器（MVC）架构，用于管理应用的逻辑，而Bootstrap则专注于界面的布局和美化。你可以通过官方...
JS组件Bootstrap ContextMenu右键菜单使用方法
10-22
Bootstrap ContextMenu 是一个基于 Bootstrap 框架的 JavaScript 插件，用于在网页上创建和管理自定义右键菜单，即上下文菜单。这种菜单可以在用户在页面上使用鼠标右键点击时触发，通常用于提供快捷操作或者对页面...
bootstrap-5.3.0.zip
最新发布
02-21
"dist" 文件夹的内容是为生产环境准备的，可以直接引入到项目中使用。在这个目录下，你可以找到如"css"子目录，包含预处理的Bootstrap CSS文件（如bootstrap.min.css）；"js"子目录，包含压缩和未压缩的JavaScript...
Bootstrap图片轮播组件使用实例解析
09-02
本文将详细讲解如何使用Bootstrap实现一个功能完备的图片轮播组件。 首先，我们来看一下基本目标。创建一个Bootstrap Carousel的主要目的是在网页上展示一组图片，当用户滚动或点击导航箭头时，图片能够自动或手动...
从零开始开发一个语音交互测试站点（三）
Burning__M的博客
09-30 227
这篇记录一下主页面的开发过程： 由于采用了django的框架，所以admin管理、用户管理不需要自己搞了，后续可以将admin升级为xadmin，有时间再说。 Login_and_account的开发，直接上代码。 1、视图views.py from django.shortcuts import render, redirect from django.contrib import auth f...
HTML5 入门：一个最简单的HTML页面（doctype、meta、Head、标签的使用)
weixin_34402408的博客
01-23 669
HTML5的&lt;!doctype&gt;声明怎么写 这是HTML 4.01的doctype： &lt;!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; XHTML 1.0的doctype。它的长度跟HTML 4.01的差不太多： &lt;!...
一份你可以在 <head> 里设置的列表
weixin_33716941的博客
06-10 564
A list of everything that could go in the <head> of your document github 原地址：https://github.com/joshbuchea/HEAD（最新版的可能在该地址） 目录 Recommended Minimum Elements Meta ...
Bootstrap学习笔记
weixin_30547797的博客
11-17 92
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Basic template： 1 <!DOCTYPE html> 2 <html lang="en"> 3 &lt...
（一）最小可行化应用
weixin_30411997的博客
06-26 125
在这一章里，主要用一个小demo来讲述了一个web应用开发的过程 拿到原型图后，我们要在一定时间内写一个比较简单的首页或者等等时，最简单的方法就是利用模板，我们最常用的就是bootstrap，这是到现在位置用的最多且最靠谱的一个框架，所以我们要先明白他是怎么用的 bootstrap的使用 1. 现在官网上下载下来，点击的是中间的‘下载源码’，之后就是解压 2. 初始化项目 （1）先创...
Spring security 集成ldap服务，实现统一验证
窗前废雨
08-21 6933
先说一下Spring security 是基于spring的一个强大的安全验证模块，它提供了一组可以在Spring应用上下文中配置的Bean，充分利用了Spring IoC，DI（控制反转Inversion of Control ,DI:Dependency Injection 依赖注入）和AOP（面向切面编程）功能，为应用系统提供声明式的安全访问控制功能。 LDAP是轻量目录访问协议，基于tc
FastAPI学习（二）——FastAPI+Jinjia2模板渲染网页（跳转返回渲染页面）
热门推荐
weixin_43605788的博客
02-23 1万+
通过前面的学习，现在我们来看看如何渲染网页，别总是一串原始字母。 官方文档位置： https://fastapi.tiangolo.com/advanced/templates/ 首先，必须注意的是，FastAPI这个Python Web框架并没有网页模板，但是也正因为如此，它可以使用任何网页模板。 官方例子是jinjia2 于是，安装： pip install jinja2 aiofiles ...
Nodejs学习五（CRUD）
Wu_JingYi0829的博客
03-13 1104
一、路由设计 二、处理路由模块 三、代码 views-edit： <!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, init
Bootstrap方法下随机准备金进展与R实现：理论与实证
本文主要探讨了"基于Bootstrap方法的随机性准备金进展法及R实现"这一主题，由南开大学经济学院的张连增和段白鸽两位作者共同撰写。他们从传统准备金进展法出发，提出了一个创新思路，即如何将原本确定性的准备金进展...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值