首页 > 代码库 > bootstarp使用

bootstarp使用

2024-09-05 22:52:42   220人阅读

    bootstrap中的JS插件依赖于jQuery，引用bootstrap文件时，需先引入jQuery文件。

    bootstrap官方网址为：http://getbootstrap.com/   需要看详细内容可点击。

    下面简单介绍一下如何使用。

    1、开始使用

   可使用官网给出的模板进行编写代码（已添加相应注释）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 表示在IE中运行最新的渲染模式 -->
    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- 初始化移动浏览显示，视口宽度等于物理设备真实分辨率，初始缩放比例设置为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="http://www.mamicode.com/css/bootstrap.min.css" rel="stylesheet"><!-- 载入bootstrap的css文件 -->

     <!-- bootstrap3不支持IE9以下版本，因此需引用如下文件使其支持IE8 -->
    <!-- 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]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script><!-- 使IE8支持HTML5标签 -->
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><!-- 使IE8支持媒体查询 -->
    <![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="http://www.mamicode.com/js/bootstrap.min.js"></script>
</body>
</html>

　

 2、bootstrap的全局样式采用了“normalize.css”，并在此基础上进行改良。

3、使用方法

     1）标题：

<!--Bootstrap中的标题-->
<h1>Bootstrap标题一</h1>
<h2>Bootstrap标题二</h2>
<h3>Bootstrap标题三</h3>
<h4>Bootstrap标题四</h4>
<h5>Bootstrap标题五</h5>
<h6>Bootstrap标题六</h6>

<!--Bootstrap中让非标题元素和标题使用相同的样式-->
<div class="h1">Bootstrap标题一</div>
<div class="h2">Bootstrap标题二</div>
<div class="h3">Bootstrap标题三</div>
<div class="h4">Bootstrap标题四</div>
<div class="h5">Bootstrap标题五</div>
<div class="h6">Bootstrap标题六</div>

　　显示结果为：

       技术分享

2）副标题

<!--Bootstrap中使用了<small>标签来制作副标题-->
<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>

　　显示结果为：

    技术分享

3）段落：

     

<p>我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。</p>
<p>我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。</p>

　显示结果为：

　技术分享

4）段落强调

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

　　显示结果为：

   技术分享

5）粗体

<p>我是段落<strong>我是粗体</strong>，我是段落<strong>我是粗体</strong>我是段落</p>
<p>我是一个段落，这个段落中“<b>强调</b>”一词将会加粗显示。</p>

　　显示结果为：

     技术分享

6）斜体  

<p>我是段落<em>我是斜体</em>我是段落<i>我是斜体</i>我是段落<i>我是斜体</i>。</p>

　　显示结果为：

     技术分享

7）强调相关类   

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

　　显示结果为：

     技术分享

8）文本对齐   

<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. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. 两端对齐</p>

　　显示结果为：

   技术分享

9)列表

   在HTML文档中，列表结构主要有三种：有序列表、无序列表和定义列表。

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

a.无序列表和有序列表与原来使用方法一致

  

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

　　显示结果为：

   技术分享

b.去点列表（去掉前面的样式）

<!--无序列表去点-->
<ul>
    <li>
    项目列表
        <ul>
        <li>带有项目符号</li>
        <li>带有项目符号</li>
        </ul>
    </li>
    <li>
    项目列表
        <ul class="list-unstyled">
        <li>不带项目符号</li>
        <li>不带项目符号</li>
        </ul>
    </li>
    <li>项目列表</li>
</ul>
<!--有序列表去序号-->
<ol>
    <li>
    项目列表
        <ol>
        <li>带有项目编号</li>
        <li>带有项目编号</li>
        </ol>
    </li>
    <li>
    项目列表
        <ol class="list-unstyled">
        <li>不带项目编号</li>
        <li>不带项目编号</li>
        </ol>
    </li>
    <li>项目列表</li>
</ol>

　　显示结果为：

技术分享

c.内联列表（可制作水平菜单）

<ul class="list-inline">
    <li>W3cplus</li>
    <li>Blog</li>
    <li>CSS3</li>
    <li>jQuery</li>
    <li>PHP</li>
</ul>

　　显示结果为：

技术分享

d.定义列表（使用方式没变，只是改变了些样式）

<dl>
     <dt>北京</dt>
     <dd>北京是中国的首都，是政治文化集中地</dd>
     <dt>上海</dt>
     <dd>上海号称东方的巴黎</dd>
</dl>

　　显示结果为：

技术分享

e.水平定义列表

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

<dl class="dl-horizontal">
    <dt>我来测试一个标题，我来测试一个标题</dt>
    <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd>
     <dt>标题一：</dt>
     <dd>描述内容</dd>
     <dt>标题二：</dt>
     <dd>描述内容</dd>
</dl>
width>768时：

　　

　　

bootstarp使用


联系
我们