bootstrap 学习
初衷,
经常使用bootstarp模板,简单大气,且兼容手机端 但是用不好经常会丢失一些模板的东西。所以需要系统的学习下bootstrap了。不求能设计好的页面模板,但求能用的顺手。
学习教程以慕课网教程为准。
day1 2018年4月26日
day1-1.html 1.bootstrap 封装了一系列常用的按钮,标签,布局之类的东西 2.可以通过class + 相应的名字进行调用
day1-2.html 1.bootstrap 对标题的标签做了优化 2.非标题标签可以使用<class="h1">,<class="h2">,<class="h3"> 之类的进行调用
day1-3.html 副标题,对于一级标题的副标题 在bootstrap中可以使用标签进行标记
day1-4.html 对段落做设置,bootstrap中的全局样式字体为14px,行高约为20px
day1-5.html 对于段落中的内容 class="lead" 进行强调
day1-6.html 对段落内容进行加强,普通元素可以使用font-weight 设置进行加粗. 对于 标签进行加粗
day1-7.html 在bootstrap 中可以通过 对字体做加斜处理
day2 2018年4月27日
day2-1.html 对字体进行颜色设置, text-muted 浅灰色,text-primary 深蓝色, text-success 绿色, text-info 浅蓝, text-warning 黄色, text-danger 红色
day2-2.html 文本对其,bootstrap 对齐做了简化处理 text-left 左对齐, text-center 居中对齐, text-right 右对齐, text-justify 两端对齐
day2-3.html 对列表做简单的讲述
无序列表
- ..
有序列表
- ..
定义列表
- ..
- ..
day2-4.html
对于无序列表,有序列表中的点或数字可以通过 class="list-unstyled" 进行去除
day2-5.html 在bootstrap 中可以通过list-inline 进行内联表设置,内联表一般是用来做水平导航的。 bootstrap 4 中list-inline不生效,bootstrap3 可以正常使用
day2-6.html 定义列表 ,bootstrap 调整了行边距
day2-7.html bootstrap 在自定义列表中可以受用 class=“dl-horizontal” 来进行水平调整
day2-8.html
bootstrap 代码支持
适用于单个或多个单词类的代码
用于显示用户输入的代码
如果代码量过多有不想占用较大的空间可以使用class="pre-scrollable" 进行滚动显示
day2-9.html bootstrap 表格,bootstrap 提供了不同类型的表格如下 1.class="table" 基础表格 2.class="table-striped" 斑马线表格 3.class="table-bordered" 带边框表格 4.class="table-hover" 悬停高亮表格 5.class="table-condensed" 紧凑型表格 6.class="table-responsive" 响应式表格
day2-10.html bootstrap 为表格设置了不同颜色的类 class="active",class="success",class="info",class="warning",class="danger"
#day3 2018年4月28日 day3-1.html 基础表单 水平表单可以使用 class="form-horizontal" 进行设置 class="form-group" 效果类似列表里面的row
day3-2.html 内联表单,将表单控件显示在一行 class="form-inline"
day3-3.html 表单下拉选择框,使用mutiple表示多重选择
day3-4.html 复选框 checkbox 单选择按钮 radio
day3-5.html 表单控件大小 class="input-lg" 控件变大 class="input-sm" 控件变小 disable 表单禁止选择或输入