week10 day4 bootstrap

week10 day4 bootstrap

• • 一、简介
  • 二、使用bootstrap注意
  • 三、全局CSS样式
  • 四、组件
  • • 4.1 图标
  • 4.2 导航条
  • 4.3 sweetAlert弹框
  • 五、JavaScript插件

一、简介

使用版本
下载本地
使用CDN

注意事项：

1. 只有下载到本地的pycharm中, 才会有自动补全功能.

2. 下载到本地: 含三个文件夹
   css 只有bootstrap.min.css和bootstrap.css生效, 其他可以删除.
   fonts 不能动
   js 只有bootstrap.min.js和bootstrap.js生效, 其他可以删除.

3. 使用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弹框

111

# 提示:             
三个参数时对中文不太友好: swal('您还好嘛?', '我很好! 谢谢你的关心!', 'warning');

五、JavaScript插件

111