Bootstrap3(初学笔记)

最新推荐文章于 2024-06-21 16:29:17 发布

迷途小白菜

最新推荐文章于 2024-06-21 16:29:17 发布

阅读量137

点赞数

文章标签： bootstrap html

本文链接：https://blog.csdn.net/weixin_45494831/article/details/104576012

版权

Bootstrap3

使用教程

下载框架文件
- Bootstrap3下载地址
  - 下载用于生产环境的Bootstrap
- Bootstrap 专门构建了免费的 CDN 加速服务(注意此种方法无代码提示,且需网络)

<link rel="stylesheet" 
href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 相当于`引入bootstrap核心css文件` -->

引入页面

<!-- 引入bootstrap核心css文件 -->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<!-- 引入jqurey,必须在bototstrap.js之前引入,存在依赖 -->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- 引入bootstrap.js文件 -->
<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

常用类

container:用于固定宽度并支持响应式布局的容器。
- container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

颜色区分

default 默认的(白色)
success 成功的(绿色)
info信息(蓝色)
waring
danger危险(红色)
primary
(btn-info(按钮颜色) bf-info(背景颜色)

尺寸区分

lg
md
sm
xs
(btn-lg(大号按钮))

栅格系统

栅格系统写在 .row 下
xs : 0 - 768
sm : 768 - 992
md : 992 - 1200
lg : 1200 -

栅格系统位移

col-xx(尺寸)-offset-*
在xx屏幕尺寸下向右偏移*列

显示和隐藏

hidden-xx
只在xx尺寸下隐藏
visible-xx
只在xx尺寸下显示

js插件调用

最好的调用方式 date 绑定在标签上
- modal:date-toggle=“modal” date-target="#id"(a标签可通过 href="#id")
唤起模态框

	$('#myModel').model('show').model('hide')

标签栏

$('tabs a').click(function(){
	$(this).tab('show')
})

弹出框
要初始化

	$(function(){
	$('[date-toggle="popover"]').popover()
	//通过标签属性选择器选择到弹出框进行初始化
})

按钮点击状态切换

$('button').click(function(){
	$(this).button('loading')
	$(this).button('reset')
	$(this).button('toggle')
})

迷途小白菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap3(初学笔记)

Bootstrap3使用教程下载框架文件Bootstrap3下载地址下载用于生产环境的BootstrapBootstrap 专门构建了免费的 CDN 加速服务(注意此种方法无代码提示,且需网络)<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bo...
复制链接

扫一扫