bootstrap 实现吸顶效果_最受欢迎的前端框架Bootstrap

最新推荐文章于 2022-09-15 10:18:12 发布

weixin_39623244

最新推荐文章于 2022-09-15 10:18:12 发布

阅读量236

点赞数

文章标签： bootstrap 实现吸顶效果

本文链接：https://blog.csdn.net/weixin_39623244/article/details/111686357

版权

Bootstrap的一些基本样式和组件，包括容器、页头、媒体组件、图片、列表组。重新实现了上节课的hello.html。我们并未写CSS文件，仅使用Bootstrap就达到了这样的效果，所以讲Bootstrap是一个强大的前端框架！

Bootstrap通过CSS文件来提供样式，同样在中加以引入：

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

这里引入了cdn.bootcs.com提供了CSS文件，也可以把它下载到本地引用。此后，我们在HTML中通过class来应用

用.container来给页面加合适的边距(代替hello.html中body的padding)：

<html><head>
  <title>Hello, Catty!title>
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">head><body><div class="container">
  <h1>Catie's Homepageh1>
  <h2 id="subtitle">i am a little, cute catie...h2>
  <img src="./catty.jpeg" class="avatar">
  <div>
    <p>I like fruits!!!p>
    <ul>
      <li>Cherryli>
      <li>Peachli>
      <li><a href='http://www.baidu.com'>Strawberrya>li>
    ul>
  div>div>body>html>

下图的边缘已经有了一定的边距：

Bootstrap 页头组件(.page-header)用来显示一个简易的页头。它会为其中的标签增加适当的空间

Bootstrap 媒体组件是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片(就像博客评论或 Twitter 消息等)。

我们重新组织hello.html的内容：

<div class="media">
  <div class="media-left">
    <a><img class="media-object" src="./catty.jpeg">a>
  div>
  <div class="media-body">
    <h4 class="media-heading">I like fruits!!! h4>  
    <ul>
      <li>Cherryli>
      <li>Peachli>
      <li><a href="http://www.baidu.com">Strawberrya>li>
    ul>
  div>div>

得到左侧图片，右侧文字的样式：

图片

Bootstrap图片用于显示响应式的图片，添加圆角、环绕等效果。我们来重写媒体组件中的标签：

<img class="media-object img-circle img-thumbnail"style="width: 100px;height:100px;max-width:100px;"src="./catty.jpeg">

img-circle让图片变成了圆形，而img-thumbnail给图片加了白色圆环：

列表组

列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容。我们用它来显示水果列表：

<div class="list-group">
  <a class="list-group-item" href="#">Cherrya>
  <a class="list-group-item" href="#">Peacha>
  <a class="list-group-item" href="http://www.baidu.com">Strawberrya>div>

.list-group还提供了悬停效果：

weixin_39623244

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap 实现吸顶效果_最受欢迎的前端框架Bootstrap

Bootstrap的一些基本样式和组件，包括容器、页头、媒体组件、图片、列表组。重新实现了上节课的hello.html。我们并未写CSS文件，仅使用Bootstrap就达到了这样的效果，所以讲Bootstrap是一个强大的前端框架！Bootstrap通过CSS文件来提供样式，同样在中加以引入：<link rel="stylesheet" href="http://cdn.bootc...
复制链接

扫一扫