前端第21天--bootstrap的表单、按钮、图片、字体图标和nav导航类、媒体查询

最新推荐文章于 2024-08-23 08:50:53 发布

张登辉的奇妙旅程

最新推荐文章于 2024-08-23 08:50:53 发布

阅读量185

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/A444477/article/details/116243812

版权

CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

前端第21天–bootstrap的表单

表单

在这里插入图片描述

<body>
    <form action="" class="form-horizontal">
        <!-- row用form-group代替 -->
        <!-- 栅格布局中，列用col代替 -->
        <div class="form-group" >
            <!-- 通过control-label对label添加样式 -->
            <label for="" class="col-lg-2 control-label" >用户名</label>
            <div class="col-lg-3">
                <!-- 通过form-control对input添加样式 -->
                <input type="text" class="form-control">
            </div>
        </div>

        <div class="form-group" >
            <label for="" class="col-lg-2 control-label" >密码</label>
            <div class="col-lg-3">
                <input type="text" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <div class="col-lg-2 col-lg-offset-2">
                <button class="btn btn-success">登录</button>
            </div>
        </div>
    </form>
</body>

按钮

在这里插入图片描述

<a href="" class="btn">按钮1</a>
    <a href="" class="btn btn-default">按钮1</a>
    <button class="btn btn-default">按钮2</button>
    <input type="text" name="" id="" value="按钮3" class="btn btn-default">

    <div class="btn btn-default">按钮4</div>
    <br><br>
    <button class="btn btn-default">按钮</button>
    <button class="btn btn-primary">按钮</button>
    <button class="btn btn-success">按钮</button>
    <button class="btn btn-info  btn-lg">按钮</button>
    <button class="btn btn-warning  btn-sm">按钮</button>
    <button class="btn btn-danger  btn-xs">按钮</button>
    <button class="btn btn-link btn-default">按钮</button>

图片

在这里插入图片描述

<!-- 引入图片 -->
    <!-- 响应式的 -->
    <img src="../../pic/banner.jpg" alt="" class="img-responsive">
    <!-- 圆形 -->
    <img src="../../pic/banner.jpg" alt="" class="img-rounded">
    <!-- 圈 -->
    <img src="../../pic/banner.jpg" alt="" class="img-circle">
    <!-- 双线 -->
    <img src="../../pic/banner.jpg" alt="" class="img-thumbnail">

字体图标和nav导航类

在这里插入图片描述

<body>
    <!-- 字体图标 -->
    <!-- aria-hidden是让屏幕读取设备跳过，即对浏览器隐藏 -->
    <button type="button" class="btn btn-default" aria-label="Left Align">
        <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
      </button>
      
      <button type="button" class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
      </button>

      <!-- 导航 -->
      <!-- 更多的导航类 -->
      <!-- 嵌套规则也很重要 -->
      <ul class="nav nav-pills">
          <li>你好</li>
          <li>世界</li>
          <li>世纪</li>
          <li>实际</li>
          <li>你号</li>
      </ul>
</body>

font-face

在这里插入图片描述

媒体查询

在这里插入图片描述

<link rel="stylesheet" href="style1.css" media="screen and (min-width:1000px)">
</head>
<body>
    <div class="demo">
        <span>你好</span>
    </div>
</body>

内嵌式媒体查询

@media screen and (min-width:600px) {
    .demo {
        background-color: skyblue;
    }
}

张登辉的奇妙旅程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录