玩转Bootstrap（基础）（1.基础知识）

最新推荐文章于 2024-04-20 07:45:59 发布

Rodgexue

最新推荐文章于 2024-04-20 07:45:59 发布

阅读量4.3k

点赞数 2

分类专栏： bootstrap 文章标签： bootstrap jquery 插件 ie

本文链接：https://blog.csdn.net/Rodgexue/article/details/47805765

版权

bootstrap 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了Bootstrap的基础知识，包括依赖jQuery的插件、IE兼容性处理、标题和副标题的样式、文本样式（如粗体、斜体、强调）、文本对齐、列表样式、代码展示以及表格的各种样式。此外，还讲解了如何实现响应式表格，以适应不同设备的显示需求。

摘要由CSDN通过智能技术生成

①bootstrap的插件都依赖于jquery，所有jquery要在bootstrap前加载。

<!DOCTYPE html> //html 5
<html lang="en">
  <head>
    <meta charset="utf-8">
    //bootstrap不支持ie的兼容模式，所以这行代码是让ie运行最新的渲染模式
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    //初始化移动浏览显示，viewport可以控制网页的大小 initial-scale表示设置缩放的比例，1的话为不缩放
    //让视口的宽度等于初始的设备的宽度，缩放比例为1
    <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 -->
    //载入bootstrap的css文件  css文件要放到head中，js文件放到body的最下面
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- 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的 要加入这两句话，对媒体查询进行支持
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <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) -->
    //加入jquery还和bootstrap的插件的支持，js这个要放在最后面来进行加载
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/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模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码：

<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

③标题的使用
通过比较可以发现，Bootstrap标题样式进行了以下显著的优化重置：
1、重新设置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。
2、所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。
3、固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。

<body>
<!--Bootstrap中的标题-->
<h1>Bootstrap标题一</h1>

<!--Bootstrap中让非标题元素和标题使用相同的样式-->
<div class="h1">Bootstrap标题一</div>

<!--任务填写下方-->
<h1>我的第一个bootstrap标题</h1>

</body>
</html>

④在大标题后面加上副标题
除此之外，我们在Web的制作中，常常会碰到在一个标题后面紧跟着一行小的副标题。在Bootstrap中他也考虑了这种排版效果，使用了标签来制作副标题。这个副标题具有其自己的一些独特样式：
1、行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
2、由于内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%；

<body>

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

</body>
</html>

⑤段落（正文文本）
段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）：
另外在Bootstrap中，为了让段落p元素之间具有一定的间距，便于用户阅读文本，特意设置了p元素的margin值（默认情况之下，p元素具有一个上下外边距，并且保持一个行高的高度）：

<body>
<p>超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>
</body>
</html>

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

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

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

⑦ 粗体，斜体
粗体就是给文本加粗，在普通的元素中我们一般通过font-weight设置为bold关键词给文本加粗。在Bootstrap中，可以使用<b>和<strong>标签让文本直接加粗。

斜体类似于加粗一样，除了可以给元素设置样式font-style值为italic实现之外，在Bootstrap中还可以通过使用标签<em>或<i>来实现。
例如，下面的代码使用了<em>和<i>标签定义了强调文本：

<p>我在慕课网上跟<em>大漠</em>一起学习<i>Bootstrap</i>的使用。我一定要学会<i>Bootstrap</i>。</p>

⑧强调相关的类
这些强调类都是通过颜色来表示强调，具本说明如下：
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）

<body>
<div class="text-muted">.text-muted 效果</div>
<div class="text-primary">.text-primary效果</div>
<div class="text-success">.text-success效果</div>
<div class="text-info">.text-info效果</div>
<div class="text-warning">.text-warning效果</div>
<div class="text-danger">.text-danger效果</div>
</body>
</html>

⑨文本对齐
为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：
☑ .text-left：左对齐
☑ .text-center：居中对齐
☑ .text-right：右对齐
☑ .text-justify：两端对齐

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>文本对齐风格</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

<body>
<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">There is clearly a need for CSS to be taken seriously by graphic artists.</p>
</body>
</html>

⑩列表–简介
在HTML文档中，列表结构主要有三种：有序列表、无序列表和定义列表。具体使用的标签说明如下：
无序列表

<ul>
    <li>…</li>
</ul>

有序列表

<ol>
    <li>…</li>
</ol>

定义列表

<dl>
    <dt>…</dt>
    <dd>…</dd>
</dl>

Bootstrap根据平时的使用情形提供了六种形式的列表：
☑ 普通列表
☑ 有序列表
☑ 去点列表
☑ 内联列表
☑ 描述列表
☑ 水平描述列表

<body>
<ul>
    <li>无序列表信息1</li>
    <li>无序列表信息2</li>
</ul>
<ol>
    <li>有序列表信息1</li>
    <li>有序列表信息2</li>
</ol>
<dl>
    <dt>定义列表标题</dt>
    <dd>定义列表信息1</dd>
</dl>
</body>
</html>

Bootstrap对于列表，只是在margin上做了一些调整。我们来看一个简单的示例(右侧代码编辑器10-16行)。

<body>
<h5>普通列表</h5>
<ul>
    <li>列表项目</li>
    <li>列表项目</li>
</ul>
<h5>有序列表</h5>
<ol>
      <li>项目列表一</li>
      <li>项目列表二</li>
</ol>
<h5>有序列表嵌套</h5>
<ol>
    <li>有序列表</li>
    <li>
    有序列表
        <ol>
        <li>有序列表(2)</li>
        <li>有序列表(2)</li>
        </ol>
    </li>
    <li>有序列表</li>
</ol>
</body>
</html>

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

    <li>
    项目列表
        <ul class="list-unstyled">
        <li>不带项目符号</li>
        <li>不带项目符号</li>
        </ul>
    </li>

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

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

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

列表–水平定义列表
水平定义列表就像内联列表一样，Bootstrap可以给

添加类名“.dl-horizontal”给定义列表实现水平显示效果。
其实现主要方式：
1、将dt设置了一个左浮动，并且设置了一个宽度为160px
2、将dd设置一个margin-left的值为180px，达到水平的效果
3、当标题宽度超过160px时，将会显示三个省略号

11）代码
本节内容相对来说比较简单，一般在个人博客上使用的较为频繁，用于显示代码的风格。在Bootstrap主要提供了三种代码风格：
1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码

正如前面所示，

元素一般用于显示大块的代码，并保证原有格式不变。但有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap也考虑到这一点，你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

12）表格
Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。
刚已经说了，Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：
☑ .table：基础表格
☑ .table-striped：斑马线表格
☑ .table-bordered：带边框的表格
☑ .table-hover：鼠标悬停高亮的表格
☑ .table-condensed：紧凑型表格
☑ .table-responsive：响应式表格

这里写图片描述
其使用非常的简单，只需要在元素中添加上表对应的类名，就能达到你自己需要的效果：

<tr class="active">
    <td>…</td>
</tr>

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

表格–鼠标悬浮高亮的表格
当鼠标悬停在表格的行上面有一个高亮的背景色，这样的表格让人看起来就是舒服，时刻告诉用户正在阅读表格哪一行的数据。Bootstrap的确没有让你失望，他也考虑到这种效果，其提供了一个“.table-hover”类名来实现这种表格效果。
鼠标悬停高亮的表格使用也简单，仅需要<table class="table">元素上添加类名“table-hover”即可：

<table class="table table-hover">
…
</table>

<body>
 <table class="table table-striped table-bordered table-hover">
 <!--table为告诉表格，table-striped为实现斑马线一行隔一行加灰，table-bordered为加上边框，table-hover为悬停在百色的地方的话，会加灰 -->
   <thead>
     <tr>
       <th>表格标题</th>
       <th>表格标题</th>
       <th>表格标题</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
   </tbody>
 </table>

表格–紧凑型表格
那么在Bootstrap中，通过类名“table-condensed”重置了单元格内距值。
紧凑型表格的运用，也只是需要在

基础上添加类名“table-condensed”：

表格–响应式表格
随着各种手持设备的出现，要想让你的Web页面适合千罗万像的设备浏览，响应式设计的呼声越来越高。在Bootstrap中也为表格提供了响应式的效果，将其称为响应式表格。
Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。就是在外层价格div来让其自适应。示例如下：

<div class="table-responsive">
<table class="table table-bordered">
   …
</table>
</div>

Rodgexue

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

玩转Bootstrap（基础） （1.基础知识）

玩转Bootstrap（基础）（1.基础知识）