您的位置：首页 > Web前端 > BootStrap

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

2015-08-20 11:48 621 查看
①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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航