12.3-12.8日学习笔记

本周继续学习bootstrap，理清了一下bootstrap的学习思路，完成了全局CSS的学习，正在进行组件的学习。

表格：

<table class=“table  table-striped  table-bordered table-hover  table-condensed”>

<tr>

<th></th>

<th></th>

<th></th>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>

<.table>  //生成比较专业的表格，会调节一下边距

<. table-striped >   // 会出现横条的行

<. table-bordered >  //会出现竖条的列

<. table-hover >   //会出现鼠标移动的一些效果，移动到哪一格子，哪一个会背景会改变

<. table-condensed > //视窗变下的时候，会紧缩表格，其实不加也会紧缩，但是效果会有一点点不同。

状态类：通过这些状态类可以为行或者单元格设置颜色。

<.active>鼠标悬停时设置的颜色。灰色

<.success>积极一些的动作  绿色

<.info>普通一些的提示信息或者动作 ，青蓝色

<.waring>标识警告或需要用户注意  黄色

<.danger>标识危险等会带来负面影响的动作  红色

 响应式表格；

<.table-responsive> 将表格放在带有这个属性的div中会出现，当界面小于一定时，不会再缩小，而是出现滚动条。

<div class=”table-responsive”>

<table class=”table”>

…

</table>

</div>

 

表单：

带有登陆，留言，城市选择的表单：

<form action=””>

 

<div class=””form-group>

<label for=””>用户名：</label>

<input type=”text” class=”form-control” placeholder=“username“>

</div>

 

<div class=””form-group>

<label for=””>密码：</label>

<input type=”text” class=”form-control” placeholder=”password”>

</div>

 

<div class=”form-group”>

<label for=””>留言:</label>

<textarea  name=”” id=”” cols=”30” rows=”10” class=”form-control” placeholder=”留言”>

</textarea>

</div>        留言板

 

<div class=”form-group”>

<label for=””>城市：</label>

<select name=”” id=”” class=”form-control”>

<option value=””>武汉</option>

<option value=””>十堰</option>

<option value=””>竹溪</option>

</div>     地址选择

 

<div class=”form-group”>

<input type=”submit” value=”OK” class=”btn btn-primary”>

<input type=”reset” value=”Cancel” class=”btn btn-danger”>

</div>

</form>

 

多选框：

<div class=”form-group”>

<label for=””>爱好:</label>

<div class=”checkbox”>

<label>

<input type=”checkbox” name=”” id=””>篮球

</label>

</div>

 

<div class=”checkbox”>

<label>

<input type=”checkbox” name=”” id=””>篮球

</label>

</div>

 

<div class=”checkbox”>

<label>

<input type=”checkbox” name=”” id=””>篮球

</label>

</div>

 

<div class=”checkbox”>

<label>

<input type=”checkbox” name=”” id=””>篮球

</label>

</div>

 

</div>

 

单选框：

<div class=”form-group”>

<label for=””>爱好:</label>

<div class=”radio”>

<label>

<input type=” radio” name=”hobby” id=””>篮球

</label>

</div>

 

<div class=” radio”>

<label>

<input type=” radio” name=” hobby” id=””>篮球

</label>

</div>

 

<div class=” radio”>

<label>

<input type=” radio” name=” hobby” id=””>篮球

</label>

</div>

 

<div class=” radio”>

<label>

<input type=” radio” name=” hobby” id=””>篮球

</label>

</div>

 

</div>    //注意:单选框的name必须相同。

 

文件上传框：

<div class=”form-group”>

<label for=””>文件上传：</lable>

<input type=”file” name=”” id=”” >

</div>

 

按钮：

<.btn>

<.btn-default>默认，

<.btn-primary>首选项蓝色

<.btn-success>绿色

<.btn-info>浅蓝

<.btn-waring>黄色

<.btn-danger>红色

<.btn-link>做成链接的样子，

<.btn-block>可以将其拉伸至父级元素的100%宽度，而且按钮也变成了块级元素。

<.active> 有一种点下去的感觉。

【disable=”disable” 】 按钮变成禁用状态，这是一个属性，不是class中的。

<button class=”bth  btn-default”>按钮</button>

尺寸： <.btn-lg> <.btn-sm> <.btn-xs> 注： 默认尺寸是在lg与sm中间的

<a> <./a>也可以给a标签做成按钮样子，并且添加。active类。

 

 

归纳：可以做成按钮的标签有哪些?

   <a class=”btn ”>、<input type=”button” class=”btn”>、<input type=”submit” class=”btn”>、<input type=”reset” class=”btn”>

图片：

<img class=””></img>

<.img-rouded>  图片圆角

<.img-circle>  图片变成圆形

<.img-thumbnail>  图片变成指甲盖的感觉，出现一个白色的小边框。

 

 

辅助类：

文本颜色：

   <p class=””>…</p>

<.text-muted>  看起来很舒服的一种灰色

<.text-primary>  其他的颜色和之前的一样。 蓝色

<.text-success>  绿色

<.text-info>

<.text-waring>

<.text-danger>

<.bg-primary>  改变背景颜色。

<.bg- success>

<.bg- info>

<.bg- waring>

<.bg- danger>

 

这个对于文本都通用，不仅仅是p标签，h标签也可以。

 

 

12.5

关闭按钮：

<span>&times;</span>

<.close>移到块级元素的右上方，并且会有鼠标悬浮上去会有小动画。

三角符号（更多）按钮：

<.caret>  出现一个下拉下三角。

用法：

<button class=”btn btn-primary pull-right //移到最右边”>更多 <span class=”caret”></span></button>

快速浮动

<. pull-right >右浮

<.pull-left> 左浮

 

让内容块居中：

<.center-block>

<div class=”center-block”>…</div>

 

清除浮动：

<div class=”clearfix”>…</div>

 

显示或者隐藏内容:

<.hide>让元素隐藏

<.show>让元素显示

 

 

响应式工具：

<.img-responsive> 让图片随着浏览器的宽度大小，自动改变大小。

<.table-responsive> 让表格。。。

 

 

 

 

--------------------------------------

css组件

1. Glyphicons图标

字符图标，在官网有对应的class，用字体大小规定其大小，且因为是一种字体所以不会失真。并且可以更改颜色。

1. 下拉菜单

<.dropdown>

<div>

<button class=”btn btn-primary” data-toggle=”dropdown”> <span class=”caret”></span> </button>

<ul  class=”dropdown-menu  dropdown-menu-right //菜单右移”>

<li><a href=””>aaaa</a></li>

<li><a href=””>aaaa</a></li>

<li><a href=””>aaaa</a></li>

<li><a href=””>aaaa</a></li>

</ul>

</div>

          <.dropup>  将<div> 的class改成dropup变成上拉菜单。

          <li  class=”drop-header”>菜单标题</li>  可以设置灰色的菜单标题。

          <li class=”divider”></li>菜单分割线

<li class=”disable”>禁用</div>  可以显示禁用的效果。

1. 按钮组

<div class=”btn-group“>

<button class=”btn  btn-danger”><button>

<button class=”btn  btn-danger”><button>

<button class=”btn  btn-danger”><button>

<button class=”btn  btn-danger”><button>

</div>  连在一起的一组按钮。

 

<div class=””btn=toolbar>

按钮工具箱：

分开的几个按钮组

<div class=”btn-group“>

<button class=”btn  btn-danger”><button>

<button class=”btn  btn-danger”><button>

<button class=”btn  btn-danger”><button>

<button class=”btn  btn-danger”><button>

</div>

 

<div class=”btn-group“>

<button class=”btn  btn-danger”><button>

<button class=”btn  btn-danger”><button>

<button class=”btn  btn-danger”><button>

<button class=”btn  btn-danger”><button>

</div>

 

<div class=”btn-group“>

<button class=”btn  btn-danger”><button>

<button class=”btn  btn-danger”><button>

<button class=”btn  btn-danger”><button>

<button class=”btn  btn-danger”><button>

</div>

</div>

按钮尺寸：

<div class=”btn-group  btn-group-sm“>

<button class=”btn  btn-danger”><button>

<button class=”btn  btn-danger”><button>

<button class=”btn  btn-danger”><button>

<button class=”btn  btn-danger”><button>

</div>

分btn-group-lg  btn-group-sm  btn-group-xs

   嵌套：

     按钮组中有下拉菜单

   <div class=”btn-group  btn-group-sm“>

<button class=”btn  btn-danger”><button>

<button class=”btn  btn-danger”><button>

<div class=”btn-group”>

<button class=”btn btn-danger dropdown-toggle” data-toggle=”dropdown”>百度<span class=”caret”></span></button>

<ul class=”dropdown-menu”>

<li>…</li>

<li>…</li>

<li>…</li>

<li>…</li>

</ul>

</div>

</div>

垂直排列 <.btn-group-vertical>

两端对齐的按钮：<.btn-group-justified>

<div class=”btn-group  btn-group-justified “>

<div class=”btn-group”>

<button class=”btn  btn-danger”>…<button>

</div>

<div class=”btn-group”>

<button class=”btn  btn-danger”>…<button>

</div>

<div class=”btn-group”>

<button class=”btn  btn-danger”>…<button>

</div>

</div>

按钮组的两端对齐块的两边

 

按钮式下拉菜单：

分裂是按钮下拉菜单

按钮式上拉菜单：

 

1. 输入框

 

1. 导航
2. 导航条
3. 路径导航
4. 分页
5. 标签
6. 徽章
7. 巨幕
8. 页头
9. 缩略图
10. 警告框
11. 进度条
12. 媒体对象
13. 列表组
14. 面板
15. 响应式嵌入内容
16. well

 

JS插件：

1. 模态框
2. 下拉菜单
3. 滚动监听
4. 标签页
5. 工具提示
6. 弹出框
7. 警告框
8. 按钮
9. 折叠效果
10. 幻灯片效果
11. 固定侧边栏