发表于： 2019-05-03 23:14:45
1 916
今天完成的事情：
1.学习部分bootstrap
明天计划的事情：
1.看完bootstrap
遇到的问题：
无
收获：
1. 网格系统
移动设备优先
windth=device-width 宽度是设备屏幕宽度
initial-scale=1 初始缩放比例
shrink-to-fit=no 自适应手机屏幕宽度
bootstrap需要一个容器元素来包裹网站的内容
Bootstrap 4 网格系统有以下 5 个类:设置什么设备就会按他的屏幕宽度来，当可视窗口小于这个值时，就会上下堆叠排版，宽度一样，可以同时设置多个类。
.col- 针对所有设备 宽度最小
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
.container 类用于固定宽度并支持响应式布局的容器
.container-fluid类用于100%宽度，占全部视口(vierwport)的容器
网格最多分成12列，超过的col将在下行显示， 行用row，col（列）在row内
col-*-* 第一个*表示类型，第二个表示数字
col不设置数字的时候，自动平均分（几个col就分几个）
col设置数字的时候就按数字分，设置2就是20%，注意加起来不能超过12，没分完的会空着，或者设置一个不设数字的col
offset-*-* 偏移列，会把一个列左边距增加，范围1-11
2文字排版
Bootstrap 4 默认的 font-size：16px, line-height：1.5
font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif
此外，<p> margin-top: 0 、 margin-bottom: 1rem (16px)
<h1> (2.5rem = 40px) <h2>(2rem = 32px)
<h3>(1.75rem = 28px) 以此类推到<h6>
为display提供了4个控制标题样式： display-1(到4)，字体大到小
<small>字号更小，颜色更浅 <mark>黄色背景及有一定内边距
<blockquote> 对于引用的内容可以在 <blockquote> 上添加 .blockquote 类
<code>文字变红色 <kid>文字背景加黑
<pre>换行空格照常显示 <dl><dt><dd><dd><dt><dl>
3颜色
文本代表意义颜色类
text-muted柔和的文本
text（bg）-primary重要的文本（背景色） 蓝色
text（bg）-success执行成功的文本（背景色） 绿色
text（bg）-info一些提示信息的文本（背景色） 浅蓝色
text（bg）-warning警告文本（背景色） 橘色
text（bg）-danger危险操作文本（背景色） 红色
text（bg）-secondary副标题（背景色） 灰色
text（bg）-dark深灰色文字（背景色） 深灰色
text（bg）-light浅灰色文本（背景色） 浅灰色
text-white白色文本
4表格
<table> <thead> <tr> <th><td>
<thead>表头内容
条纹表格，把<thead>去掉 1,2,3都有
<thead><table>都去掉 1,3 有
table table-bordered 类为表格添加边框
table table-hover 类悬停时加上灰色背景
table table-dark 类为表格添加黑色背景
table table-sm 类较小的表格
table table-responsive 类响应式表格，屏幕宽度小于992px时创建滚动条，可以指定sm，md，lg，xl
以上都可以组合
table与thead都可以指定颜色与text的一样，少柔和白色副标题，例如table-primary
5图片形状 6jumbotron
img标签中添加以下：
alt=“ ”图片显示不出来时，显示你输入的文字
rounded 类让图显圆角效果 rounded-circle 类让图显椭圆
img-thumbnail 类让图外面带一层边框
float-left/fight 类让图左/右对齐
img-fluid 类让图片自适应（ img-fluid它设置了 max-width: 100%; 、 height: auto; ）
Jumbotron会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息， 里头可以放一些 HTML标签，也可以是 Bootstrap 的元素。
可以在div元素中添加jumbotron,带一点圆角
以下是不带圆角的写法
7信息提示框
信息提示框
div元素中 alert alert-success/跟text一样，除了柔和跟白色文本
提示框添加链接
div子级链接标签上，alert-link类来设置匹配提示框颜色的链接，默认链接是蓝色
关闭提示框
div元素中 alert alert-dismissible
子级按钮上添加 class="close" 和 data-dismiss="alert"
×是x标志，实体字符表示关闭，不是字母x
提示框动画
div元素中 alert alert-dismissible fade show关闭时淡入淡出效果
8按钮 9按钮组
button内type=“button”浏览器默认不同，写上这个可确定
按钮样式
button元素中 btn btn-颜色（重要次要）， btn-link（链接可跳转）
按钮可用于a，button，input元素上
按钮设置边框
button元素中 btn btn-outline-颜色
不同大小按钮
button元素中 btn btn-sm/lg（小号/大号按钮，不设置 按默认）
块级按钮
button元素中 btn btn-block
激活和禁用按钮disabled
按钮组，按钮间没有间隙
div元素内 btn-group，设置按钮组，用btn-group-sm/lg来设置按钮组的大小，不设置默认大小
垂直按钮组，垂直按钮间没有间隙
div元素内 btn-group-vertical
内嵌按钮组及下拉菜单
div中btn-group
button(显示的那个) btn drowdown-toggle(下拉图标)
data-toggle="dropdown"（点击触发下拉）
子元素div dropdown-menu
button内dropdown-item a标签的话可添加网址
10徽章
徽章
主要用于突出显示未读的项， 只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 <span> 元素上即可， 徽章可以根据父元素的大小的变化而变化
badge badge-default默认背景色
badge badge-pill显示药丸形徽章
徽章插到元素内
返回列表
评论