前端框架Bootstrap
时间:2020-05-21
本文章向大家介绍前端框架Bootstrap,主要包括前端框架Bootstrap使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
该框架已经帮你写好了很多页面样式,你如果需要使用,只需要下载它对应文件,之后直接cv拷贝即可
在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可
注意
bootstrap的js代码是依赖于jQuery的,也就意味着你在使用Bootstrap动态效果的时候,一定要导入jQuery
<div class="container"> 左右两侧有留白 </div> <div class="container-fluid"> 左右两侧没有留白 </div> # 后续在使用bootstrap做页面的时候 上来先写一个div class=container,之后在div内部书写页面
<div class="row"></div> 写一个row就是将所在的区域划分成12份 <div class="col-md-6 "> 获取你所要的份数 # 在使用bootstrap的时候 脑子里面一定要做12的加减法
.col-xs- .col-sm- .col-md- .col-lg- # 针对不同的显示器 bootstrap会自动选择对应的参数 # 如果你想要兼容所有的显示器 你就全部加上即可 # 在一行如何移动位置 <div class="col-md-8 c1 col-md-offset-2"></div> # col-md-offset-2右移两份
排版
bootstrap将所有原生的HTML标签的文本字体统一设置成了肉眼可以接受的样式
<table class="table table-hover table-striped table-bordered"> <tr class="success"> <td>1</td> <td>jason</td> <td>123</td> <td>study</td> </tr> <tr class="active">...</tr> <tr class="success">...</tr> <tr class="warning">...</tr> <tr class="danger">...</tr> <tr class="info">...</tr>
table-hover table-striped table-bordered 三种效果,可以自己尝试
<div class="container"> <div class="col-md-8 col-md-offset-2"> <h2 class="text-center">登陆页面 <span class="glyphicon glyphicon-user"></span></h2> <form action="" > <p class="has-error"> <span class="glyphicon glyphicon-heart"></span>username:<input type="text" class="form-control"></p> <p><span class="glyphicon glyphicon-heart"></span>password:<input type="text" class="form-control"></p> <!-- <p>--> <!-- <select name="" id="" class="form-control">--> <!-- <option value="">111</option>--> <!-- <option value="">222</option>--> <!-- <option value="">333</option>--> <!-- </select>--> <!-- </p>--> <!-- <p>--> <!-- <input type="checkbox" >111--> <!-- <input type="checkbox">222--> <!-- <input type="radio">333--> <!-- </p>--> <!-- <textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>--> <input type="submit" class="btn btn-primary btn-block"> </form> </div> </div> # 针对表单标签 加样式就用form-control class="form-control" """ <input type="checkbox">222 <input type="radio">333 checkbox和radio我们一般不会给它加form-control,直接使用原生的即可 """ # 针对报错信息 可以加has-error(input的父标签加)(效果如下方第二个图) <p class="has-error"> username: <input type="text" class="form-control"> </p>
class="form-control"加前效果如下
加后(占整行)
<a href="https://www.mzitu.com/" class="btn btn-primary">点我</a> <button class="btn btn-danger">按我</button> <button class="btn btn-default">按我</button> <button class="btn btn-success">按我</button> <button class="btn btn-info">按我</button> <button class="btn btn-warning">按我</button> <button class="btn btn-warning btn-lg">按我</button> <button class="btn btn-warning btn-sm">按我</button> <button class="btn btn-warning btn-xs">按我</button> <input type="submit" class="btn btn-primary btn-block"> 通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。
https://lipis.github.io/bootstrap-sweetalert/(下载过后用bootstrap-sweetalert-master\dis下的css和js)
swal('你还好吗?')
undefined
swal('你还好吗?')
undefined
swal('你还好吗?','我不好,想你了!')
undefined
swal('你还好吗?','我不好,想你了!','success')
undefined
swal('你还好吗?','我不好,想你了!','warning')
undefined
swal('你还好吗?','我不好,想你了!','error')
undefined
swal('你还好吗?','我不好,想你了!','info')
undefined
# 我们在后面的课程中 还会涉及到该部分内容
其他样式可查看bootstrap官网进行复制引用
原文地址:https://www.cnblogs.com/BoyGc/p/12932476.html
- Android 6.0 Permission权限与安全机制
- SpringBoot工作机制
- Android权限管理PermissionsDispatcher2.3.2使用+原生6.0权限使用
- SpringBoot中的IoC
- Sonar安装配置
- 《AngularJS深度剖析与最佳实践》推荐序
- JavaScript递归方法 生成 json tree 树形结构数据
- springboot使用hibernate validator校验
- 机器学习(三) ——k-近邻算法基础
- SpringBoot实战 之 异常处理篇
- ES6的Promise
- vue input输入框联想
- Sonar本地环境搭建
- Spark强大的函数扩展功能
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 掌阅iReader某站Python漏洞挖掘
- SAP Spartacus payment detail page的CMS模型
- wecenter反序列化造成任意SQL语句执行
- SAP Spartacus 读取payment detail数据的API
- SRCMS 多处越权+权限提升管理员漏洞
- SAP Spartacus把指定产品添加到购物车的API
- MyBatis源码解析之基础模块—Plugin
- php框架slim架构上存在XXE漏洞(XXE的典型存在形式)
- 个人博客搭建
- 安全箱子的秘密
- Linux 机器 CPU 毛刺问题排查
- phpwind 利用哈希长度扩展攻击进行getshell
- dotnet 构建 SourceRoot items must include at least one top-level item when DeterministicSourcePaths is
- Magicodes.IE 2.4版本发布
- EC2磁盘扩容-DiskPressure