Bootstrap之辅助类样式,响应式工具和小图标组件

Bootstrap之辅助类样式,响应式工具和小图标组件的使用

一. 辅助类样式

Bootstrap 在布局方面提供了一些细小的辅助类样式,用于文字颜色以及背景色的设置、显示关闭图标等等。

1. 文本颜色类
Bootstrap之辅助类样式,响应式工具和小图标组件_第1张图片

2. 背景颜色类
Bootstrap之辅助类样式,响应式工具和小图标组件_第2张图片

3. 其他类

关闭按钮 close

三角符号 caret

块级居中 center-block

快速浮动 pull-left(左浮动),pull-right(右浮动)

清理浮动 clearfix

显示和隐藏 show(显示),hidden(隐藏)

二. 响应式工具

之所以介绍响应式工具,是因为在媒体查询时,针对不同的屏幕大小,有时需要显示和隐藏部分内容。

Bootstrap之辅助类样式,响应式工具和小图标组件_第3张图片

超小屏幕激活隐藏 hidden-xs

超小屏幕激活显示 visible-xs-block

注:对于显示的内容,有三种变体,分别为:block、inline-block、inline。

三. 小图标组件

Bootstrap 提供了免费的 263 个小图标(数字可能改变),具体可以参考中文官网的组件。

网址:http://v3.bootcss.com/components/#glyphicons。

部分小图标:
Bootstrap之辅助类样式,响应式工具和小图标组件_第4张图片

使用方式:

  • 配合标签使用
    <i class="glyphicon glyphicon-star">stari>
    <span class="glyphicon glyphicon-heart">heartspan>
  • 配合按钮使用
    <button class="btn btn-default btn-lg">
        <i class="glyphicon glyphicon-glass">i>
    button>

四. 具体使用演示代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=no">
    <title>test4 辅助类和响应式工具title>
    <link rel="stylesheet" href="../bootstrap-3.3.4/css/bootstrap.min.css">
    <style type="text/css">
    .a{
        height:50px;
        width: 100px;
        border: 1px solid black;
        background-color: #ccc;
    }
    style>
head>

<body style="margin: 10px; ">

    文本颜色
    <p class="text-muted">text-mutedp>
    <p class="text-primary">text-primaryp>
    <p class="text-success">text-successp>
    <p class="text-info">text-infop>
    <p class="text-warning">text-warningp>
    <p class="text-danger">text-dangerp>

    <br>背景颜色
    <p class="bg-primary">bg-primaryp>
    <p class="bg-success">bg-successp>
    <p class="bg-info">bg-infop>
    <p class="bg-warning">bg-warningp>
    <p class="bg-danger">bg-dangerp>

    <br>关闭按钮<br>
    <button class="close">×button>

    <br>三角符号<br>
    <span class="caret">span>

    <hr style= "border: 1px solid red">

    <br>快速浮动<br>
    <div class="pull-left a">leftdiv>
    <div class="pull-right a">rightdiv>

    <hr style= "border: 1px solid red">

    <br><br>区块居中<br>
    <div class="center-block a">center-blockdiv>

    <hr style= "border: 1px solid red">

    <br>请除浮动<br>
    <div class="pull-left a">leftdiv>左浮动
    <div class="clearfix">div> 
    <div class="a">no-flowdiv>

    <hr style= "border: 1px solid red">

    <br>显示/隐藏<br>
    <div class="show">showdiv>
    <div class="hidden">hiddendiv>


    
    <div class="visible-xs-inline a">超小屏激活显示div>
    <div class="hidden-xs a">超小屏激活隐藏div>

    

    
    <i class="glyphicon glyphicon-star">stari>
    <span class="glyphicon glyphicon-heart">heartspan>

    
    <button class="btn btn-default btn-lg">
        <i class="glyphicon glyphicon-glass">i>
    button>

body>
html>

你可能感兴趣的:(web前端,bootstrap,响应式,小图标组件,辅助类样式)