欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

BootStrap

程序员文章站 2022-03-09 12:13:48
...

BootStrap

BootStrap的概述和快速入门

BootStrap的概述

1.BootStrap是Twitter公司开发的前端框架
2.好处:

  	a.包含有很多定义好的 CSS和JS代码,可以直接使用
  	b.支持响应式布局.（一套代码在不同分辨率上面都有很好的体验效果）

BootStrap的入门

中文官方网站地址 http://d.bootcss.com/bootstrap-3.3.5.zip
1.复制文件

  	bootstrap-3.3.7-dist 文件夹下面的 css js fonts 文件夹复制项目.
  	jquery-3.2.1.min.js 文件复制到 js 目录下面

2.复制模板代码

  	Bootstrap离线文档\v3.bootcss.com\index.htm -> 起步 -> 基本模板

3.模板代码

  	<!DOCTYPE html>
  	<html lang="zh-CN">
  		<head>
  			<meta charset="utf-8">
  			<meta http-equiv="X-UA-Compatible" content="IE=edge">
  			<meta name="viewport" content="width=device-width, initial-scale=1">
  			<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟>随其后！ -->
  			<title>基础模板</title>

  			<!-- Bootstrap css 引入的路径需要修改 -->
  			<link href="../css/bootstrap.min.css" rel="stylesheet">

  		</head>
  		<body>
  		<h1>Hello，World！</h1>

  		<!-- jQuery 引入的路径需要修改-->
  		<script src="../js/jquery-3.2.1.min.js"></script>
  		<!-- bootstrap.min.js 引入的路径需要修改 -->
  		<script src="../js/bootstrap.min.js"></script>
  		</body>
  	</html>

BootStrap的常用样式组件插件

栅格系统(体现出"响应式布局")

1.将屏幕划分成为12个格子
2.操作步骤

  	a.样式"理解成为table"  .container (两端留白) 或者 .container-fluid (宽度>全屏)
  	b.样式"理解成为tr"		.row
  	c.样式"理解成为td"		.col-尺寸-占格数目

3.尺寸的大小: (顺序"英文字母顺序lmsx")

  	a. lg 超大屏幕尺寸(超大)
  	b. md 中等屏幕尺寸(大)
  	c. sm 平板屏幕尺寸(中等)
  	d. xs 手机屏幕尺寸(小)

4.注意事项

    a.设置的"占格数目"超过12会前面的独占一行,后面的自动换一行
  	b.设置的"尺寸"大于设备的尺寸,会独占一行
  	c.设置的"尺寸"小于设备的尺寸,会向上兼容,也具备上面的效果.

5.列偏移

  	a.语法
  		col-尺寸-offset-占格数目
  	b.含义
  		在原始的栅格当中,占据几个空白格子

按钮样式设置

1.位置

  	文档: 全局CSS样式 -> 按钮

2.设置

  	<button type="button" class="btn btn-default">（默认样式）Default</button>
  	<button type="button" class="btn btn-primary btn-lg">（大按钮）Large >button</button>

图片样式设置

A.位置

  	文档: 全局CSS样式 -> 图片

B.设置

  	<img src="..." alt="..." class="img-rounded">  <!-- 圆角矩形 -->  
  	<img src="..." alt="..." class="img-circle">   <!-- 椭圆 -->  
  	<img src="..." alt="..." class="img-thumbnail"> <!-- 相框 -->

表格

1.位置

  	文档: 全局CSS样式 -> 表格

2.设置

  	<table class="table table-hover"> <!-- 鼠标悬浮 -->  
  	<table class="table table-bordered"> <!-- 带有边框 -->  
  	<table class="table table-striped"> <!-- 条纹表格 -->

表单

1.位置

  	文档: 全局CSS样式 -> 表单

2.设置

  	水平表单

导航条

1.位置

  	文档: 组件 -> 导航条

2.设置

  	<nav class="navbar navbar-inverse">  <!-- 反色设置"黑色" -->

分页条

1.位置

  	文档: 组件 -> 分页

轮播图

1.位置

  	文档: JavaScript插件 -> Carousel

2.设置

  	data-interval="3000"  <!-- 设置时间差 每隔多长时间替换一次 -->
相关标签： BootStrap

上一篇： PHP标准库 (SPL)之Countable用法示例

下一篇： 通过Powershell修改文件默认打开方式

推荐阅读