bootstrap学习笔记

来源：互联网发布：淘宝网货源网靠谱么? 编辑：程序博客网时间：2024/06/06 11:39

1.Bootstrap介绍

Bootstrap是一个基于HTML、CSS、JavaScript的开源框架,用于快速构建基于PC端和移动端设备的响应式web页面.

2.下载

地址: http://v3.bootcss.com/

CDN:

3.页面排版

Bootstrap中默认的字体大小为14px,(Native app字体默认为17)行高为20px,<p>元素为1/2行高(10px)颜色为#333

标题:h1~h6(36px,30px,24px,18px,14px,12px)

h标签下可以嵌套<small>标签,通常作为副标题使用,h1~h3下:small元素的大小只占父元素的65%(23.4px,19.5px,15.6px),h4~h6下:small元素只占父元素的75%(13.5px,10.5px,9px),small标签的颜色是浅灰色:#777,行高为1,粗度为400.

内联文本元素

添加标记:<mark>//<p>听众朋友大家好,这里是<mark>中央人民广播电视台</mark></p>

删除文本:<del>//<del>我都卖完了你才来</del> //给文本加一条删除线

无用文本:<s>//<s>我跟删除长一样但是我真无用</s> //和del的作用一样

插入文本:<ins>//<ins>我是个插入文本</ins> //给文本添加下划线

强调文本:<small>,<strong>,<em>

//<small>我是标准字号的85%</small>

//<strong>我是加粗的:700</strong>

//<em>我用的很多,因为我是歪的</em>

对齐

<p class=’text-left’>我居左对齐</p>

<p class=’text-center’>我居中对齐</p>

<p class=’text-right’>我居右对齐</p>

<p class=’text-justify’>我两端对齐,但是我支持度不高</p>

大小写

<p class=’text-lowercase’>小写</p> //将大写字母转换为小写字母

<p class=’text-uppercase’>大写</p> //将小写字母转换为大写字母

<p class=’text-capitalize’>首字母大写</p> //将首字字母大写

地址文本

//地址文本对原本的css样式做的复写,去掉了倾斜,设置了行高

<strong>华清远见教育集团</strong>

</address>

引用文本

//左边有一个5px的边框线条

<blockquote>看看我左边</blockquote> //左边会多一个小矩形

<blockquote class=’blockquote-reverse’>又在右边了</blockquote> //右边会多一个小矩形

<blockquote class=’pull-right’>同上</blockquote> //右边会多一个小矩形

列表排版

//默认样式

<ul>

</ul>

//移除默认样式

</ul>

//设置成内联

</ul>

4.表格

----基本样式

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

----条纹状表格

----带边框的表格

----鼠标悬停选中效果

----状态类

//单独设置每一行的背景样式

5种不同的样式:

active 鼠标悬停在行或者单元格上

success 标识成功或积极的动作

info 标识普通的提示信息或动作

warning 标识警告或者需要用户注意

----隐藏某一行

<tr class=’sr-only’> //相当于hidden

----响应式表格

//表格响应式,设置父元素,当父元素小于768px时表格出现边框

<body class=’table-responsive’><table class=’table’>....

5.按钮

-----常当做按钮使用的元素

//转化成普通按钮

//注:

①如果<a>元素被作为按钮使用---本来锚点是用来链接其他页面或者连接当前页面的其他部分,如果是跟按钮一样要触发某些功能,必须设置属性:role=’button’

②尽量使用<button>来获取页面上匹配的绘制元素

-----样式

常用样式:

btn-default 默认样式

btn-success 成功样式

btn-info 一般信息样式

btn-warning 警告样式

btn-danger 危险样式

btn-primary 首选项样式

btn-link 链接样式

----尺寸大小

常用尺寸:

btn-lg //大

不写 //中等

btn-sm//小

btn-xs//x小

----块级按钮

btn-block//把按钮设置为块级元素

-----激活状态

active// 样式是点击时的样式不是悬停时的

-----禁用状态

disabled//点击的时候不允许点的样式

6.表单

----表单元素的标签必须有method和action属性

----表单里的每一个输入控件必须对应一个展示标签(说明标签),并且得给它设置for属性,想隐藏就加上属性class="hidden"

<label for=’userid’>请输入账号</label>

----基本样式

<div class=’form-group’ style=’margin:0px 50px’>//控件放在div里(form-group用作加行间距)

<label for=’email1’ class=’control-label’>邮箱</label>//control-label自动为控件匹配屏幕,这个少了后面学得样式可能会没有效果

<input id=’email1’ type=’email’ class=’form-control’>//form-control自动为控件匹配屏幕,这个少了后面学得样式可能会没有效果

</div>

</div>

</form>

----内联

//让表单里面的控件左对齐浮动(横排),当屏幕小于768px时恢复独占样式(竖直)

----合组

//输入控件前后增加片段(前面例子的’邮箱’两个字,跟控件没有合并)

<div class='input-group'> //合并组的盒子

<div class="input-group-addon">¥</div> //前合并

<input id='text1' type='text' class='form-control'> //控件

<div class="input-group-addon">.00</div> //后合并

</div>

</form>

-----单复选框

①默认(都在一行)

<label for=’it1’> //不加label文本不能点

<input id="it1" type='checkbox' name='it'>前端

</label>

</div>

②内联checkbox-inline

<label for=’it1’ class=’’checkbox-inline’’>//在label上加

<input id="it1" type='checkbox' name='it'>前端

</label>

</div>

③禁用(不准点)disabled

<div class='checkbox disabled'> //这里加,文本不能点

<input id="it1" type='checkbox' name='it' disabled>前端//这里加,框也不能点

</label>

</div>

④单选框

把上面的'checkbox' 换成radio 就ok了

-----下拉列表

</select>

-----校验状态

<div class=’form-group has-error’>//错误状态

//如果想文字也出效果,就在label上也加class=’has-error’

状态:

has-error 错误状态

has-success 成功状态

has-warning 警告状态

</div>

</form>

var email=document.querySelector("#email")

email.onchange=function(){

var val=email.value

if(val==1){

console.log(val)

document.querySelector("#div1").className+=' has-success' //加类注意空格

}

</script>

-----尺寸

<input type=’password’ class=’form-control input-lg’> //大

<input type=’password’ class=’form-control’> //中

<input type=’password’ class=’form-control input-sm’> //小

7.图片

----图片形状

<img src=’xxx’ alt=’这是个图片’ class=’img-rounded’> //圆角矩形

<img src=’xxx’ alt=’这是个图片’ class=’img-circle’> //圆(正方形圆,长方形椭圆)

<img src=’xxx’ alt=’这是个图片’ class=’img-thumbnail> //边框,常用作缩略图

----响应式

<img src=’xxx’ alt=’这是个图片’ class=’img-responsive’> //改变屏幕大小图片跟着变

阅读全文

1 0