week10 day4 bootstrap
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了week10 day4 bootstrap，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2880字，纯文字阅读大概需要5分钟。
内容图文
week10 day4 bootstrap
一、简介
注意事项：
-
只有下载到本地的pycharm中, 才会有自动补全功能.
-
下载到本地: 含三个文件夹
css 只有bootstrap.min.css和bootstrap.css生效, 其他可以删除.
fonts 不能动
js 只有bootstrap.min.js和bootstrap.js生效, 其他可以删除. -
使用CDN: min表示用压缩的, 不用也行
js:<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
css:<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
二、使用bootstrap注意
使用bootstrap的js代码是依赖与jQuery的，也就意味着你在使用bootstrap动态效果的时候，一定要导入jQuery。
三、全局CSS样式
# 布局容器
.container
.container-fluid
# 栅格系统
行：.row 12份
列：.col-md .col-md-offset- 注意：使用col-系列默认左右有15px的padding
# 实现响应式布局
必加的四个参数：col-xs- col-sm- col-md- col-lg-
利用jq+js为含有col系列的标签添加所有的col系列显示响应式布局
# 排版
标记副标题：small
段落突出显示：.lead
文本居中：.text-center
缩略语：abbr[title='解释']{文本内容}
# 表格
table类属性：
.table 赋予基本的样式
.table-striped 增加斑马条纹样式
.table-bordered 增加边框
.table-hover 对鼠标悬停状态做出响应
tr类属性：
表格行颜色：.active .success .info .warning .danger
# 表单
表单标签(不针对radio,checkbox): .form-control
校验状态(给需要有这种颜色样式的父标签加): .has-success .has-warning .has-error
# 辅组类:
浮动: .pull-left .pull-right
内容块居中: .center-block
清除浮动: .clearfix
基于栅格参数，利用jq+js实现响应式布局
// 响应式布局实现
let reg = /col-.*?/;
let regNum = /[0-9]$/;
$('.row').children().each(function (index, tagObj) {
// console.log(tagObj);
$.each(tagObj.classList, function (index, classObj) {
// console.log(classObj);
// console.log(reg.test(classObj));
if (reg.test(classObj)) {
// console.log(classObj.match(regNum)[0]);
let getNum = classObj.match(regNum)[0];
tagObj.classList.add(`col-md-${getNum}`);
tagObj.classList.add(`col-xs-${getNum}`);
tagObj.classList.add(`col-md-${getNum}`);
tagObj.classList.add(`col-lg-${getNum}`);
// tagObj.classList.add(`col-md-${getNum} col-xs-${getNum} col-sm-${getNum} col-lg-${getNum}`);
}
// console.log(reg.test(classObj));
})
})
四、组件
4.1 图标
第一种：bootstrap自带
# 使用(提示: aria-hidden可写可不写)
<span class="图标名称" aria-hidden="true"></span>
第二种：fontAwesome中文网
# 使用CDN
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
# 使用图标:
<i class="fa 图标名称" aria-hidden="true"></i>
# 补充
1. fontAwesome: 与bootstrap比较兼容
2. 第一个也可以拿图标,只不过没有中文网第二个方便.
4.2 导航条
# 2种颜色:
白(默认): .navbar-default
黑(反转): .navbar-inverse
4.3 sweetAlert弹框
# 提示:
三个参数时对中文不太友好: swal('您还好嘛?', '我很好! 谢谢你的关心!', 'warning');
五、JavaScript插件
内容总结
以上是互联网集市为您收集整理的week10 day4 bootstrap全部内容，希望文章能够帮你解决week10 day4 bootstrap所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。