BootStrap简单使用

最新推荐文章于 2024-04-30 15:44:23 发布
最新推荐文章于 2024-04-30 15:44:23 发布
阅读量3.6k 收藏 39
点赞数 5
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liustreh/article/details/123705321
版权

BootStrap

一、介绍

​ Bootstrap基于HTML、css、JavaScript的前端框架

​ 此框架定义一套CSS样式和央视对应的JS代码。（对应的样式有对应的特效）

​ 开发人员只需要编写HTML架构，添加Bootstrap固定的class样式，就可以完成效果的实现

​ 作用：Bootstrap使得web开发更加便捷，高效

​ 支持响应式开发，解决了移动互联网前端开发问题

响应式布局

​ 一个网站的展示能够兼容多个终端（手机、ipad、PC）而不需要为每个 终端单独做一个展示版本

​ 响应式布局，使得网站适用一套样式，就可以在不同分辨率下展示不同 的舒适效果。大大降低了网站开发维护成本，并且给用户带来更好的体 验

​ 此概念专门解决移动互联网浏览而产生的

二、Bootstrap环境配置

​ 下载地址：Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com)

​ 下载之后的目录结构

​ css、js、fonts

​ 有了这些结构把结构里的文件导入项目里，通过引入文件标签调用就可以 使用了

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

​ 这是一个bootstrap的通用简洁模板，需要改成本地调用文件，就是src的值

模板中的
<meta name="viewport" content="width=device-width, initial-scale=1">

 viewport:视口  浏览器上 网页内容 可视区域
 视口作用：用于移动设备将大型页面进行比例缩放显示
 以下的设置只在移动设备上生效
 width=device-width 设置视口的宽度，device-width设备宽度
 initial-scale=1 初始化缩放设置 移动设备打开网页时，缩放级别 100%

视口的常见设置

width=device-width视口的宽度，大多手机浏览器视口的宽度是980
device-width表示采用设备的宽度
例如手机是5.5寸，那么视口也采用5.5寸宽度
initial-scale=1移动设备上，打开页面时的初始化缩放级别
取值：1-5 1表示100%，5表示500%
minmum-scale=1移动设备页面最小的缩放级别
maximum-scale=1移动设备上，页面可以最大缩放级别
user-scalable=no移动设备上，页面禁止缩放
如果设置”user-scalable=no",则"minimum-scale"
和"maximum-scale"无效
布局容器

​ Bootstrap至少需要一个布局容器，才能为页面内容进行封装和方便的样式控制 相当于一个画板

​ 还是打开官方文档，全局css样式 》概述》 布局容器

​ 任意元素使用了布局容器的样式，都会成为一个布局容器，建议使用div作为布局容器

​

.container类用于固定宽度并支持响应式布局的容器
特点：居中、两端留白
/
…
/
.container-fluid类用于100%宽度，占据全部视口(viewport)的容器
/
…
/

三、栅格系统

简述

​ 为了方便在布局容器中进行网页的布局操作

​ BootStrap提供一套专门用于响应式开发布局的栅格系统

​ 栅格系统将一行分为12列，通过设定元素占用的列数来，布局元 素在页面上的展示位置

​ 栅格系统：一行自定分为12列 通过设定元素占用一行上多少列， 即可完成元素在页面上的实现

栅格特点

​ 行（row）必须包含在更多操作.container或者.container-fluid容 器内

​ 行使用的样式".row",列使用样式"col-* - *"元素内容应当放置列元 素上

​ 基本的书写内容方式必须是，容器 — 行 —列 ----内容

​ HTML表格：定义表格 行 单元格

​ 栅格参数：col-屏幕尺寸-占用列数 col - lg - 1-12

​ 列元素的书写顺序，决定布局顺序，先写的列元素会被布局到行 上 列元素的占用列数，定义列元素的大小

屏幕尺寸设置
超小屏幕(手机 <768px)小屏幕 (平板 >= 768px)中等屏幕(桌面显示器>=992px)大屏幕 大桌面显示器（>=1200px）
栅格系统行为总是水平排列开始是在堆在一起开始是堆在一起的，当大于这些值时将变为水平排列C
.container最大宽度None(自动)750px970px1170px
类前缀.col-xs-.col-sm-.col-md-.col-lg-
列(column)数12121212
最大列宽自动-62px-81px-97px
槽(gutter)宽30px每列左右均有15px
可嵌套是
偏移是
列排序是

屏幕尺寸简述：

large：lg 大屏幕，一般pc尺寸

medium：md 中等屏幕 小pc尺寸

small:sm:sm 小屏幕，ipad尺寸

xsmall：xs 超小屏幕，智能手机尺寸

设置屏幕尺寸时 的注意事项

若设置某个屏幕尺寸的样式，那么比该尺寸的屏幕，会沿用该设置，比该尺寸小的屏幕，会默认一个元素占12列的设置

例如：设置了col-md-4，那么相当于也设置了col-lg-4

​ 其他屏幕尺寸均默认为col-sm-12，col-xs-12

常用CSS样式类

Class描述
container容器样式类
form-group表单组类
form-control表单控制类
btn btn-primary按钮类
列
Class描述
container-fluid将显示区域设为与屏幕等宽
col-md-offset-X相对左边偏移X格
col-md-push-X向右移动X格
col-md-pull-X向左移动X格

列嵌套指的是可以在列插入一行，这行把这列再分成12份

表格
Class描述
.table-striped条纹状表格
.table-bordered带边框的表格
.table-hover鼠标悬停变色的表格
.table-condensed紧缩型表格
.table-responsive响应式表格

行样式

Class描述
info天空蓝
warning黄色
success绿色
danger粉色
active灰色
表单

用到的标签

字段标签
登录说明标签和标题类似，但是下面添加了一条分隔线
placeholder标签的属性 用来输入框显示提示信息

css样式类

form-group窗口表单控件(.class)之间添加15px的间距
form-control控制的宽度设置为100%
btn btn-default设置按钮样式为默认样式
has-feedback插入小图标
<span class=”图标名 form-control-feedback” >在span中插入指定的图标名
按钮

按钮的样式类

class描述
btn-default默认样式
btn-primary蓝色
btn-success绿色
btn-info天空蓝
btn-warning橙色
btn-danger红色
btn-link无样式

不同分辨率和按钮大小

class描述
btn-lg按钮大
btn-sm按钮中
btn-xs按钮小
btn-block按钮与屏幕等宽
按钮组
class描述
btn-group按钮组
btn-toolbar按钮组工具栏（即按钮组的按钮组）
btn-group-lg btn-group-sm btn-group-sx
btn-lg btn-sm btn-sx		成组指定大中小
单个指定大中小
btn-group-vertical纵向排列
图片
class描述
img-rounded圆片加圆角
img-circle图片截成圆形
img-thunbnail图片加外边框 且为响应式
img-responsive图片单纯为响应式
导航
class描述
class=” nav nav-tabs”选项卡式导航
class=” nav nav-pills”胶囊式导航
class=”nav nav-pills nav-stacked“纵向堆叠式导航
class=”nav nav-pills nav-justified”自适应导航
首页二级导航 就是导航里的一个li嵌套着一个导航
navbar navbar-default默认导航样式
navbar-headerdiv元素为导航条组件
navbar-brand导航条最开头的文字，相当于导航条的文字
navbar-nav扁平化设计的导航栏

在导航加入搜索条

navbar-form这个form 创建在了navbar导航栏
navbar-rightnavbar上的组件靠右对齐

响应式导航用到的class

navbar-inverse指定导航条组件为黑色主题
navbar-toggle设置button元素为导航条组件的切换钮；
collapse设置button元素为在分辨率小于768px时才显示 collapse折叠面板的意思
.navbar-responsive-collapse注意前面的.点要有，不然无效
sr-only
icon-bar
collapse navbar-collapse navbar-responsive-collapse导航响应折叠面板
nav navbar-nav设置ul为导航条组件内的列表元素;
进度条
class描述
progressdiv型的进度条容器
progress-bar进度条进度显示的div
progress-triped带条纹的进度条
active动画进度条
轮播图
class描述
data-ride=”carousel”图片加载成功后马航可以使用
carousel slide轮播
carousel-inner图片不显示active在哪张上，哪张显示
carousel-indicators

小圆圈

carousel-indicators
data-slide-to=”0”
data-target=”#carousel_container”

左右按钮

prev向前一个
left carousel-control向左动
right carousel-control向右动
data-interval=’1000’自动播放1秒一换
凌北辰
关注
  • 5
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BootStrap使用
xiaoxiao1777的博客
12-28 349
1.下载 用于生产环境的BootStrap，此页面上方标题栏：全局css样式，可以在线查看想要的样式效果，下载好的里面有三个文件夹：css，js，fonts 2.复制到项目的resources-static下 3.将静态资源css和js引入到自定义的html页面中 3.1css和js文件分为，如：bootstrap.css和bootstrap.min.css，这两个有啥区别？ ...
BootStrap实现一个简单的界面
qq_35349167的博客
09-24 956
创建html文件 导入相关BpptStrap的css 和 js 创建img文件夹用来存储图片 准备就绪~~ 上代码： <!DOCTYPE html> <html> <head> <title>首页</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <lin
JavaWeb——【Bootstrap】——一篇文章入门Bootstrap，值得你一看！
奔跑的狮子
01-06 1064
Bootstrap 文章目录Bootstrap1.Bootstrap1.1.概述1.2.Bootstrap 包含的内容1.3.官网&下载1.4.文件结构1.4.1.源码目录1.4.2.预编译版1.5.环境配置1.5.1.CDN 方式引入2.Bootstrap使用2.1.Bootstrap中的排版2.1.1.标题2.1.2.文本2.2.Bootstrap中的表格2.2.1.基本实例2.2.2...
Bootstrap教程——快速上手（最给力的前端框架）
只想AC的博客
06-03 5070
Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码
前端框架---Bootstrap的使用
最新发布
m0_74249162的博客
04-30 845
Bootstrap是一个来自Twitter的前端开发框架，它基于HTML、CSS和JavaScript，以其简洁灵活的特性使得Web开发更加快捷。基本结构网格系统：Bootstrap使用12列网格布局，可以快速构建响应式布局。通过添加class到HTML元素上，可以指定元素在不同屏幕宽度下的列数和偏移量。CSS样式：Bootstrap包含了大量的预设CSS样式，如排版、颜色、按钮、表单等，可以快速地为网页添加统一的样式。JavaScript插件。
BootStrap的使用（图文详解）
热门推荐
m0_46396424的博客
08-30 2万+
BootStrap的使用 ​ Bootstrap使用四步曲：1、创建文件夹；2、创建html骨架结构；3、引入相关样式文件；4、书写内容 一、创建文件夹结构 1、创建文件夹 ​ 按照以往的习惯创建文件夹。 2、下载Bootstrap ​ 在官网下载压缩包，选择下载生产环境的压缩包，将其解压到项目目录下，但是不能覆盖你自己建的文件夹。 二、创建html骨架结构 ​ 先正常搭建一个html页面，然后再选中“基础模板”中的所需代码，复制到你自己搭建的html页面中。 三、引入相关样式文件 ​ 使用lin
vue使用Bootstrap的详细方法
一步一个脚印，踏实努力，向着目标前进
08-24 8961
或者main.jsmain.js这将导入Bootstrap的CSS文件，使您可以在Vue组件中使用Bootstrap的样式。在上面的示例中，我们在Vue组件的模板中使用了Bootstrap的按钮组件。按钮的样式类名是。请注意，您可能还需要在Vue组件中导入其他Bootstrap的JavaScript文件，以便使用一些需要JavaScript支持的组件，如弹出框、标签页等。您可以在需要使用这些组件的Vue组件中导入相关的JavaScript文件。
BootStrap基本使用
m0_60027772的博客
09-18 2万+
html超文本标记语言，多出来的html为超文本标记语言，是一种标识性语言css为层叠样式表css为层叠样式表，为前端三剑客之一
Bootstrap table简单使用总结
08-31
以下是对Bootstrap Table简单使用的详细介绍： 1. **基本构造**： Bootstrap Table可以通过HTML和JavaScript两种方式来构建。HTML构造时，需要在`<table>`标签内设置特定的属性，如`data-toggle="table"`用于启用...
Bootstrap BootstrapDialog使用详解
08-31
- 最简单的显示对话框的方法是`BootstrapDialog.show()`，只需传入一个包含消息的参数，如`BootstrapDialog.show({ message: 'Hi Apple!' })`。 - `BootstrapDialog.alert()`用于快速创建警告对话框，例如`...
Bootstrap简易使用指南
12-20
本篇文章将详细讲解Bootstrap的一些基本使用方法和关键特性。 1. **全局样式与栅格系统** - **全局样式**：Bootstrap 使用 HTML5 的 doctype，并在 `scaffolding.less` 中定义全局样式。为了保持浏览器一致性，...
Bootstrap table使用方法记录
08-29
Bootstrap Table 的基本使用非常简单，只需要在 HTML 代码中添加一个 `<table>` 元素，并将其 id 设置为 `table`，然后使用 JavaScript 代码来初始化该表格。下面是一个基本的示例代码： HTML 代码： ```html ...
bootstrap基础
qq_46670673的博客
04-21 949
bootstrap 基础 学习目标 1.熟练掌握栅格系统 2.熟练掌握bootstrap常见组件 一、bootstrap概述 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 相关案例 bootstrap特点： html 5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。 移动设备优先 Bootstrap 是移动
【前端】如何使用bootstrap框架？
tutu6663的博客
11-19 202
关于框架，我的理解是，给开发者提供html代码模块（官网有），css样式表（如包里的bootstrap.min.css）和javascript脚本（如bootstrap.min.js）等之所以出现框架这个东西，在我的理解中，是因为对于一般开发者而言，为页面重新写css样式，需要时间，其实也就是设计问题，与其说自己从零开始设计元素编排和样式，直接使用经过市场检验过的优秀UI框架，或许是个不错的选择。
Bootstrap的使用
weixin_73200795的博客
07-23 459
栅格系统是通过一系列的行（row）与列（column）的组合来创建页面布局，设置的内容可以放入这些创建好的布局中。
bootstrap入门教程
专治八阿哥的孟老师
03-31 6313
bootstrap简介：​ bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。​ bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。boostrap特点​ 1 ) 移动设备优先：自 bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。浏览器支持：​​ 2 ) 所有的主流浏览器都支持 bootstrap。​​ 3 ) 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 bootstrap。
BootStrap的使用教程，适合新手小白！！
m0_62309118的博客
09-28 6541
1.bootStrap怎么用？ 第一步、链接: 官网 点击红线边框处即可跳转到下载页面，有三个东西可以给我们选择，由于我们现在处于初级使用阶段，或者说我们直接用在生成环境下，我们下载第一个就好： 下载成功后可以得到一个.zip的文件，解压后我们可以得到一个包含css、fonts和js的文件夹，ok，准备工作我们就做好了。 现在要怎么用呢，一头雾水吧，我们新建一个文件夹，命名为test，将刚刚三个文件夹复制到test文件夹中，现在用sublime打开刚刚的文件夹，点击file-open folder，选择
bootstrap怎么使用
06-06
Bootstrap 是一个流行的前端框架，可以帮助开发者快速搭建网页界面。下面是使用 Bootstrap 的简单步骤： 1. 下载 Bootstrap：可以从官网下载或使用 CDN 引入。 2. 在 HTML 文件中引入 Bootstrap：在 `<head>` 标签中添加以下代码： ``` <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> ``` 3. 在 HTML 文件中使用 Bootstrap：可以使用 Bootstrap 提供的样式和组件来构建页面，例如： ``` <div class="container"> <h1>Hello, Bootstrap!</h1> <button class="btn btn-primary">Click me!</button> </div> ``` 以上是基本的使用方法，你可以在官网上查看更多详细的文档和示例。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值