学习地址：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. aspnetcoremodule 2.1下载

    下载地址 or 云盘 aspnetcoremodule 2.1 页面地址 下载地址 云盘下载 链接:https://pan.baidu.com/s/1YKYzpP7E__yXQKpOVrN6nw 密码 ...

  2. 闭包函数&回调函数

    闭包函数&回调函数 谈到回调函数,不得不提匿名函数;匿名函数,也叫闭包函数,也就是没有名字的函数,它可以单独存在,也可以将其赋值给某一个变量.so,先来看一下闭包函数. 闭包函数 php文档: ...

  3. 获取高精度时间注意事项 (QueryPerformanceCounter , QueryPerformanceFrequency)

    花了很长时间才得到的经验,与大家分享. 1. RDTSC - 粒度: 纳秒级 不推荐优势: 几乎是能够获得最细粒度的计数器抛弃理由: A) 定义模糊- 曾经据说是处理器的cycle counter,但 ...

  4. June. 22 2018, Week 25th. Friday

    Where words fail, music speaks. 言语无法表达时,音乐就会响起. From Hans Christian Andersen. Where words fail, musi ...

  5. sizeof和strlen()区别及用法

    //sizeof是以字节为单位计算变量或类型所占内存大小,它是属于C语言运算符系列:而strlen()是一个函数,是计算字符串长度(也是以字节为单位,但略有区别):比如: char array[] = ...

  6. scheme实现最基本的自然数下的运算

    版权申明:本文为博主窗户(Colin Cai)原创,欢迎转帖.如要转贴,必须注明原文网址 http://www.cnblogs.com/Colin-Cai/p/9123363.html 作者:窗户 Q ...

  7. 英语口语练习系列-C02-抱怨

    连接到英语口语系列总分类 连接到上一章棒棒的 竹石 郑燮 zhèng xiè 竹石 作者:郑燮 咬定青山不放松,立根原在破岩中. 千磨万击还坚劲,任尔东西南北风. Our team sucks. 我们 ...

  8. 线程池工厂方法newScheduledThreadPool(),计划任务

    package com.thread.test.ThreadPool; import java.util.concurrent.Executors; import java.util.concurre ...

  9. Django框架【form组件】

    from django.shortcuts import render,redirect # Create your views here. from .models import * from dj ...

  10. centos docker 安装

    centos docker 安装 参考网站 https://docs.docker.com/install/linux/docker-ce/centos/ 1.删除原有docker $ sudo yu ...