码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap学习 ——01

时间:2017-09-29 00:23:28      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:center   only   比例   enter   lis   完全   time   font   排列   

1、栅格系统

1.栅格类数字表示的意思
.col-xs-12 .col-sm-6 .col-md-8  .col-lg-12  这里的数字代表在各自对应的屏幕状态下占据的比例。12为总列数。比如col-sm-6,就是指在sm屏幕状态下,包含此类的盒子占据6份的宽度,也就是一半。其他的以此类推。
如果在一个 .row 内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元被另起一行排列。如9+4,那么第一行就只有9,另一个盒子另起一行。
2.列偏移offset

<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
3.页面主体:
Bootstrap 将全局 font-size 设置为 14pxline-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外,<p> (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。

4.被删除文本使用<del>,表删除,无用文本用<s>两个的样式完全一样。
5.文本对齐:直接添加类名即可,有以下几种:

  <p class="text-left">Left aligned text.</p>

  <p class="text-center">Center aligned text.</p>

  <p class="text-right">Right aligned text.</p>

  <p class="text-justify">Justified text.</p>

  <p class="text-nowrap">No wrap text.</p>

6.内联列表:<ul class="list-inline"><li>...</li></ul>  实现列表同行并列的样式,类似于浮动。
7.水平排列的dldtdd,就是实现dtdd对应的排列在一行,小屏幕是两行,大屏幕在一行显示。只需要给dl添加类名dl-horizontal.
8.响应式表格:将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。

2.表单

1.所有设置了 .form-control 类的 <input><textarea>  <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
2.内联表单:就是输入框,按钮等放在一行上  
 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现  inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。
3.bootstrap中给元素添加.sr-only,可以将此元素隐藏.
4.水平排列表单 .form-horizontal
5.input元素的几种状态:disabled,readonly
6.为了让所有用户都能访问你的网站,我们强烈建议为所有输入框添加 label 标签。如果你不希望将 label 标签展示出来,可以通过添加 .sr-only 类来实现。
7.输入框尺寸:通过 .input-lg 类似的类可以为控件设置高度,通过 .col-lg-* 类似的类可以为控件设置宽度。
3、按钮

1. <a><button> 或 <input> 元素添加按钮类即可使用 Bootstrap 提供的样式。

<a class="btn btn-default" href="#" role="button">Link</a>











bootstrap学习 ——01

标签:center   only   比例   enter   lis   完全   time   font   排列   

原文地址:http://www.cnblogs.com/hyesc/p/7608785.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!