Bootstrap(上)

最新推荐文章于 2023-03-30 21:40:55 发布

little little

最新推荐文章于 2023-03-30 21:40:55 发布

阅读量850

点赞数 1

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/songlf521/article/details/61617973

版权

bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、概念

Bootstrap是tiweenter小组的一部分员工为了提高操作css的工作效率，而开发的css框架。开源之后，一举成名，收到很多程序员的亲赖。
bootstrap提供了一些css的样式集和js插件，它的js插件是依赖于jquery的，所以要在bootstrap之前引入jQuery.

二、兼容性

Bootstrap2.0比较激进，兼容性不友好。Bootstrap3.0则是放弃了对IE7和firfox3.0的支持，在IE8中，bootstrap3.0虽然支持，但是也不是完美支持，呈现出的效果不是很好。

三、起步标准架构

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!--为了使IE使用新的渲染模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 初始化移动浏览器显示，移动设备显示网页有个虚拟的虚拟的适口viewport,但是viewport比实际的设备显示窗口大，所以要加content部分，防止网页内容在设备显示窗口以外。不做任何缩放。当然也可以设置移动浏览器上的内容是缩放的，maximum-scale=2.0 最大缩放比例，minimun-scale=1.0最小缩放比例 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--对于IE9以下浏览器的支持-->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <!--使IE9以下浏览器支持html5标签-->
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <!--使IE9以下浏览器支持响应式布局 @mediaquery...-->
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

四、bootstrap的初始化样式

Bootstrap的全局样式采用了“normalize.css”。Bootstrap框架在初始化样式上做了一定的变更，不再一味追求归零，而是更注重重置可能产生问题的样式（如，body,form的margin等），保留和坚持部分浏览器的基础样式，解决部分潜在的问题，提升一些细节的体验，具体说明如下：
移除body的margin声明;
设置body的背景色为白色;
为排版设置了基本的字体、字号和行高;
设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式.

让初始化其更适合Bootstrap的设计思想。

五、css组件

1、hn标签

Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，

这里写图片描述

如果在以上标题之后又副标题，那么它提供了small标签，它们又独特的样式：
1、行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
2、由于<small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%；
详细代码请参阅bootstrap.css文件中第407行~第443行。

<h1>Bootstrap标题一<small>我是副标题</small></h1>
<h2>Bootstrap标题二<small>我是副标题</small></h2>
<h3>Bootstrap标题三<small>我是副标题</small></h3>
<h4>Bootstrap标题四<small>我是副标题</small></h4>
<h5>Bootstrap标题五<small>我是副标题</small></h5>
<h6>Bootstrap标题六<small>我是副标题</small></h6>

2、p标签

在Bootstrap中为文本设置了一个全局的文本样式。该设置都定义在元素上，由于这几个属性都是继承属性，所以Web页面中文本（包括段落p元素）如无重置都会具有这些样式效果。

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}

另外，Bootstrap还特意设置了p元素的margin值

/*源码请查看bootstrap.css文件中第467行~469行*/
p {
 margin: 0 0 10px;
}

想让一个段落p突出显示，可以通过添加类名“.lead”实现

/*源码查看bootstrap.css文件第470行~480行*/
.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 200;
line-height: 1.4;
}
@media (min-width: 768px) {/*大中型浏览器字体稍大*/
.lead {
font-size: 21px;
  }
}

3、small\strong\em\cite\b\strong\em\i标签

除此之外，Bootstrap还通过元素标签:、、和给文本做突出样式处理。

b,strong {
  font-weight: bold; /*文本加粗*/
}
small,.small {
  font-size: 85%; /*标准字体的85%,也就是14px * 0.85px，差不多12px*/
}
cite {
font-style: normal;
}

在Bootstrap中，可以使用和标签让文本直接加粗。

/*源码*/
b,strong {
  font-weight: bold; /*文本加粗*/
}

4、强调类样式

.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
可以在要使用的元素，直接class=’text-muted’

5、文本对齐样式

.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
.text-justify：两端对齐

6、提供六种列表 ###,

/*源码*/
ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}
ul ul,
ol ul,
ul ol,
ol ol {
  margin-bottom: 0;
}

给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格

/*源码*/
.list-unstyled {
padding-left: 0;
list-style: none;
}

通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。

/*源码*/
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

dl\dt\dd设置

/*源码*/
@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
text-overflow: ellipsis; 
/*上2，标题宽度超过160px时，将会显示三个省略号*/
clear: left;
text-align: right;
white-space: nowrap;
  }
.dl-horizontal dd {
margin-left: 180px;
  }
}

其实现主要方式：
将dt设置了一个左浮动，并且设置了一个宽度为160px
将dd设置一个margin-left的值为180px，达到水平的效果
当标题宽度超过160px时，将会显示三个省略号

7、代码风格

使用来显示单行内联代码针对于单个单词或单个句子的代码
使用

来显示多行块代码针对于多行代码（也就是成块的代码）
使用来显示用户输入代码表示用户要通过键盘输入的内容
在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}

8、表格样式

（1）table标签的样式
1）
源码查看bootstrap.css文件第1402行～第1441行
.table：基础表格
2）
其实现原理也非常的简单，利用CSS3的结构性选择器“:nth-child”来实现，所以对于IE8以及其以下浏览器，没有背景条纹效果
.table-striped：斑马线表格

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}

3）bootstrap.css文件第1450行~第1464行
.table-bordered：带边框的表格

.table-bordered {
  border: 1px solid #ddd;/*整个表格设置边框*/
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd; /*每个单元格设置边框*/
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;/*表头底部边框*/
}

4）查看bootstrap.css文件中第1469行~第1472行
.table-hover：鼠标悬停高亮的表格

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: #f5f5f5;
}

.table-condensed：紧凑型表格
.table-responsive：响应式表格
都是响应式布局
（2）tr标签的样式
这里写图片描述
注意要实现悬浮状态，需要在

标签上加入table-hover类

9、表单样式

1）.form-horizontal
水平表单风格（标签名居左，表单控件居右）
这里写图片描述

/*bootstrap.css文件第1963行~第1991行*/
.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
padding-top: 7px;
margin-top: 0;
margin-bottom: 0;
}
.form-horizontal .radio,
.form-horizontal .checkbox {
min-height: 27px;
}
.form-horizontal .form-group {
margin-right: -15px;
margin-left: -15px;
}
.form-horizontal .form-control-static {
padding-top: 7px;
}
@media (min-width: 768px) {
.form-horizontal .control-label {
text-align: right;
  }
}
.form-horizontal .has-feedback .form-control-feedback {
top: 0;
right: 15px;
}

2）内联表单
这里写图片描述
上述效果，在元素中添加类名“form-inline”即可。
如果你要在input前面添加一个label标签时，会导致input换行显示。如果你必须添加这样的一个label标签，并且不想让input换行，你需要将label标签也放在容器“form-group”中

<div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
</div>
<div class="form-group">
    <inputtype="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>

3）在label标签运用了一个类名“sr-only”，就可以将label标签隐藏。
4）在Bootstrap中使用input时也必须添加type类型，因为Bootstrap框架都是通过input[type=“?”]的形式来定义样式的。为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”

<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>

5）多行选择设置multiple属性的值为multiple。Bootstrap框架会为这些元素提供统一的样式风格。
6）textarea
文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。
7)复选框checkbox和单选择按钮radio
Bootstrap框架中checkbox和radio有点特殊，Bootstrap针对他们做了一些特殊化处理，主要是checkbox和radio与label标签配合使用会出现一些小问题（最头痛的是对齐问题）。使用Bootstrap框架，开发人员无需考虑太多，只需要按照下面的方法使用即可。

<form role="form">
<div class="checkbox">
<label>
<input type="checkbox" value="">
记住密码
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
喜欢
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
不喜欢
</label>
</div>
</form>

如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”;
如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”.
8)按钮
在Bootstrap框架中的按钮都是采用button来实现。
这里写图片描述
9)表单控件大小
.input-sm:让控件比正常大小更小
.input-lg:让控件比正常大小更大
如果我们需要控件宽度也要做一定的变化处理。这个时候就要借住Bootstrap框架的网格系统。

<form role="form" class="form-horizontal">
  <div class="form-group">
  <div class="col-xs-4">
    <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
  </div>
  <div class="col-xs-4">
    <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
  </div>
  <div class="col-xs-4">
    <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
  </div>
  </div>
    …
</form>

如果表单使用了类名“form-horizontal”，其中“form-group”就相当于网格系统中的“row”。换句话说，如果没有这样做，要通过网格系统来控制表单控件宽度，就需要这样使用：

<div class="row">
<div class="col-xs-4">
<input class="form-control input-lg" type="text" placeholder=".col-xs-4">
</div>
<div class="col-xs-4">
<input class="form-control input-lg" type="text" placeholder=".col-xs-4">
</div>
<div class="col-xs-4">
<input class="form-control input-lg" type="text" placeholder=".col-xs-4">
</div>
</div>

9）表单控件状态(焦点状态)
焦点状态是通过伪类“:focus”来实现

/*源码*/
.form-control:focus {
border-color: #66afe9;
outline: 0;
  -webkit-box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

从源码中我们可以看出，要让控件在焦点状态下有上面样式效果，需要给控件添加类名“form-control”：

<form role="form" class="form-horizontal">
  <div class="form-group">
    <div class="col-xs-6">
      <input class="form-control input-lg" type="text" placeholder="不是焦点状态下效果">
    </div>
    <div class="col-xs-6">
      <input class="form-control input-lg" type="text" placeholder="焦点点状态下效果">
    </div>
  </div>
</form>

这里写图片描述
在Bootstrap框架中，file、radio和checkbox控件在焦点状态下的效果也与普通的input控件不太一样。原因如下：

/*源码查看boostrap.css文件第1676行～第1682行*/
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}

10）表单控件状态(禁用状态)
只需要在需要禁用的表单控件上加上“disabled”
这里写图片描述
在Bootstrap框架中，如果fieldset设置了disabled属性，整个域都将处于被禁用状态
对于整个禁用的域中，如果legend中有输入框的话，这个输入框是无法被禁用的。

<form role="form">
<fieldset disabled>
<legend><input type="text" class="form-control" placeholder="显然我颜色变灰了，但是我没被禁用，不信？单击试一下" /></legend>
    …
</fieldset>
</form>

11）表单控件状态(验证状态)
.has-warning:警告状态（黄色）
.has-error：错误状态（红色）
.has-success：成功状态（绿色）
使用的时候只需要在form-group容器上对应添加状态类名。

<form role="form">
<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">成功状态</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">警告状态</label>
  <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">错误状态</label>
  <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
</div>
</form>

在表单验证的时候，不同的状态会提供不同的 icon，比如成功是一个对号（√），错误是一个叉号（×）等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名“has-feedback”。
这里写图片描述
从效果图中可以看出，图标都居右。在 Bootstrap 的小图标都是使用@font-face来制作（后面的内容中将会着重用一节内容来介绍）。而且必须在表单中添加了一个 span 元素(跟在input标签后面即可)：

<span class="glyphiconglyphicon-warning-sign form-control-feedback"></span>

12）表单提示信息
使用了一个”help-block”样式，将提示信息以块状显示，并且显示在控件底部。

<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="help-block">你输入的信息是正确的</span>
  <span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div>
  …
</form>

这里写图片描述
在Bootstrap V2.x版本中还提供了一个行内提示信息，其使用了类名“help-inline”。一般让提示信息显示在控件的后面，也就是同一水平显示。如果你想在BootstrapV3.x版本也有这样的效果，你可以添加这段代码：

.help-inline{
  display:inline-block;
  padding-left:5px;
  color: #737373;
}

使用时，就为span标签加class为help-inline
这里写图片描述

little little

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap(上)

一、概念Bootstrap是tiweenter小组的一部分员工为了提高操作css的工作效率，而开发的css框架。开源之后，一举成名，收到很多程序员的亲赖。 bootstrap提供了一些css的样式集和js插件，它的js插件是依赖于jquery的，所以要在bootstrap之前引入jQuery.二、兼容性Bootstrap2.0比较激进，兼容性不友好。Bootstrap3.0则是放弃了对IE
复制链接

扫一扫

专栏目录