bootstrap主要内容

最新推荐文章于 2023-02-23 18:10:56 发布

对不起我眼睛进沙子了

最新推荐文章于 2023-02-23 18:10:56 发布

阅读量532

点赞数 1

本文链接：https://blog.csdn.net/u014584271/article/details/104729081

版权

container容器

Bootstrap需要为页面内容和栅格系统包裹一个.container的容器.其中有.container和.container-fluid两个为div增加的类名,第一个的宽高固定,第二个铺满视窗.因为一些属性的原因
这俩种容器不能互相嵌套.

栅格布局

每一行最多包含十二列
用(div).row类名来快速创建一个行
在.row下用.col-xs-4这样的类名创建列
你可以为.col-(用法[class*=“col-”])(意为包含该字符段的类名全部都会被选中)设置背景padding等等属性

各种布局对应的大小

手机 .col-xs-$
小屏幕 .col-sm-$
中等屏幕.col-md-$
大屏幕 .col-lg-$

列偏移

例如使用.col-md-offset-$的类名就能实现列的右移.原理是通过设置类名后的数字为元素加上一个对应大小的左外边距(margin-left)
例如,给在.row下的一个div加上.col-md-offset-4就可以把这个元素向右偏移四个单位
在这里插入图片描述
以下是代码

<div class="row">
  <div class="col-md-4">.col-md-4</div> //这是原位置
  <div class="col-md-4 col-md-offset-4">.col-md-4  .col-md-offset-4</div> //这是偏移四个单位后的位置
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 . col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

列的嵌套

在一个列中再添加一个.row 以及一组.col-sm-$就可以实现列的嵌套,*被嵌套的.col-md- $ 元素不能超过十二个
在这里插入图片描述
以下是简单的实现代码

<div class="row"> //外层row
| <div class="col-sm-9">
|   Level 1: .col-sm-9
|   <div class="row"> //内层row
|   | <div class="col-xs-8 col-sm-6">
|   |   Level 2: .col-xs-8 .col-sm-6
|   | </div>
|   | <div class="col-xs-4 col-sm-6">
|   |   Level 2: .col-xs-4 .col-sm-6
|   | </div>
|   </div>
| </div>
</div>

列排序

使用的是.col-md-pull- $(向左移动$ 个单位) 和 .col-md-push- $(向右移动$ 个单位)的类就可以改变元素的排列
在这里插入图片描述
以下是简单的实现代码

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> //这个块本来在左边,现在被向右移动了三个单位
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> //这个快本来在右边,现在被向左移动了三个单位
</div>

排版

标题

bootstrap拥有<h1>-<h6>标签,还拥有.h1 - .h6的类,这是为了可以给inline元素提供样式

标题内还可以包含标签,或者被设为.small类的元素,可以用来标记副标题

h1. Bootstrap headingSecondary text

h2. Bootstrap headingSecondary text

h3. Bootstrap headingSecondary text

h4. Bootstrap headingSecondary text

h5. Bootstrap headingSecondary text

h6.Bootstrap headingSecondary text

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

页面主体

bootstrap将全局的font-size默认为14px,line-height默认为1.428
这些属性直接被赋予元素和所有的block元素.

元素被默认等于0.5倍的行高(即10px)和底部外边距

中心内容

可以添加.lead让段落突出显示
主要是引用在一堆<p>中

<p class="lead">xxx</p> //本行会被强调
<p> xxx</p>

内联文本元素

<mark>
可以让元素背景颜色变化
<del>
~~删除线~~
<s>
~~无用的文本~~
<ins>
插入文本
<u>
带下划线的文本

以下是通过HTML自带的标签可以为元素增加一些样式

小号文本,标签包裹,其中的文本大小是父容器字体的85%,
行内元素可以被

<strong>强调

<em>斜体

引用

可以将元素包裹在<blockquote>中即可表现出引用框的样式,这里建议包裹<p>元素
加入<footer>,标明引用来源,来源的名称请使用<cite>标签包裹

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>  //段落内容
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>  //这里用footer包裹整个引用,它会在前面自动加横线,然后在里面包裹cite表示名称
</blockquote>```

可以使用 .blockquote-reverse 类名让引用框右对齐

代码

内联代码

通过<code>标签包裹内联的代码段
比如

<code>
	<!DOCTYPE html>
	<html lang="en">
	<head>
		    <meta charset="UTF-8">
	  	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	   	 <title>Index</title>
	    <link rel="stylesheet" href="./index.css">
	</head>
	<body>
	    <!-- 导航栏 -->
	    <div class="container">
	        <nav>
	            <input type="checkbox" id="nav" class="hidden">
	            <label for="nav" class="nav-btn">
	                <i class="st"></i>
	                <i class="ed"></i>
	                <i class="rd"></i>
	            </label>
	            <div class="logo"><a href="#">MINECRAFT</a></div>
	            <div class="nav-wrapper">
	                <ul>
 	                   <li class="st"><a href="#">GAMES</a></li>
 	                   <li class="ed"><a href="#">COMMUNITY</a></li>
 	                   <li class="rd"><a href="#">MERCH</a></li>
	                    <li class="last"><a href="#">SUPPORT</a></li>
	                </ul>
 	           </div>
	        </nav>
	    </div>
	    </body>
 </code>

用户输入

通过<kbd>标签标记用户通过键盘输入的内容(可以做出指导按键的效果)
比如ctrl+alt

<kbd><kbd>ctrl</kbd>+<kbd>alt</kbd></kbd>

代码块

多行代码请用<pre>标签,其中的 ‘<’ 和 ‘>’ 请做转义处理,用字符代码代替
还可以使用.pre-scrollable类,它会默认max-height="350px",并在垂直方向显示滚动条

变量

用<var>标签来标记
例如
x+4=y

<var>x</var>+4=<var>y</var>

表格

基本例子

bootstrap中使用.table类来为<table>元素赋予少量的样式
在这里插入图片描述

条纹状表格

table-striped可以给<tbody>之内的每一行增加斑马条纹样式
在这里插入图片描述

带边框的表格

.table-bordered 类可以为表格和其中的每个单元格增加边框
在这里插入图片描述

紧缩表格

通过添加 .table-condensed类可以让表格更加紧凑,单元格中的padding会比标准表格减半
在这里插入图片描述

表单元素

基本例子

所有设置了 .form-control类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽为 100%;。将 <label>元素和前面提到的控件包裹在 .form-group中可以使控件拥有最好的排列方式。

  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>```

内联表单

为<form>元素添加.form-inline类可以使其内容左对齐,同时变成inline-block级别的控件.但是只适用于窗口大于等于768px时

注意!

在bootstrap中,输入框和单选多选框默认width:100%:,而带有.form-inline属性父容器的输入框和多选单选框宽度会被默认设置为auto.所以请根据自己的使用需要进行重新布局
对于每个输入控件要添加<lable>标签,否则浏览器可能无法正常识别

水平排列表单

为<form>标签加上.form-horizontal类名,接着就可以为<label>标签以及其中的控件组加上栅格系统的类名,这个时候无需再创建.row的父容器,控件们就会表现栅格系统的行为
在这里插入图片描述
图中的文本框名称是两个<label>标签,在使用了.form=horizontal类名后,给其加上对应的栅格类名,就可以让该输入跨和label在一行内显示,这样会出现点击email选中后面输入框的效果

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

对不起我眼睛进沙子了

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap主要内容

container容器Bootstrap需要为页面内容和栅格系统包裹一个.container的容器.其中有.container和.container-fluid两个为div增加的类名,第一个的宽高固定,第二个铺满视窗.因为一些属性的原因这俩种容器不能互相嵌套.栅格布局每一行最多包含十二列用(div).row类名来快速创建一个行在.row下用.col-xs-4这样的类名创建列你可...
复制链接

扫一扫