bootstrap基础知识学习笔记

bootstrap基础知识学习笔记

在此就不做 bootstrap 的介绍了，近几年 bootstrap 越来越流行，一点不亚于 js 中的 jquery。

【引用文件】

【页面引用】

路径请自行规划

【标准模板】

hello bootstrap!

【css选择器优先级】

依次为

style 属性 

id 

class 

元素标签

【媒体查询与 container 源码】

该样式利用媒体查询，根据页面宽度不同，展示不同

.container {

padding-right: 15px;

padding-left: 15px;

margin-right: auto;

margin-left: auto;

}

@media (min-width: 768px) {

.container {

width: 750px;

}

}

@media (min-width: 992px) {

.container {

width: 970px;

}

}

@media (min-width: 1200px) {

.container {

width: 1170px;

}

}

【12栅格系统】

.row: 一行

.col-md-*: * 为列号

.col-md-offset-*: 列向右移几列的宽度

.col-md-push-*: 向右推（移动）几列

.col-md-pull-*: 向左拉（移动）几列

.clearfix visible-xs: 清除浮动，只在小型屏幕生效

【基础组件5种颜色】

primary(重点蓝)

success(成功绿)

info(信息蓝)

warning(警告橙)

danger(危险红)

【按钮】

btn-primary

btn-success

按钮大小分为以下几个尺寸

xs: 超小 

sm: 小型 

缺省: 普通 

lg: 大型

btn-primary

btn-success

btn-success

btn-success

【进度条】

进度条需js进行进度变动

45% Complete

【下拉框】

我的书籍

JavaScript 编程精解

JavaScript 设计模式

JavaScript 启示录

深入理解 bootstrap3

【选项卡】

首页

个人资料

我的书籍

javaScript 编程精解

javaScript 设计模式

javaScript 启示录

深入理解 bootstrap

点击 “首页”显示

点击 “个人资料”显示

点击 “javaScript 编程精解” 显示

点击 “javaScript 设计模式” 显示

点击 “javaScript 启示录” 显示

点击 “深入理解 bootstrap3” 显示

data-toggle="tab" href="#home"

可以使用

data-toggle="tab" data-target="#home"

替代，效果相同，js 默认先检测 data-target 属性，如果没有，再检测 href 属性，如果还没有，则默认为父元素

【表格】

table-striped : 斑马线

table-bordered : 边框

table-hover : 悬浮

table-condensed : 表格紧凑

注意，斑马线与 鼠标悬浮样式，颜色与 白色很接近，所以可能会误认为 table-striped 与 table-hover 没有生效，不起作用，

如果需要明显显示，我们需要重写样式颜色

/** 斑马线 **/

.table-striped > tbody > tr:nth-child(odd) > td,

.table-striped > tbody > tr:nth-child(odd) > th {

background-color: #EFEFEF;

}

/** 悬浮 **/

.table-hover > tbody > tr:hover > td,

.table-hover > tbody > tr:hover > th {

background-color: #DFE8F6;

}

【元素的隐藏与显示】

【响应式导航条】

Brand

Toggle navigation

主页

作品

下拉菜单

子菜单1

子菜单2

图书

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程

Bootstrap实战教程

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。