bootstrap

最新推荐文章于 2022-12-05 11:40:29 发布

likely001

最新推荐文章于 2022-12-05 11:40:29 发布

阅读量152

点赞数

分类专栏：前端 web

本文链接：https://blog.csdn.net/qq_16688265/article/details/82595185

版权

web 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

bootstrap框架

基本模板

浏览器加载js是阻塞的，所以考虑到性能一般会把js放到body底部引入，实际开发中考虑到多个一面会公用一个头部，更多的是把js放在head中引入

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<!-- 引入bootstrap样式 -->
	<link rel="stylesheet" href="example/css/bootstrap.min.css">
</head>
<body>
	<h1>hello world!</h1>
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="example/js/jquery-1.12.4.min.js"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="example/js/bootstrap.min.js"></script>	
</body>
</html>

bootstrap 容器

container
类用于固定宽度并支持响应式布局的容器;1170/970/750/100%

<div class="container">
  ...
</div>

container-fluid
类用于 100% 宽度，占据全部视口（viewport）的容器

<div class="container-fluid">
  ...
</div>

bootstrap 栅格系统

bootstrap将页面横向分为12等分，按照12等分定义了适应不同宽度等分的样式类，这些样式类组成了一套响应式、移动设备优先的流式栅格系统：

col-lg-
col-md-
col-sm-
col-xs-
col-lg-offset-
col-md-offset-
col-sm-offset-
col-xs-offset-

bootstrap响应式查询区间

大于等于768
大于等于992
大于等于1200

bootstrap按钮

btn 声明按钮
btn-default 默认按钮样式
btn-primay
btn-success
btn-info
btn-warning
btn-danger
btn-link
btn-lg
btn-md
btn-xs
btn-block 宽度是父级宽100%的按钮
active
disabled
btn-group 定义按钮组

bootstrap表单

form 声明一个表单域
form-inline 内联表单域
form-horizontal 水平排列表单域
form-group 表单组、包括表单文字和表单控件
form-control 文本输入框、下拉列表控件样式
checkbox checkbox-inline 多选框样式
radio radio-inline 单选框样式
input-group 表单控件组
input-group-addon 表单控件组物件样式 10、input-group-btn 表单控件组物件为按钮的样式
form-group-lg 大尺寸表单
form-group-sm 小尺寸表单

bootstrap字体图标

通过字体代替图标，font文件夹需要和css文件夹在同一目录

####bootstrap图片

img-responsive 声明响应式图片
图片的响应：如果容器的宽度比图片大，图片就等于自己的宽度,如果容器的宽度比图片小，那么图片的宽度就等于容器的宽度减去左右padding值
img-rounded 圆角样式
img-circle 圆形样式
img-thumbnail 缩略图样式

bootstrap导航条

navbar 声明导航条
navbar-default 声明默认的导航条样式
navbar-inverse 声明反白的导航条样式
navbar-static-top 去掉导航条的圆角
navbar-fixed-top 固定到顶部的导航条
navbar-fixed-bottom 固定到底部的导航条
navbar-header 申明logo的容器
navbar-brand 针对logo等固定内容的样式
navbar-left 菜单靠左
navbar-right 菜单靠右
nav navbar-nav 定义导航条中的菜单
navbar-form 定义导航条中的表单
navbar-btn 定义导航条中的按钮
navbar-text 定义导航条中的文本

bootstrap路径导航

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

bootstrap隐藏类

hidden-xs
hidden-sm
hidden-md
hidden-lg

<style type="text/css">
	div[class*='col-']{
		background-color:gold;
		border:1px solid #000;
		height:50px;
	}
</style>

<div class="container">
	<h1>隐藏类</h1>
	<div class="row">
		<div class="col-lg-3">col-lg-3---1</div>
		<div class="col-lg-3">col-lg-3---2</div>
		<div class="col-lg-3">col-lg-3---3</div>
		<div class="col-lg-3 hidden-md hidden-sm hidden-xs ">col-lg-3---4</div>
	</div>
</div>