bootstrap基础知识学习笔记

2024-12-13 21:33:12

在此就不做 bootstrap 的介绍了，近几年 bootstrap 越来越流行，一点不亚于 js 中的 jquery。

以下为 bootstrap 3.3.5 学习中记录的东西，方便查阅，作者使用的是 jsp ，跟 html 可能有稍许不同，请自行参考修改

【引用文件】

【页面引用】

路径请自行规划

<script type="text/javascript" src="<%=path%>/js-lib/jquery/jquery-1.11.2.min.js"></script> 

<!-- 未压缩 -->
<link rel="stylesheet" type="text/css" href="<%=path%>/js-lib/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/js-lib/bootstrap/css/bootstrap-theme.css" />
<script type="text/javascript" src="<%=path%>/js-lib/bootstrap/js/bootstrap.js"></script> 

<!--[if lt IE 9]>
<script src="<%=path%>/js-lib/html5/html5shiv.min.js"></script>
<script src="<%=path%>/js-lib/html5/respond.min.js"></script>
<![endif]-->

【标准模板】

<!DOCTYPE html>
<html>
 <head>
  <base href="<%=basePath%>">
  <meta lang="zh-CN"/>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" /> 

  <title>bootstrap 模板</title> 

  <script type="text/javascript" src="<%=path%>/js-lib/jquery/jquery-1.11.2.min.js"></script> 

  <!-- 未压缩 -->
  <link rel="stylesheet" type="text/css" href="<%=path%>/js-lib/bootstrap/css/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="<%=path%>/js-lib/bootstrap/css/bootstrap-theme.css" />
  <script type="text/javascript" src="<%=path%>/js-lib/bootstrap/js/bootstrap.js"></script> 

  <!--[if lt IE 9]>
  <script src="<%=path%>/js-lib/html5/html5shiv.min.js"></script>
  <script src="<%=path%>/js-lib/html5/respond.min.js"></script>
  <![endif]--> 

 </head> 

 <body>
  hello bootstrap!
 </body>
</html>

【css选择器优先级】
依次为

style 属性
id
class
元素标签

【媒体查询与 container 源码】
该样式利用媒体查询，根据页面宽度不同，展示不同

.container {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}
@media (min-width: 768px) {
 .container {
 width: 750px;
 }
}
@media (min-width: 992px) {
 .container {
 width: 970px;
 }
}
@media (min-width: 1200px) {
 .container {
 width: 1170px;
 }
}

【12栅格系统】

.row: 一行

.col-md-*: * 为列号

.col-md-offset-*: 列向右移几列的宽度

.col-md-push-*: 向右推（移动）几列

.col-md-pull-*: 向左拉（移动）几列

.clearfix visible-xs: 清除浮动，只在小型屏幕生效

【基础组件5种颜色】

primary(重点蓝)
success(成功绿)
info(信息蓝)
warning(警告橙)
danger(危险红)

【按钮】

<button type="button" class="btn btn-primary">btn-primary</button>
<button type="button" class="btn btn-success">btn-success</button>

按钮大小分为以下几个尺寸

xs: 超小
sm: 小型
缺省: 普通
lg: 大型

<button type="button" class="btn btn-primary btn-xs">btn-primary</button>
<button type="button" class="btn btn-success btn-sm">btn-success</button>
<button type="button" class="btn btn-success">btn-success</button>
<button type="button" class="btn btn-success btn-lg">btn-success</button>

【进度条】

进度条需js进行进度变动

<div class="progress progress-striped active">
 <div class="progress-bar" style="width: 45%;">
  45% Complete
 </div>
</div>

【下拉框】

<div class="btn-group">
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  我的书籍
  <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
  <li>
   <a href="javaScript:void(0)">JavaScript 编程精解</a>
  </li>
  <li>
   <a href="javaScript:void(0)">JavaScript 设计模式</a>
  </li>
  <li>
   <a href="javaScript:void(0)">JavaScript 启示录</a>
  </li>
  <li class="divider"></li>
  <li>
   <a href="javaScript:void(0)">深入理解 bootstrap3</a>
  </li>
 </ul>
</div>

【选项卡】

<ul class="nav nav-tabs" id="myTab">
 <li class="active">
  <a data-toggle="tab" href="#home">首页</a>
 </li>
 <li class="">
  <a data-toggle="tab" href="#profile">个人资料</a>
 </li> 

 <li class="dropdown">
  <!-- 点击 “我的书籍”， 弹出下拉带错 -->
  <a data-toggle="dropdown" href="#" class="dropdown-toggle">
   我的书籍
   <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
   <li>
    <a data-toggle="tab" href="#dropdown1">javaScript 编程精解</a>
   </li>
   <li>
    <a data-toggle="tab" href="#dropdown2">javaScript 设计模式</a>
   </li> 

   <li>
    <a data-toggle="tab" href="#dropdown3">javaScript 启示录</a>
   </li>
   <li>
    <a data-toggle="tab" href="#dropdown4">深入理解 bootstrap</a>
   </li>
  </ul>
 </li>
</ul>
<div class="tab-content" id="myTabContent">
 <div id="home" class="tab-pane fade active in">
  <p>点击 “首页”显示</p>
 </div>
 <div id="profile" class="tab-pane fade">
  <p>点击 “个人资料”显示</p>
 </div>
 <div id="dropdown1" class="tab-pane fade">
  <p>点击 “javaScript 编程精解” 显示</p>
 </div> 

 <div id="dropdown2" class="tab-pane fade">
  <p>点击 “javaScript 设计模式” 显示</p>
 </div>
 <div id="dropdown3" class="tab-pane fade">
  <p>点击 “javaScript 启示录” 显示</p>
 </div>
 <div id="dropdown4" class="tab-pane fade">
  <p>点击 “深入理解 bootstrap3” 显示</p>
 </div>
</div>

data-toggle="tab" href="#home"
可以使用
data-toggle="tab" data-target="#home"
替代，效果相同，js 默认先检测 data-target 属性，如果没有，再检测 href 属性，如果还没有，则默认为父元素

【表格】

<table class="table table-striped table-bordered table-hover table-condensed">
 <tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
 </tr>
 <tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
 </tr>
 <tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
 </tr>
</table>

table-striped : 斑马线
table-bordered : 边框
table-hover : 悬浮
table-condensed : 表格紧凑

注意，斑马线与鼠标悬浮样式，颜色与白色很接近，所以可能会误认为 table-striped 与 table-hover 没有生效，不起作用，

如果需要明显显示，我们需要重写样式颜色

/** 斑马线 **/
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
 background-color: #EFEFEF;
}
/** 悬浮 **/
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
 background-color: #DFE8F6;
}

【元素的隐藏与显示】

【响应式导航条】

<div class="navbar navbar-default">
 <div class="navbar-header">
  <!-- 无论是宽屏还是窄屏，navbar-brand 都会显示 -->
  <a class="navbar-brand" href="javaScript:void(0)">Brand</a>
  <!-- .navbar-toggle 样式用于 toggle 收缩的内容， 即 nav-collapse collapse元素 -->
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
   <span class="sr-only">Toggle navigation</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  </button> 

 </div>
 <!-- 屏幕宽度小于 768 时，该DIV 默认隐藏，(单机 icon-bar 图标，可以再展开)， 大于768 时显示 -->
 <div class="collapse navbar-collapse navbar-responsive-collapse">
  <ul class="nav navbar-nav">
   <li class="active">
    <a href="javaScript:void(0)">主页</a>
   </li>
   <li>
    <a href="javaScript:void(0)">作品</a>
   </li>
   <li class="dropdown">
    <a href="javaScript:void(0)" data-toggle="dropdown" class="dropdown-toggle">
     下拉菜单
     <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
     <li>
      <a href="javaScript:void(0)">子菜单1</a>
     </li>
     <li>
      <a href="javaScript:void(0)">子菜单2</a>
     </li>
    </ul>
   </li>
   <li>
    <a href="javaScript:void(0)">图书</a>
   </li>
  </ul>
 </div>
</div>

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程
Bootstrap实战教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Bootstrap如何激活导航状态

本文实例为大家分享了Bootstrap激活导航状态的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>Bootstrap-激活导航状态</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.min.css"> &
全系IE支持Bootstrap的解决方法

最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,firefox,safari,opera,360浏览器(极速模式).搜狗浏览器等浏览器下均没有问题,而在IE8及IE11下发现样式无法显示,然后各种百度啊,最后在一个网友帖子的帮助下解决了问题,先将解决方法总结如下: 首先需要确保你的HTML页面开始部分要有DOCTYPE声明.DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档,具体会影响: 对标记attribu
Bootstrap每天必学之基础排版

本次主要来了解的是排版,这个大部分在HTML的基本标签中也是存在的,所以相对比较简单,为了保证系列的完整性,也顺带复习下,还是记录一下.主要内容如下: 1.标题 2.页面主体 3.强调 4.缩略语 5.地址 6.引用 7.列表一.标题 Html中的所有标题标签,从<h1>到<h6>均可使用.另外还提供了.h1到.h6的class,为的是给inline属性的文本赋予标题的样式. <div class="container"> <h1 class
第一次接触神奇的Bootstrap

作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好.扩浏览器的解决方案. 1.下载Bootstrap 打开官方网址http://getbootstrap.com/ 进行下载. 2.准备项目模板文件夹接下来,我们为第一个项目创建一个文件夹以及一些基本的文件.谓词我们还要用到HTML5样板文件 HTML5 Boilerplate(H5BP),然后把Bootstrap的有用文件复制过去. 2.1 下载H5BP 访问网站链接地址:https://html5boilerp
Bootstrap开发实战之第一次接触Bootstrap

本文我们主要了解一下 Boostrap 历史.特点.用途,以及为什么选择 Boostrap 来开发我们的 Web 项目. 学习要点: 1.Bootstrap 概述 2.Bootstrap 特点 3.Bootstrap 结构 4.创建第一个页面 5.学习的各项准备一.Bootstrap 概述 Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML.CSS.JavaScript 的开源框架.该框架代码简洁.视觉优美,可用于快速.简单地构建基于 PC
Bootstrap如何创建表单

Bootstrap表单类型分为三种格式:垂直或基本表单.内联表单.水平表单. 垂直或基本表单(display:block;) 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列出了创建基本表单的步骤: 向父 <form> 元素添加 role="form". 把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的. 向所有的文本元素 <input>.<tex
vue中如何引入jQuery和Bootstrap

这两天学习了Vue.js ,所以,今天添加一点小笔记. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery --save-dev 这样就将jquery安装到了这个项目中. 然后修改webpack.base.conf.js(在build文件下)两个地方: 1:加入 var webpack=require('webpack'); 2 在module.exports的里面加入 plugins: [ new webpack.opt
如何使用bootstrap框架 bootstrap入门必看!

前言: 前几天,本想做一个登陆界面,但自己写form表单必然很丑,所以想用下bootstarp框架,之前听别人说bootstrap很牛的样子.但我完全不会bootstrap... 下载&目录看bootstrap官网,接着我下载了用于生产环境Bootstrap: 解压出来是这样的: 目录结构大概是这样的,前几天在官网有看到.下面这个目录结构你应该先了解下: bootstrap3 ├── css │├── bootstrap-theme.css //主题类型,生产上一般用不到 │├── boots
如何使用Bootstrap创建表单

Bootstrap 表单在本章中,我们将学习如何使用 Bootstrap 创建表单.Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 垂直或基本表单基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列出了创建基本表单的步骤: - 向父 <form> 元素添加 role="form". - 把标签和控件放在一个带有 class .form-group 的中.这是获取最佳间距所必需的. - 向所有的
第一次接触Bootstrap框架

关于Bootstrap,话不多说,直接进入主题: 安装可以通过bootstrap官方网站下载安装可以通过Bower安装(关于bower一种包管理器,本文不做详解) bower install bootstrap 可以通过npm安装(关于npm可以阅读) npm install bootstrap 项目中引入Bootstrap <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo

bootstrap基础知识学习笔记

相关推荐

随机推荐