学习地址：http://www.runoob.com/bootstrap/bootstrap-tutorial.html

自己练习了下

主要是使用了bootstrap中包含的class类样式，只要给相应的HTML元素添加上该类，就可以实现相应的效果。

只是需要记住都有哪些class，并依据相应的语法实现。

完整代码:

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" href="../bootstrap.min.css">

    <script src="../jquery-3.3.1.min.js"></script>

    <script src="../bootstrap.min.js"></script>

    <style>

      .fakeimg{

        height: 200px;

        background-color: darkgray;

      }

    </style>

</head>

<body>

  <div class="jumbotron text-center" style="margin-bottom:0">

    <h1>我的第一个 Bootrap 页面!</h1>

    <p>重置浏览器窗口大小查看效果</p>

  </div>

  <nav class="navbar navbar-inverse" role="navigation">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a href="#" class="navbar-brand">网站名</a>

    </div>

    <div class="collapse navbar-collapse" id="example-navbar-collapse">

      <ul class="nav navbar-nav">

        <li class="active"><a href="#">主页</a></li>

        <li><a href="#">页面2</a></li>

        <li><a href="#">页面3</a></li>

      </ul>

    </div>

  </nav>

  <div class="container">

    <div class="row">

      <div class="col-sm-4">

          <h2>关于我</h2>

          <h4>我的照片</h4>

          <div class="fakeimg">这边插入图像</div>

          <span>关于我的介绍...</span>

          <h3>链接</h3>

          <h5>描述文本</h5>

          <ul class="nav nav-pills nav-stacked">

            <li class="active"><a href="#">链接1</a></li>

            <li><a href="#">链接2</a></li>

            <li><a href="#">链接3</a></li>

          </ul>

      </div>

      <div class="col-sm-8">

          <h2>标题</h2>

          <h4>副标题</h4>

          <div class="fakeimg">图像</div>

          <p>一些文本</p>

          <p>

              菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！

          </p>

          <h2>标题</h2>

          <h4>副标题</h4>

          <div class="fakeimg">图像</div>

          <p>一些文本</p>

          <p>

              菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！

          </p>

      </div>

    </div>

  </div>

  <div class="jumbotron text-center" style="margin-bottom:0">

    <span>底部内容</span>

  </div>

</body>

</html>

需要引入bootstrap.min.css , jquery.min.js , bootstrap.min.js文件

只要记住了这些class类的名称及用法，还是比较简单的，添加样式时会更加简便一点。

bootstrap浅谈的更多相关文章

  1. 浅谈angular2+ionic2

    浅谈angular2+ionic2   前言: 不要用angular的语法去写angular2,有人说二者就像Java和JavaScript的区别.   1. 项目所用:angular2+ionic2 ...

  2. 浅谈HTML5单页面架构（一）——requirejs + angular + angular-route

    心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...

  3. Vue浅谈

    谈Vue 最近在学习Vue相关的知识点并且也做一些练手,就在学习过程中出现的各种坑爹的地方做一个总结!之后再遇到也不会抓瞎. 1.Vue工程的安装 (1)首先先安装node.js这是Vue的运行基础. ...

  4. 【ASP.NET MVC系列】浅谈NuGet在VS中的运用

    一     概述 在我们讲解NuGet前,我们先来看看一个例子. 1.例子: 假设现在开发一套系统,其中前端框架我们选择Bootstrap,由于选择Bootstrap作为前端框架,因此,在项目中,我们 ...

  5. AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

    requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...

  6. 【ASP.NET MVC系列】浅谈ASP.NET MVC 视图与控制器传递数据

    ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...

  7. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  8. 浅谈Normalize.css

    浅谈Normalize.css 一.总结 1.Normalize.css:它在默认的HTML元素样式上提供了跨浏览器的高度一致性,花了几百个小时来努力研究不同浏览器的默认样式的差异. 2.优于rese ...

  9. Java线上问题排查神器Arthas快速上手与原理浅谈

    前言 当你兴冲冲地开始运行自己的Java项目时,你是否遇到过如下问题: 程序在稳定运行了,可是实现的功能点了没反应. 为了修复Bug而上线的新版本,上线后发现Bug依然在,却想不通哪里有问题? 想到可 ...

随机推荐

  1. SQL Server 2008初次启动

    一.关于安装 SQL Server 数据库的安装,经过自己的安装,总体还是比较容易,没有太多难度,安装包在网上也有很多,在此,就跳过安装的这一步. 二.初次启动SQL Server 安装完成数据库后, ...

  2. powerdesigner生成mysql带注释的ER图

    1.安装PowerDesigner的 参考 https://blog.csdn.net/sinat_34104446/article/details/79885141 2配置逆向工程 2.1新建模型p ...

  3. Zookeeper与Kafka基础概念和原理

    1.zookeeper概念介绍 在介绍ZooKeeper之前,先来介绍一下分布式协调技术,所谓分布式协调技术主要是用来解决分布式环境当中多个进程之间的同步控制,让他们有序的去访问某种共享资源,防止造成 ...

  4. 我的第一个python web开发框架（33）——接口代码重构

    前面ORM模块我们已经完成了开发,接下来要做的就是对项目代码进行重构了.因为对底层数据库操作模块(db_helper.py)进行了改造,之前项目的接口代码全都跑不起来了. 在写ORM模块时,我们已经对 ...

  5. bibli直播弹幕实时爬取

    1 分析数据来源  在不知道弹幕信息在哪里的时候,只能去all里面查看每一个相应的信息,看信息是否含有弹幕信息 在知道弹幕信息文件的时候,我们可以直接用全局文件搜索,定位到弹幕数据文件.操作如下图 2 ...

  6. 【Python 09】汇率兑换2.0-2（分支语句）

    分支语句:根据判断条件选择程序执行路径 1.使用方法 if <条件1>: <语句块1> elif <条件2>: <语句块2> ... else: < ...

  7. flex布局justify-content属性和align-items属性设置

    前言: flex最常用的就是justify-content和align-items了,这里把这两个属性介绍下,大家更多关于flex布局可以查看阮一峰的日志,写的非常清楚! 阮一峰flex布局的日志:h ...

  8. SQL LCASE() 函数

    LCASE() 函数 LCASE 函数把字段的值转换为小写. SQL LCASE() 语法 SELECT LCASE(column_name) FROM table_name SQL LCASE() ...

  9. python中的struct模块的学习

    由于TCP协议中的黏包现象的发生,对于最low的办法,每次发送之前让他睡一秒,然后在发送,可是这样真的太low了,而且太占用资源了. 黏包现象只发生在tcp协议中: 1.从表面上看,黏包问题主要是因为 ...

  10. postman的使用大全

    转载 https://blog.csdn.net/fxbin123/article/details/80428216