Bootstrap学习1

最新推荐文章于 2025-02-22 06:01:38 发布

栀虞子

最新推荐文章于 2025-02-22 06:01:38 发布

阅读量802

点赞数

分类专栏：学习笔记文章标签： bootstrap 学习 html

本文链接：https://blog.youkuaiyun.com/qq_52476758/article/details/123057070

版权

学习笔记专栏收录该内容

20 篇文章

订阅专栏

1. Bootstrap的认识

Bootstrap是简单灵活的用于搭建Web页面的HTML、CSS、JavaScript的工具集，整体形成一个前端开发框架
基于html5、css3的bootstrap，具有大量的诱人特性：
（1）漂亮的设计；
（2）友好的学习曲线；
（3）卓越的兼容性；
（4）响应式设计；
（5）12列格网；
（6）样式向导文档。
自定义JQuery插件，完整的类库，基于Less等。

2. 如何使用Bootstrap

bootstrap不支持ie的兼容模式；(加入如下代码：可在IE浏览器中运行最新的渲染模式)
初始化移动浏览器显示(移动浏览器是把页面放在一个虚拟的视口中，即viewport，通常这个虚拟的视口比屏幕宽，这样就不用把每个网页挤到很小的视口中，但是这样会破坏没有针对移动浏览器优化的网页布局)（viewport可用于控制大小及缩放（代码可理解为让视口的宽度为物理设备上真实的分辨率，即宽度，初始的缩放比例为1，即不缩放）
加入jQuery和js插件（bootstrap中的js插件依赖于jquery，因此jquery要在bootstrap之前引用。）
js文件放在body的最下面：css文件放在head中，jquery文件放在body的最下面，bootstrap基于jquery，所以jquery要先引入。把js放在body里，主要是为了加速页面加载。如果把js 放到head头部加载，会延迟页面加载时间。因为js加载是同步加载。有抑制加载的作用。
指定用户是否可以缩放视区，即缩放Web页面的视图，是user-scalable指令 ,值为yes时允许用户进行缩放，值为no时不允许缩放。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap的HTML标准模板</title>   
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!--你自己的样式文件 -->
        <link href="css/your-style.css" rel="stylesheet">        
        <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
        <!-- 注意：respond.js 不支持file://方式的访问 -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <h1>Hello, world!</h1>
        
        <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
        <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

3. Bootstrap用法

3.1 主副标题

<!--Bootstrap中使用了<small>标签来制作副标题-->
<h1>Bootstrap标题一<small>我是副标题</small></h1>

3.2 让一个段落p突出显示

可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。Bootstrap还通过元素标签:<small>、<strong>、<b>、<em>、<i>和<cite>给文本做突出样式处理。

<p>我是一个普通的段落，我不需要强调显示</p>
<p class="lead">这部分内容需要特别的强调，我和别人长得不一样</p>

3.3 强调相关的类

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

3.4 文本对齐风格

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

3.5 列表

普通列表和有序列表

 // 列表嵌套
   <ol>
       <li>有序列表</li>
       <li>
       有序列表
           <ul>
           <li>有序列表(2)</li>
           <li>有序列表(2)</li>
           </ul>
       </li>
       <li>有序列表</li>
   </ol>

去点列表

Bootstrap为众多开发者考虑的非常周道，通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格
内联列表

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

定义列表

对于定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。

<dl>
    <dt>W3cplus</dt>
    <dd>一个致力于推广国内前端行业的技术博客</dd>
    <dt>慕课网</dt>
    <dd>一个真心在做教育的网站</dd>
</dl>

水平描述列表

水平定义列表就像内联列表一样，Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。

此处添加了一个媒体查询。也就是说，只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式：
1. 将dt设置了一个左浮动，并且设置了一个宽度为160px
2. 将dd设置一个margin-left的值为180px，达到水平的效果
3. 当标题宽度超过160px时，将会显示三个省略号

3.6 代码风格

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

不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码&lt来替代，大于号(>)使用&gt来替代。而且对于<pre>代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格

4. 表格

表格行的类

Bootstrap还为表格的行元素<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色，使用只需要在元素中添加上表对应的类名，就能达到你自己需要的效果，比如：

在这里插入图片描述

注意：除了”.active”之外，其他四个类名和”.table-hover”配合使用时，Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置，所以如果需要给tr元素添加其他颜色样式时，在”.table-hover”表格中也要做相应的调整。

注意要实现悬浮状态，需要在<table>标签上加入table-hover类。

.table：基础表格
- 给表格设置了margin-bottom:20px以及设置单元内距
- 在thead底部设置了一个2px的浅灰实线
- 每个单元格顶部设置了一个1px的浅灰实线

.table-striped：斑马线表格

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

.table-bordered：带边框的表格

所有单元格具有一条1px的边框。 border: 1px solid #ddd;
.table-hover：鼠标悬停高亮的表格

当你鼠标悬浮在某一单元格上时，单元格所在行的背景色都会变成浅灰色
.table-condensed：紧凑型表格

何谓紧凑型表格，简单理解，就是单元格没内距或者内距较其他表格的内距更小。换句话说，要实现紧凑型表格只需要重置表格单元格的内距padding的值。那么在Bootstrap中，通过类名“table-condensed”重置了单元格内距值，只是将单元格的内距由8px调至5px。
.table-responsive：响应式表格

Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失

5. 表单

5.1 表单分类

5.1.1 基础表单

对于基础表单，Bootstrap并未对其做太多的定制性效果设计，仅仅对表单内的fieldset、legend、label标签进行了定制主要将这些元素的margin、padding和border等进行了细化设置。

当然表单除了这几个元素之外，还有input、select、textarea等元素。在Bootstrap框架中，通过定制了一个类名form-control，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。

1、宽度变成了100%

2、设置了一个浅灰色（#ccc）的边框

3、具有4px的圆角

4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化

5、设置了placeholder的颜色为#999

5.1.2 水平表单

在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：
1、在元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。

在<form>元素上使用类名“form-horizontal”主要有以下几个作用：
1、设置表单控件padding和margin值。
2、改变“form-group”的表现形式，类似于网格系统的“row”。

5.1.3 内联表单

1. 在元素中添加类名“form-inline”即可。内联表单实现原理非常简单，欲将表单控件在一行显示，就需要将表单控件设置成内联块元素（display:inline-block）。
2. 如果你要在input前面添加一个label标签时，会导致input换行显示。如果你必须添加这样的一个label标签，并且不想让input换行，你需要将label标签也放在容器“form-group”中
3. 在label标签运用了一个类名“sr-only”，标签没显示就是这个样式将标签隐藏了

5.2 表单控件

5.2.1 输入框-input

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

5.2.2 下拉选择框-select

Bootstrap框架中的下拉选择框使用和原始的一致，多行选择设置multiple属性的值为multiple

5.2.3 文本域-textarea

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

5.2.4 复选框-checkbox和单选择按钮-radio

1、不管是checkbox还是radio都使用label包起来了
2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
3、radio连同label标签放置在一个名为“.radio”的容器内

将复选框和单选按钮需要水平排列。Bootstrap框架也做了这方面的考虑：
1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”

<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>

5.2.5 按钮

input[type=“submit”]
input[type=“button”]
input[type=“reset”]
<button>

5.2.6 表单控件的大小

可以通过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是：
1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大

这两个类适用于表单中的input，textarea和select控件

5.3 表单控件状态

5.3.1 焦点状态

焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式，重新添加阴影效果。要让控件在焦点状态下有上面样式效果，需要给控件添加类名“form-control”

5.3.2 禁用状态

Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的，在相应的表单控件上添加属性“disabled”，使用方法为：只需要在需要禁用的表单控件上加上“disabled”即可。
在使用了“form-control”的表单控件中，样式设置了禁用表单背景色为灰色，而且手型变成了不准输入的形状。如果控件中不使用类名“form-control”，禁用的控件只会有一个不准输入的手型出来。
在Bootstrap框架中，如果fieldset设置了disabled属性，整个域都将处于被禁用状态
据说对于整个禁用的域中，如果legend中有输入框的话，这个输入框是无法被禁用的

<body>
<h3>示例1</h3>
<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" id="disabledInput" type="text" placeholder="表单已被禁用，不可输入" disabled>
    </div>
  </div> 
</form> 
    
<h3>示例2</h3>   
<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> 
    
<h3>示例3</h3>
<form role="form">
  <fieldset disabled>
    <legend><input type="text" class="form-control" placeholder="显然我颜色变灰了，但是我没被禁用，不信？单击试一下" /></legend>
  </fieldset>
</form>  
</body>

5.3.3 验证状态

供验证状态样式，在Bootstrap框架中同样提供这几种效果。
1、.has-warning:警告状态（黄色）
2、.has-error：错误状态（红色）
3、.has-success：成功状态（绿色）
使用的时候只需要在form-group容器上对应添加状态类名

另外，在表单验证的时候，不同的状态会提供不同的 icon，只需要在对应的状态下添加类名“has-feedback”，所以必须在表单中添加了一个 span 元素，如下

<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="glyphiconglyphicon-warning-sign form-control-feedback"></span>
</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>