Boostrap入门级css样式学习

Posted 芜明-追星

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Boostrap入门级css样式学习相关的知识,希望对你有一定的参考价值。

1. 自适应网页设计 
首先,在网页代码的头部,加入一行 viewport元标签。viewport是网页默认的宽度和高度,

<meta name="viewport" content="width=device-width, initial-scale=1">
  • 1

上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。 所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用 css3-mediaqueries.js。

2. 轮播组件 carousel 
通过 javascript 初始化轮播组件,接受一个可选的object类型的options参数,并开始幻灯片循环。

$(‘.carousel‘).carousel({
    interval: 2000 , //图片轮换的等待时间
    //还有其他两种: pause 类型String    默认值是"hover" 鼠标放上去暂停轮播,离开开始轮播
    //wrap  类型boolean   默认值是true    是否持续轮播
});
  • 1
  • 2
  • 3
  • 4
  • 5

直接放入参数值 
.carousel(‘cycle’) 从左到右循环各帧。 
.carousel(‘pause’) 停止轮播。 
.carousel(number) 将轮播定位到指定的帧上(帧下标以0开始,类似数组)。 
.carousel(‘prev’) 返回到上一帧。 
.carousel(‘next’) 转到下一帧。

3. 响应式图片

<img src="..." class="img-responsive" alt="Responsive image">
  • 1

通过添加.img-responsive class可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是为图片赋予了max-width: 100%;和height: auto;属性,可以让图片按比例缩放,不超过其父元素的尺寸。

4. 透明度设置:已经为 ie8兼容

.opacity(@opacity) {
        opacity: @opacity;
        // IE8 filter
        @opacity-ie: (@opacity * 100);
        filter: ~"alpha([email protected]{opacity-ie})";
    }

1. 标题样式 
除了有标签 h1~h6 之外,bootstrap还提供了对应的六个类名:.h1~.h6

  • 重新设置了margin-top和margin-bottom的值, h1~h3重置后的值都是20px;h4~h6重置后的值都是10px。
  • 所有标题的行高都是1.1(也就是font-size的1.1倍),而且文本颜色和字体都继承父元素的颜色和字体。
  • 固定不同级别标题字体大小,h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px。

2.副标题 small标签

  • 行高都是1,而且font-weight设置了normal变成了常规效果(不加粗),同时颜色被设置为灰色(#999)
  • 内的文本字体在h1~h3内,其大小都设置为当前字号的65%;而在h4~h6内的字号都设置为当前字号的75%

3.段落P强调内容 lead类样式 
如果想让一个段落p突出显示,可以通过添加类名“.lead”实现,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理。 
用法:

<p>我是普通文本,我的样子长成这样我是普通文本,我的样子长成这样我是普通文本,</p>
<p class="lead">我是特意要突出的文本,我的样子成这样。我是特意要突出的文本,我的样子长成这样。</p>
  • 1
  • 2

4.粗体 
在Bootstrap中,可以使用<b>和<strong>标签让文本直接加粗。

5. 斜体 
斜体类似于加粗一样,除了可以给元素设置样式font-style值为italic实现之外,在Bootstrap中还可以通过使用标签<em>或<i>来实现。

6.强调相关的类 
在Bootstrap中除了使用标签<strong>、<em>等说明正文某些字词、句子的重要性,Bootstrap还定义了一套类名,这里称其为强调类名(类似前面说的“.lead”),这些强调类都是通过颜色来表示强调,具本说明如下:


    .text-muted:提示,使用浅灰色(#999)
    .text-primary:主要,使用蓝色(#428bca)
    .text-success:成功,使用浅绿色(#3c763d)
    .text-info:通知信息,使用浅蓝色(#31708f)
    .text-warning:警告,使用黄色(#8a6d3b)
    .text-danger:危险,使用褐色(#a94442)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

7.文本对齐风格

 .text-left:左对齐
 .text-center:居中对齐
 .text-right:右对齐
 .text-justify:两端对齐
  • 1
  • 2
  • 3
  • 4

8.列表

  • 去点列表:通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。
  • 内联列表:通过添加类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。也可以说内联列表就是为制作水平导航而生。
  • 水平定义列表:Bootstrap可以给
    添加类名“.dl-horizontal”给定义列表实现水平显示效果。

9.代码相关

  • 使用<code></code>来显示单行内联代码
  • 使用<pre></pre>来显示多行块代码
  • 使用<kbd></kbd>来显示用户输入代码
  • Y轴出现滚动条:在pre标签上添加类名“.pre-scrollable”

10.表格

.table:基础表格
.table-striped:斑马线表格
.table-bordered:带边框的表格
.table-hover:鼠标悬停高亮的表格
.table-condensed:紧凑型表格
.table-responsive:响应式表格
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

10-1.表格行的类

类名 描述
.active 表示当前活动的信息
.success 表示成功或者正确的行为
.info 表示中立的信息或行为
.warning 表示警告,需要特别注意
.danger er 表示危险或者可能是错误的行为

10-2.基础表格 注意

  • 在Bootstrap中,对于基础表格是通过类名“.table”来控制。如果在元素中不添加任何类名,表格是无任何样式效果的。

10-3.响应式表格

    • 在Bootstrap中也为表格提供了响应式的效果,将其称为响应式表格。 
      Bootstrap提供了一个容器,并且此容器设置类名“.table-responsive”,此容器就具有响应式效果,然后将置于这个容器当中,这样表格也就具有响应式效果。 
      Bootstrap中响应式表格效果表现为:当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失。

11. 基础表单

  • 类名form-control 
    1、宽度变成了100% 
    2、设置了一个浅灰色(#ccc)的边框 
    3、具有4px的圆角 
    4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化 
    5、设置了placeholder的颜色为#999

  • 类名 form-horizontal 
    水平表单风格(标签居左,表单控件居右)

  • 类名form-inline 
    将表单的控件都在一行内显示

  • 表单控件(输入框input) 
    单行输入框,常见的文本输入框,也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的。为了让控件在各种表单风格中样式不出错,需要添加类名“form-control”

  • 表单控件(下拉选择框select) 
    多行选择设置multiple属性的值为multiple<select multiple class="form-control">

  • 表单控件(文本域textarea) 
    文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

<form role="form">
  <div class="form-group">
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 表单控件(复选框checkbox和单选择按钮radio) 
    1、不管是checkbox还是radio都使用label包起来了 
    2、checkbox连同label标签放置在一个名为“.checkbox”的容器内 
    3、radio连同label标签放置在一个名为“.radio”的容器内 
    在Bootstrap框架中,主要借助“.checkbox”和“.radio”样式,来处理复选框、单选按钮与标签的对齐方式。

  • 表单控件(复选框和单选按钮水平排列) 
    1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline” 
    2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”

  • 表单控件(按钮) 
    技术分享

  • 表单控件大小 
    1、input-sm:让控件比正常大小更小 
    2、input-lg:让控件比正常大小更大 
    这两个类适用于表单中的input,textarea和select控件,具体使用如下:

<input class="form-control input-lg" type="text" placeholder="添加.input-lg,控件变大">
<input class="form-control" type="text" placeholder="正常大小">
<input class="form-control input-sm" type="text" placeholder="添加.input-sm,控件变小">
  • 1
  • 2
  • 3
  • 表单控件状态(焦点状态) 
    焦点状态是通过伪类“:focus”来实现

  • 表单控件状态(禁用状态) 
    只需要在需要禁用的表单控件上加上“disabled”即可

<input class="form-control" type="text" placeholder="表单已禁用,不能输入" disabled>
  • 1

在Bootstrap框架中,如果fieldset设置了disabled属性,整个域都将处于被禁用状态。如果legend中有输入框的话,这个输入框是无法被禁用的。

  • 表单控件状态(验证状态) 
    1、.has-warning:警告状态(黄色) 
    2、.has-error:错误状态(红色) 
    3、.has-success:成功状态(绿色) 
    使用的时候只需要在form-group容器上对应添加状态类名。 
    很多时候,在表单验证的时候,不同的状态会提供不同的 icon,比如成功是一个对号(√),错误是一个叉号(×)等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来,只需要在对应的状态下添加类名“has-feedback”。请注意,此类名要与“has-error”、“has-warning”和“has-success”在一起:
<form role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess1">成功状态</label>
    <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
  <div class="form-group has-warning has-feedback">
    <label class="control-label" for="inputWarning1">警告状态</label>
    <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
  <div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError1">错误状态</label>
    <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
  </div>

   <div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError1">email地址</label>
    <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
  </div>

</form>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

在 Bootstrap 的小图标都是使用@font-face来制作(后面的内容中将会着重用一节内容来介绍)。而且必须在表单中添加了一个 span 元素

  • 表单提示信息 
    平常在制作表单验证时,要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个help-block样式,将提示信息以块状显示,并且显示在控件底部。help-inline让提示信息显示在控件的后面,也就是同一水平显示

    12.按钮

 <button class="btn" type="button">基础按钮.btn</button>  
   <button class="btn btn-default" type="button">默认按钮.btn-default</button> 
   <button class="btn btn-primary" type="button">主要按钮.btn-primary</button> 
   <button class="btn btn-success" type="button">成功按钮.btn-success</button> 
   <button class="btn btn-info" type="button">信息按钮.btn-info</button> 
   <button class="btn btn-warning" type="button">警告按钮.btn-warning</button> 
   <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> 
   <button class="btn btn-link" type="button">链接按钮.btn-link</button> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

- 按钮大小 
技术分享

  • 块状按钮 
    Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器,并且这个按钮不会有任何的padding和margin值。在实际当中,常把这种按钮称为块状按钮。

  • 按钮状态——禁用状态 
    方法1:在标签中添加disabled属性 
    方法2:在元素标签中添加类名“disabled”

<button class="btnbtn-primary btn-lgbtn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
<button class="btnbtn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
<button class="btnbtn-primary btn-smbtn-block" type="button">未禁用的按钮</button>



12. 图像 
1、img-responsive:响应式图片,主要针对于响应式设计 
2、img-rounded:圆角图片 
3、img-circle:圆形图片 
4、img-thumbnail:缩略图片

  • 由于样式没有对图片做大小上的样式限制,所以在实际使用的时候,需要通过其他的方式来处理图片大小。比如说控制图片容器大小。(注意不可以通过css样式直接修改img图片的大小,这样操作就不响应了)
  • 对于圆角图片和圆形图片效果,因为是使用了CSS3的圆角样式来实现的,所以注意对于IE8以及其以下版本不支持,是没有圆角效果的。

13.网格系统 
1、数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。 
2、在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。 
3、具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row)的直接子元素 
4、通过设置内距(padding)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响 
技术分享 
更详细的用法,看官网

14.下拉菜单(基本用法) 
1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素 
2、使用了一个按钮做为父菜单,并且定义类名“dropdown-toggle”和自定义“data-toggle”属性,且值必须和最外容器类名一致, 
3、下拉菜单项使用一个ul列表,并且定义一个类名为“dropdown-menu”

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" 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="#">下拉菜单项</a></li>
   …
   <li role="presentation" class="divider"></li>
   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 下拉菜单(对齐方式) 
    Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名

15.按钮(等分按钮) 
等分按钮也常被称为是自适应分组按钮,其实现方法也非常的简单,只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名

<div class="btn-wrap">
<div class="btn-group btn-group-justified">
  <a class="btnbtn-default" href="#">首页</a>
  <a class="btnbtn-default" href="#">产品展示</a>
  <a class="btnbtn-default" href="#">案例分析</a>
  <a class="btnbtn-default" href="#">联系我们</a>
</div>
</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 特别声明:在制作等分按钮组时,请尽量使用<a>标签元素来制作按钮,因为使用<button>标签元素时,使用display:table在部分浏览器下支持并不友好。

16.基础导航条 
“.navbar”样式的主要功能就是设置左右padding和圆角等效果,但他和颜色相关的样式没有进行任何的设置,而导航条的颜色都是通过“.navbar-default”来进行控制

  • 加入导航条标题
  • 常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过“navbar-header”和“navbar-brand”来实现

17.警示框–默认警示框 
1、成功警示框:告诉用用户操作成功,在“alert”样式基础上追加“alert-success”样式,具体呈现的是背景、边框和文本都是绿色;

2、信息警示框:给用户提供提示信息,在“alert”样式基础上追加“alert-info”样式,具体呈现的是背景、边框和文本都是浅蓝色;

3、警告警示框:提示用户小心操作(提供警告信息),在“alert”样式基础上追加“alert-warning”样式,具体呈现的是背景、边框、文本都是浅黄色;

4、错误警示框:提示用户操作错误,在“alert”样式基础上追加“alert-danger”样式,具体呈现的是背景、边框和文本都是浅红色。

  • 警示框–可关闭的警示框 
    1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。

    2、在button标签中加入class=”close”类,实现警示框关闭按钮的样式。

    3、要确保关闭按钮元素上设置了自定义属性:“data-dismiss=”alert””(因为可关闭警示框需要借助于Javascript来检测该属性,从而控制警示框的关闭)。

  • 警示框–警示框的链接 
    Bootstrap框架是通过给警示框加的链接添加一个名为“alert-link”的类名,通过“alert-link”样式给链接提供高亮显示。

18.媒体对象–默认媒体对象 
? 媒体对像的容器:常使用“media”类名表示,用来容纳媒体对象的所有内容

? 媒体对像的对象:常使用“media-object”表示,就是媒体对象中的对象,常常是图片

? 媒体对象的主体:常使用“media-body”表示,就是媒体对像中的主体内容,可以是任何元素,常常是图片侧边内容

? 媒体对象的标题:常使用“media-heading”表示,就是用来描述对象的一个标题,此部分可选

  • 除了上面四个部分之外,在Bootstrap框架中还常常使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式。

19.js插件引入

  • 一次性引入 
    Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js)。

  • 单独导入: 
    ? 动画过渡(Transitions):对应的插件文件“transition.js”

    ? 模态弹窗(Modal):对应的插件文件“modal.js”

    ? 下拉菜单(Dropdown):对应的插件文件“dropdown.js”

    ? 滚动侦测(Scrollspy):对应的插件文件“scrollspy.js”

    ? 选项卡(Tab):对应的插件文件“tab.js”

    ? 提示框(Tooltips):对应的插件文件“tooltop.js”

    ? 弹出框(Popover):对应的插件文件“popover.js”

    ? 警告框(Alert):对应的插件文件“alert.js”

    ? 按钮(Buttons):对应的插件文件“button.js”

    ? 折叠/手风琴(Collapse):对应的插件文件“collapse.js”

    ? 图片轮播Carousel:对应的插件文件“carousel.js”

    ? 自动定位浮标Affix:对应的插件文件“affix.js”

  • 模态弹出框

技术分享

    • 模态弹出框–JavaScript触发时的参数设置(一) 
      使用JavaScript触发模态弹出窗时,Bootstrap框架提供了一些设置,主要包括属性设置、参数设置和事件设置。 
      技术分享

    • 模态弹出框–JavaScript触发时的参数设置(二) 
      技术分享 技术分享

 

以上是关于Boostrap入门级css样式学习的主要内容,如果未能解决你的问题,请参考以下文章

css学习

css学习

css学习

boostrap-table

CSS样式快速入门

webpack3打包boostrap