Bootstrap学习笔记之css样式设计(2)


Posted in Javascript onJune 07, 2016

首先,很感谢各位朋友对我的支持,关于bootstrap的学习总结,我会持续更新,如果有写的不对的地方,麻烦各位给我指正出来哈。关于上篇文章,固定布局和流式布局很关键,如果还不太清楚的可以再看看我写的:Bootstrap学习笔记之css样式设计(1)

这次我们来看看bootstrap中关于样式的一些具体关键的类以及如何使用这些类,类与类之间的区别,另外涉及到的一些相关类,举列子的时候解释。

一、表单

1.form-control类:含有此类的<input><select><textarea>标签宽度都将变为width:100%,且在表单中通常是将控件配合label标签一起包含在form-group中使用。 

<form role="form">
 <!-- 所有设置了form-control类的input,textarea,select,元素都将被默认为width:100% -->
 <div class="form-group"> --form-group:一般讲标签和空间包裹在form-group中使用
 <label for="exampleInputEmail">Email address</label>
 <input type="email" class="form-control" id="exampleInputEmail" placeholder="input">
 </div>


 <div class="form-group">
 <label for="exampleInputEmail">Email name</label>
 <textarea class="form-control">11111</textarea>
 </div>


 <div class="form-group">
 <label for="select">select form</label>
 <select class="form-control">
 <option>111</option>
 <option>222</option>
 </select>
 </div>
</form>

 根据上面代码引申出不同的类,我们一行行的来看。给form添加form-inline类(将控件放在一行) |  form-horizontal类(标签在左,控件在右),后者借助标签。

<!-- form-inline类使表单水平呈现-->
<form class="form-inline"> --其次还有check-inline,radio-inline等
 <div class="form-group">
 <label class="src-only" for="exampleInputAmount">Amount</label>
 <div class="input-group"> --input-group:输入组
 <div class="input-group-addon">@</div> --addon:指添加的文本或按钮
 <input type="text" class="form-control " id="exampleInputAmount" placeholder="Amount">
 <div class="input-group-addon">@</div>
 </div>
 </div>
 <button type="submit" class="btn btn-primary">search</button>

</form>

效果如下:

Bootstrap学习笔记之css样式设计(2)

如果不加的话,button将被挤到下一行。这里不再贴图,可自行贴码测试。

<!--水平排列的表单 control-label:表示文本采用右对齐 -->
<form class="form-horizontal" >
 <div class="form-group">
 <label for="inputEmail" class="col-sm-2 control-label">Email:</label>
 <div class="col-sm-10">
 <input type="email" class="form-control" id="inputEmail" placeholder="email">
 </div>
 </div>
 <div class="form-group">
 <label for="inputPassword" class="col-sm-2 control-label">Password:</label>
 <div class="col-sm-10">
 <input type="password" class="form-control" id="inputPassword" placeholder="password">
 </div>
 </div>
</form>

效果如下:

Bootstrap学习笔记之css样式设计(2)

(注意:这里的input文本框应该是占5/6的,我把它的宽度自定义了下为20%)

这里关于form-horizontal,要配合bootstrap的栅格系统进行。

在<form>元素上使用类名“form-horizontal”主要有以下几个作用:

1:设置表单控件padding和margin值。上面的代码可在调试控制台里面看到,为padding-left:50px。

2:改变“form-group”的表现形式,类似于网格系统的“row”。

2.label的作用

<label for="hello1">hello</label><input type="text" id="hello"><br> 

 ---产生蓝色光晕
<label for="1111">hello</label><input type="text" id="jiang"><br> 

---id不对应,没反应,只有当鼠标放在控件上时,才有蓝色光晕

结合上面的代码看:label中的for属性,应该对应的是控件中的id。作用:保证当鼠标置于label上,相应的控件会产生蓝色光晕。

3.role的作用

   有没有觉得很奇怪,为什么在写表单或者一些控件的时候,要加上role?

   作用:保证读屏软件可以识别。读屏软件即一款帮助智障人士上网的软件,将图片,文字等以语音的形式传达给智障人士,因此为确保读屏软件可以识别,通常没有语义化的标签,或者功能特殊的标签都要写上它。比如:

<a class="btn btn-default" href="#" role="button">link</a>
<!-- 如果链接a作为按钮使用,并用于当前页面触发某些功能,

而不是连接到其它其它页面或当前页面的其余部分,务必设置role="button" -->
原本a标签是表示链接,但这里却当做按钮来使用,读屏软件无法识别,

因此需要加上role="button",让读屏软件知道这是个button按钮。

 4.label,aria-label,aria-labelled的区别?

<div class="form-group">
 
 <input type="text" id="idCard" aria-label="身份证">
 <p class="help-block">Example block-level </p> --help-block:用来提示解释说明的文本
 </div>
 <div class="form-group">
 <label for="idCard">身份证</label>
 <input type="text" id="idCard" >
 <p class="help-block">Example block-level </p>
 </div>

效果如下:

Bootstrap学习笔记之css样式设计(2)

前者没有出现可视化的“身份证”字样,两者均是为了便于读屏软件识别出来。只是aria-label被隐藏起来了。

再来看下aria-labelled怎么用,通常是当标签文本已经存在于某一个元素时,使用aria-labelled,它的值为所有读取元素的id,来看下列子:

<div class="dropdown"> 
 <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> 

 选择下列选项 
 <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
 <li role="presentation"> 
 <a role="menuitem" tabindex="-1" href="#">1111</a> 
 </li> 
 <li role="presentation"> 
 <a role="menuitem" tabindex="-1" href="#">22222</a> 
 </li> 
 <li role="presentation"> 
 <a role="menuitem" tabindex="-1" href="#">33333</a> 
 </li> 
 </ul> 
</div>

 此时ul中包含的有li,且是在button中控制的,所以此时用aria-labelledby比较合适。简单来说,三者之间,只是使用的范围不一样,基本功能是相同的,都是为了便于读屏软件的识别。说到隐藏的类,就要提到sr-only类了。我们来看下。

  <label  for="inputEmail"   class="col-sm-2  control-label  sr-only">Email:</label>
  <label  for="inputEmail"   class="col-sm-2  control-label ">Email:</label>
此时效果是:上面的文字被隐藏起来,仅仅这种区别,其它基本功能不变。

5.disabled类

在表单中,这个类要注意,这里我们对比来看。

<!-- 引入fieldset的表单,作用:将表单包含在一个块里面 -->
<form role="form">
 <fieldset disabled>
 <div class="form-group">
 <label for="disabledTextInput">禁用的输入框</label>
 <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
 </div>
 <div class="form-group">
 <label for="disabledSelect">禁用的下拉框</label>
 <select id="disabledSelect" class="form-control">
 <option>禁用不可选择</option>
 </select>
 </div>
 <div class="checkbox">
 <label>
 <input type="checkbox"> 禁用无法选择
 </label>
 </div>
 <button type="submit" class="btn btn-primary">提交</button>
 </fieldset>
</form>

如果给fileset增加disabled类的话,禁用的表单,只对button   select   input等禁用,而对于其它的项legend属性并不起作用。对比来看,添加legend属性

<!-- 加了lenged属性 -->
<form role="form">
 <fieldset disabled>
 <legend><input type="text" class="form-control" placeholder="颜色变灰,但没被禁用" ></legend>--这里鼠标可以放入输入框中
 <div class="form-group">
  <label for="disabledTextInput">禁用的输入框</label>
  <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
 </div>
 <div class="form-group">
  <label for="disabledSelect">禁用的下拉框</label>
  <select id="disabledSelect" class="form-control">
  <option>不可选择</option>
  </select>
 </div>
 <div class="checkbox">
  <label>
  <input type="checkbox"> 无法选择
  </label>
 </div>
 <button type="submit" class="btn btn-primary">提交</button>
 </fieldset>
</form> 
<!-- 禁用的表单,只对button select input等禁用,而对于其它的项legend并不起作用-->

 6.data-toggle data-target  data-spy属性

  html5允许开发者自由为其标签添加属性,这种自定义属性一般用“data-”开头。

  data-toggle:表示数据交互 ,上面列子中点击button,即可切换到下拉菜单。

  data-spy表示:监控

  data-traget:目标。

 这里涉及到js中的事件,不再详解,等到进入bootstrap中的js学习中再来看一下这些问题。表单涉及到的东西还是很多的,总结的差不多这么多,还有补充的,麻烦大家在下面给我留言。

二、按钮类

  这个没啥难点,记住属性类就行了,很好理解。

<a class="btn btn-default" href="#" role="button">link</a>
<button class="btn btn-default btn-lg" type="submit" disabled="disabled">default</button>
<button class="btn btn-primary" type="submit">primary</button>
<button class="btn btn-success" type="submit">success</button>
<button class="btn btn-info btn-block" type="submit">info</button> --btn-block:将其拉伸到父元素的100%
<button class="btn btn-warning" type="submit">warning</button>
<input class="btn btn-danger active" type="button" value="Input">
<input class="btn btn-link" type="button" value="submit">

 效果如下:

Bootstrap学习笔记之css样式设计(2)

三、图片类

 <!--  使图片居中center-block:使内容居中显示 img-rounded :带有圆角   img-circle:环形    img-thumbnail:给图片加了个外边框-->
<img  src="111.png"  class="img-responsive  center-block  img-rounded"  alt="responsive  image">
<img  src="111.png"  class="img-responsive  center-block  img-circle"  alt="responsive  image">
<img  src="111.png"  class="img-responsive  center-block  img-thumbnail"  alt="responsive  image">
效果如下:

Bootstrap学习笔记之css样式设计(2)

总结一句,个人感觉,表单的作用还是很重要的,其它的一些基本类,这里不再讲解,都比较容易。下一篇将转入css组件的学习:Bootstrap学习笔记之css组件(3)

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery在光标位置插入内容的实现代码
Jun 18 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
Javascript中replace()小结
Sep 30 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
JS Attribute属性操作详解
May 19 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 #Javascript
JQuery异步加载PartialView的方法
Jun 07 #Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 #Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 #Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 #Javascript
PassWord输入框代码分享
Jun 07 #Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 #Javascript
You might like
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
jQuery 位置插件
2008/12/25 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
python在命令行下使用google翻译(带语音)
2014/01/16 Python
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
Python单例模式实例详解
2017/03/01 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
如何在python中判断变量的类型
2020/07/29 Python
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
工程力学专业毕业生求职信
2013/10/06 职场文书
超市业务员岗位职责
2013/12/05 职场文书
医大实习自我鉴定
2013/12/07 职场文书
应用心理学专业求职信
2014/08/04 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
工伤事故证明
2014/10/20 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript