Bootstrap

最新推荐文章于 2020-05-23 14:40:17 发布

曾二万

最新推荐文章于 2020-05-23 14:40:17 发布

阅读量164

点赞数

分类专栏：前端文章标签： Bootstrap

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Bootstrap 包的内容
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构部分详细讲解。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件部分详细讲解。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：

如果您下载了 Bootstrap 源代码，那么文件结构将如下所示：

如果您下载了 Bootstrap 源代码，那么文件结构将如下所示：
less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。

导包

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

常见图标：

  <p>云图标: <span class="glyphicon glyphicon-cloud"></span></p>      
          <p>信件图标: <span class="glyphicon glyphicon-envelope"></span></p>            
          <p>搜索图标: <span class="glyphicon glyphicon-search"></span></p>
          <p>打印图标: <span class="glyphicon glyphicon-print"></span></p>      
          <p>下载图标：<span class="glyphicon glyphicon-download"></span></p>

Bootstrap自学

如何使用字型图标

获取字体图标
我们已经在环境安装章节下载了 Bootstrap 3.x 版本，并理解了它的目录结构。在 fonts 文件夹内可以找到字体图标，它包含了下列这些文件：

 glyphicons-halflings-regular.eot
    glyphicons-halflings-regular.svg
    glyphicons-halflings-regular.ttf
    glyphicons-halflings-regular.woff

相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 实例 - 如何使用字形图标（Glyphicons）</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<p>
	<button type="button" class="btn btn-default">
		<span class="glyphicon glyphicon-sort-by-attributes"></span>
	</button>
	<button type="button" class="btn btn-default">
		<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
	</button>
	<button type="button" class="btn btn-default">
		<span class="glyphicon glyphicon-sort-by-order"></span>
	</button>
	<button type="button" class="btn btn-default">
		<span class="glyphicon glyphicon-sort-by-order-alt"></span>
	</button>
</p>
<button type="button" class="btn btn-default btn-lg">
	<span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-sm">
	<span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-xs">
	<span class="glyphicon glyphicon-user"></span> User
</button>


</body>
</html>

字体图标

导航栏的字形图标

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>导航栏的字形图标</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<style>
 body {
    padding-top: 50px;
    padding-left: 50px;
}
</style>
<!--[if lt IE 9]>
    <script src="https://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
    
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
                <li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart"></span> Shop</a></li>
                <li><a href="#support"><span class="glyphicon glyphicon-headphones"></span> Support</a></li>
            </ul>
        </div><!-- /.nav-collapse -->
    </div><!-- /.container -->
</div>
<!-- jQuery (Bootstrap 插件需要引入) -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 包含了所有编译插件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
</body>
</html>

导航栏的字形图标
定制字体图标

<button type="button" class="btn btn-primary btn-lg">
  <span class="glyphicon glyphicon-user"></span> User
</button>

定制字体尺寸

<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
  <span class="glyphicon glyphicon-user"></span> User
</button>

定制字体颜色

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
  <span class="glyphicon glyphicon-user"></span> User
</button>

应用文本阴影

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User
</button>

http://www.runoob.com/bootstrap/bootstrap-glyphicons.html 好多图标

曾二万

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap

Bootstrap 包的内容基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构部分详细讲解。CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。组件：Bootstrap 包含了十几个可重...
复制链接

扫一扫

专栏目录