前端知识-07

糖果爱上我

已于 2023-12-27 09:17:57 修改

阅读量173

点赞数 1

文章标签：前端 html javascript python

于 2023-11-08 17:00:37 首次发布

本文链接：https://blog.csdn.net/qq_48064830/article/details/134293824

版权

Bootstrap的概念

# 网址：Bootstrap中文网 (bootcss.com)

# 概念：

bootstrap来自Twitter，是目前很受欢迎的前端框架，基于HTML、CSS、JavaScript的，简单灵活，使得Web开发更加快捷。

# 优点：

1、标准化的html+css编码规范

2、提供了一套简洁、直观、强悍的组件

3、有自己的生态圈，不断的更新迭代

4、让开发更简单，提高了开发的效率

# Bootstrap中css样式库使用：引入相关样式文件
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

css样式之布局容器和栅格系统

1、布局容器：

.container响应式布局容器，固定宽度，由设备宽度决定

.container-fluid 流失布局容器，百分百宽度，占据全部视口的容器

2、栅格系统(grid systems):

# 概念它是指将布局容器划分为等宽的列(rem布局是划分屏幕)，然后通过定义一定数量的列来模块化页面布局。 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。

# 栅格选项参数：

-row必须放在container布局容器里面 , row可以去除父容器作用15px的边

-当设置的column大于12，多余的column所在的元素将被作为一个整体另起一行排列

-当设置的column小于12,则占不满整个container 的宽度，会有空白。

-可以同时为一列指定多个设备的类名，以便在不同设备下占有不同份数

例如 class=“col-md-4 col-sm-6”

# 初始写法：
	<... class="container">
        <... class="row">
            <... class="col-lg-3 col-md-4 col-sm-6 col-xs-12">...</...>
            <... class="col-lg-3 col-md-4 col-sm-6 col-xs-12">...</...>
            <... class="col-lg-3 col-md-4 col-sm-6 col-xs-12">...</...>
            <... class="col-lg-3 col-md-4 col-sm-6 col-xs-12">...</...>
        </...>
    </...>
# 列嵌套，栅格系统再次嵌套一个内置的栅格系统，这个内置的栅格系统作为该列的内容
	
	<... class="col-sm-4">
		<... class="row">
			<... class="col-sm-6">...</...>
			<... class="col-sm-6">...</...>
		</...>
	</...>
# 列偏移 .col-*-offset-* 可以将列向右侧偏移，实际是为当前元素增加了左侧的边距。
<... class="row">
	<... class="col-lg-4"></...>
	
	<... class="col-lg-4 col-lg-offset-4"></...>
</...>
# 列排序 .col-*-push-* 和 .col-*-pull-* ，第一个向后推，第二个向前拉
<... class="row">
	
	<... class="col-lg-4  col-lg-push-8"></...>
	
	<... class="col-lg-8  col-lg-pull-4"></...>
</...>
3、响应式工具针对不同设备展示或隐藏页面内容

css样式之表格

class="table" 普通表格

class="table table-dark" 反转颜色表格

class="table table-striped" 条纹状表格

class="table table-bordered" 有边框的表格

class="table table-hover" 有鼠标悬停样式的表格

class="table table-sm" 紧缩表格的表格

<thead class="thead-dark"> ... </thead> 含表头样式表格

<table class="table table-hover table-striped table-bordered">
# 普通表格+有鼠标悬停样式的表格+条纹状表格+有边框的表格
    <thead>
    <tr>
        <th>ID</th>
        <th>图书名称</th>
        <th>图书价格</th>
        <th>出版时间</th>
        <th>作者列表</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>
            <a href="" class="btn btn-success">修改</a>
            <a href="" class="btn btn-danger">删除</a>
        </td>
    </tr>
    </tbody>
</table>

# 含有状态类的子项的表格

	<!-- On rows -->
	<tr class="table-active">...</tr>
	<tr class="table-primary">...</tr>
	<tr class="table-secondary">...</tr>
	<tr class="table-success">...</tr>
	<tr class="table-danger">...</tr>
	<tr class="table-warning">...</tr>
	<tr class="table-info">...</tr>
	<tr class="table-light">...</tr>
	<tr class="table-dark">...</tr>
	
	<!-- On cells (`td` or `th`) -->
	<tr>
	  <td class="table-active">...</td>
	  <td class="table-primary">...</td>
	  <td class="table-secondary">...</td>
	  <td class="table-success">...</td>
	  <td class="table-danger">...</td>
	  <td class="table-warning">...</td>
	  <td class="table-info">...</td>
	  <td class="table-light">...</td>
	  <td class="table-dark">...</td>
	</tr>

css样式之表单

form-group 将 label 元素和控件包裹在 .form-group 中可以获得最好的排列

1、栅格布局：.form-row .col-设备-格数
 <div class="form-row">
	 <div class="form-group col-设备-格数">
	 	...
	 </div>
</div>
2、水平布局：.col-form-label，<label>使它们与相关的表单控件垂直居中
 	<div class="form-group row">
	  	<label class="col-设备-格数 col-form-label"></label>
	    <div class="col-设备-格数">
	      	<input class="form-control" >
	    </div>
    </div>
3、基本表单：

form-control类的<input><textarea>和<select> 元素都将被默认设置宽度属性为width: 100%;
.form-control-lg 和 .form-control-sm设置高度
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
4、复选框和单选框

.form-check 垂直堆叠

.form-check-inline水平堆叠

class="form-inline"内联表单

.form-text 块级帮助文本/ .text-muted 内联帮助文本
<small  class="form-text text-muted">
	...
</small>

css样式之按钮

1、普通按钮

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

2、轮廓按钮

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

3、尺寸

//大尺寸
<button type="button" class="btn btn-primary btn-lg">Large button</button>
//小尺寸
<button type="button" class="btn btn-primary btn-sm">Small button</button>
//块级按钮
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>

4、<button class="active"> ... </button>

处于活动状态时，按钮将显示为按下状态（背景变暗，边框变暗和阴影变暗）

禁用状态，使按钮看起来不活动

5、按钮组

	<div class="btn-group" role="group">
	  <button type="button" class="btn btn-...">...</button>
	  <button type="button" class="btn btn-...">...</button>
	  ...
	</div>