2. IT
    3. Bootstrap(上)

    Bootstrap(上)

    xiaoxiao2021-03-25  74

    一、概念

    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

    转载请注明原文地址: https://ju.6miu.com/read-34263.html

    技术

    最新回复(0)