BootStrap简单使用

平光明

2023-12-01

一、介绍

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(自动)	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列(column)数	12	12	12	12
最大列宽	自动	-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-header	div元素为导航条组件
navbar-brand	导航条最开头的文字，相当于导航条的文字
navbar-nav	扁平化设计的导航栏

在导航加入搜索条

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

响应式导航用到的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	描述
progress	div型的进度条容器
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秒一换

BootStrap简单使用

一、介绍

响应式布局

二、Bootstrap环境配置

布局容器

三、栅格系统

简述

栅格特点

屏幕尺寸设置

列

表格

表单

按钮

按钮组

图片

导航

进度条

轮播图

相关阅读

相关文章

相关问答

相关文档