Bootstrap复习三——CSS组件1

最新推荐文章于 2022-04-28 17:04:19 发布

落花新月

最新推荐文章于 2022-04-28 17:04:19 发布

阅读量679

点赞数

分类专栏： Web前端文章标签：响应式图片 bootstrap 辅助样式下拉菜单 CSS组件按钮组

本文链接：https://blog.csdn.net/luohuaxinyue/article/details/50687565

版权

Web前端专栏收录该内容

68 篇文章 1 订阅

订阅专栏

1.Bootstrap基本模板：

<!DOCTYPE html>
<html lang="zh-CN">
<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">                                  //移动设备优先，根据屏幕自动缩放
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->    <title>Bootstrap 101 Template</title>        <link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">    <script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.min.js"></script>    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>    <!-- 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="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>    <![endif]--></head><body><h1>你好，世界！</h1></body></html>

2. .page-header类用来写页面的页头，下面自带分割线

3.响应式图片：通过为图片添加 .img-responsive 类可以让图片支持响应式布局。

如：

<img src="baochai.jpg"  alt="宝钗" class="img-responsive">

不同窗口大小下的运行效果：

4.图片形状：

.img-rounded:圆角图片

.img-circle：圆形图片
.img-thumbnail：带圆角的边框
示例代码：
<img src="baochai.jpg"  alt="宝钗" class="img-responsive img-circle">
运行效果：

5. 使用了 .img-responsive 类的图片要想水平居中，用 .center-block 类，而不用 .text-center 。

如：

<img src="baochai.jpg"  alt="宝钗" class="img-responsive img-circle center-block">

运行效果：

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

6. 用.list-unstyled类来清除li的样式

7.快速浮动：

.pull-left :左浮动

.pull-right:右浮动

8.清除浮动

通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）。

9.情景背景色

.bg-primary

.bg-success

10.辅助样式：

以上内容示例代码：

<h2 class="page-header">清除浮动</h2>
<div class="clearfix bg-danger">
    <ul class="list-unstyled">
        <li class="pull-left">
            <a href="#"><img src=" images/03.jpg" class="img-responsive"></a><br>
            <a href="#">女神</a>
        </li>
        <li class="pull-left">
            <a href="#"><img src=" images/03.jpg" class="img-responsive"></a><br>
            <a href="#">女神</a>
        </li>
        <li class="pull-left" >
            <a href="#"><img src=" images/03.jpg" class="img-responsive"></a><br>
            <a href="#">女神</a>
        </li>
        <li class="pull-left">
            <a href="#"><img src=" images/01.PNG" class="img-responsive"></a><br>
            <a href="#">女神</a>
        </li>
        <li class="pull-left" >
            <a href="#"><img src=" images/01.PNG" class="img-responsive"></a><br>
            <a href="#">女神</a>
        </li>
        <li class="pull-left" >
            <a href="#"><img src=" images/01.PNG" class="img-responsive"></a><br>
            <a href="#">女神</a>
        </li>
    </ul>
</div>

运行效果：

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

11.CSS组件

12.小三角符号

<span class="caret"></span>

里面不能放任何的东西

13.下拉列表示例代码：

<h2 class="page-header">下拉菜单</h2>
<div class="dropdown">           <!-- class="dropdown"不能少，表明整个的这个div是一个下拉列表-->
    <!--data-toggle="dropdown"就相当于触发器-->
    <button class="btn bg-primary btn-lg" data-toggle="dropdown">轻松调频
       <span class="caret"></span>   <!--该span标签中不要放任何内容，但是要记得加class="caret"-->
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Easy Morning</a></li>   <!-- 内容放在<a></a>标签里面-->
        <li><a href="#">More to learn</a></li>
        <li><a href="#">China Drive</a></li>
        <li><a href="#">The Shuffle</a></li>
    </ul>
</div>

运行效果：

添加分割线：

<li class="divider"></li>      <!--添加分割线-->
<li class="bg-info"><a href="#">落日大道</a></li>
<li class="bg-info"><a href="#">轻松咖啡馆</a></li>
<li class="bg-info"><a href="#">岁月留声</a></li>

运行效果：

14.按钮组：

15.按钮工具栏：

把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件。

示例代码：

<h2 class="page-header">按钮组</h2>
 <div class="btn-toolbar">      <!--btn-toolbar按钮工具栏-->
     <div class="btn-group  btn-group-sm">
         <button class="btn bg-warning">选择</button>
         <button class="btn  bg-success">保存</button>
         <button class="btn  bg-warning">透视</button>
         &nbsp;&nbsp;&nbsp;
     </div>
     <div class="btn-group">
         <button class="btn bg-info">1</button>
         <button class="btn bg-info">2</button>
         <button class="btn bg-info">3</button>
         &nbsp;&nbsp;&nbsp;
     </div>
     <!--垂直按钮组，按钮垂直排列-->
     <div class="btn-group btn-group-lg btn-group-vertical">
         <!--btn-group-vertical设置垂直按钮组，btn-group-lg按钮组的大小-->
         <button class="btn  bg-danger">左</button>
         <button class="btn  bg-primary">中</button>
         <button class="btn  bg-danger">右</button>
     </div>

 </div>

运行效果：

16.分裂式按钮下拉菜单

示例代码：

<h2 class="page-header">分裂式按钮下拉菜单</h2>
<div class="btn-group btn-group-lg">
    <button class="btn bg-danger">编程语言</button>  <!--此时左边是一个普通的按钮-->
    <!--右边相当于是把小三角放在了一个单独的按钮里面了，触发器是放在这个按钮里面的，不是左边的按钮-->
    <button class="btn bg-danger dropdown-toggle" data-toggle="dropdown">
        <!--注意： data-toggle="dropdown"是写在button里面，而不是三角span标签里面-->
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Java</a></li>
        <li><a href="#">C#</a></li>
        <li><a href="#">PHP</a></li>
    </ul>
</div>

运行效果：

落花新月

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap复习三——CSS组件1

1.Bootstrap基本模板：html>lang="zh-CN"> charset="utf-8"> http-equiv="X-UA-Compatible" content="IE=edge"> //用最新的IE内核来解析 name="viewport" content="width=device-width, initial-scale=1">
复制链接

扫一扫

专栏目录