Bootstrap一周学习小结

首页 > 代码库 > Bootstrap一周学习小结

2024-08-24 06:11:08 224人阅读

一、响应式布局

1、bootstrap是自适应mobile和web，会根据分辨率大小而自适应的一个代码库，Bootstrap定义了很多js和css的效果，把这些效果集成为多个API，供在使用时调用。

2、在用bootstrap做基本的页面也要在head标签内引用bootstrap的库，bootstrap的js库是以jQuery为核心的

<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="bootstrap-origin/css/bootstrap.min.css"><script type="application/javascript" src="bootstrap-origin/jquery-2.1.1.min.js"></script><script type="application/javascript" src="bootstrap-origin/js/bootstrap.min.js"></script>

二、框架解析

1、移除body的margin，设置body的背景颜色为白色。

2、最重要的一方面是引入了栅格系统，其中栅格系统实现原理如下：

一行（row）必须在.container中

使用行在水平方向创建列组

具体内容放在列内

内置像素.row和.col-xs-4占4列

三、排版基础

排版前的基础：

HTML5文档类型

移动设备优先

响应式图片 class="img-responsive" 浏览器变，图片像素跟着变

排版与链接：默认改变<a>标签的样式

标题：

h1--h6: 36px-12px 每次递减6px

.h1--.h6:36px-12px 每次递减6px 没有margin-top和margin-bottom

<small>h1-h3占60% h4-h6占60%

页面主题：

body：字体和背景的改变

p全局样式：给p强调，用class=lead

对齐方式：右对齐 class=lead text-right/center/left

强调文本：

<em>

缩略语：

<abbr>鼠标移动到abbr会有一个title的提示 class="initialism" 弹出的提示的字体大小会变成原字体的90%，字母会变成大写的

地址元素：

<address>地址标签 margin-bottom变成20px font-style变成normal line-heigh变成1.42

引用：

四、列表与代码

列表：

无序列表：

<ul>

<ol>

</ol>

</ul>

有序列表：

<ol>

<ul>

</ul>

</ol>

这两个的margin-bottom有10个像素

取点列表：给li标签的父级加class

class=list-unstyled

内联列表：给li标签的父级加class

class=list-inline

dl列表：

class=dl-horizontal

代码：

代码：<code> 显示可以是代码高亮显示

输入：<kbd> 当用户输入按键时可以用kbd来高亮

程序：<pre> 显示可以是代码形式

变量：<var> 显示是变量形式

程序结果：<samp> 显示是特殊显示

五、表格样式

带条纹的样式：

带边框的表格：

带边框的表格、带条纹的样式 ：

鼠标悬停效果：

紧促表格：

响应式布局：

六、表单样式

基本表单：只是对margin的一些微调

<div class="form-group"> 设置组件之间的间距为15px margin-bottom:15px

<input...class=form-control> 占满容器的100%

</div>

内联表单：

<form class="form-inline"> //水平排列

<label class="sr-only">//隐藏<label>//前的文字效果

<form method=post/get> //get方式提交的数据量有限制，post方式除了普通提交

横向表单：

<form class="form-horizontal" role=from> //

<label class="col-sm-2" control-label> 用户名</label>//control-label设置为响应式布局

<input type=text class="form-control">

</div>

</form>

文本域：

下拉框:

<select name=name class="form-control" multiple>multiple多选

</select>

<div>

选择框:

<div>

<label><input type=radio name=sex value=http://www.mamicode.com/M /> 男

<div>

<form>

<div class="checkbox"> 如果class=checkbox-inline 水平排列

<label><input type=checkbox name=sex value=http://www.mamicode.com/M /> 男

<div>

<label><input type=checkbox name=sex value=http://www.mamicode.com/M /> 男

<div>

<label><input type=checkbox name=sex value=http://www.mamicode.com/M /> 男

<div>

</form>

checkbox与radio的区别：

1、单个RadioButton在选中后，通过点击无法变为未选中

单个CheckBox在选中后，通过点击可以变为未选中

2、一组RadioButton，只能同时选中一个

一组CheckBox，能同时选中多个

3、RadioButton在大部分UI框架中默认都以圆形表示

CheckBox在大部分UI框架中默认都以矩形表示

静态控件：

<label class="col-sm-2" control-label>email</label>

<p class=form-control-static>1051931999@qq.com<p>form-control-static 显示在文本框中

</div>

</form>

焦点：

禁用：

只读状态：

校验状态：

<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>

</div>

如何在input加组件：

</div>

<label class="col-sm-2" control-label for=formGroupInputLarge>large</label>

</div>

</from>

辅助文本：

七、折叠的基本用法

声明式触发

<div id="shows" class="collapse">
<div class="well">
显示的内容
</div>
</div>

</div>

八、总结

　　以上只是我学习笔记的一部分，并没有完全写完。

　学习bootstrap对我来说最重要的一点就是进一步熟悉了HTML+CSS的用法，进一步熟悉了标签的基础用法，夯实基础。建议大家读一下bootstrap的源码，知其然和知其所以然，不能总依赖库，这样才能不断进步。

Bootstrap一周学习小结

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > Bootstrap一周学习小结