首页 > 其他分享 >Bootstrap_栅格系统_注意事项与Bootstrap_全局CSS样式_按钮&图片

Bootstrap_栅格系统_注意事项与Bootstrap_全局CSS样式_按钮&图片

时间:2022-11-26 16:14:22浏览次数:66  
标签:样式 Bootstrap 栅格 按钮 注意事项 CSS

Bootstrap_栅格系统_注意事项

      

        栅格系统_注意事项:

            1.一行中如果格子数目超过12,则超出部分自动换行

            2.栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备

              3.如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素沾满一整行 

    

 

 

 

Bootstrap_全局CSS样式_按钮&图片

 

          全局CSS样式

              按钮:class="btn btn-default"

              图片

                 img-responsive:在任意尺寸都占100%

                   <img src="..." alt="..." class="img-rounded">:方形

                 <img src="..." alt="..." class="img-circle"> 椭圆形

                   <img src="..." alt="..." class="img-thumbnail">:相框形

<!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>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <style>

    </style>
</head>
<body>


<a class="btn btn-default"  href="#" >Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input  class="btn btn-default" type="button" value="Input">
<input  class="btn btn-default" type="submit" value="Submit">

<br>

<!-- Standard button -->
<button type="button" class="btn btn-default">(默认样式)Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">(首选项)Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">(成功)Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">(一般信息)Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">(警告)Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">(危险)Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">(链接)Link</button>


<br>
<img src="img/a.jpg" class="img-responsive">
<img src="img/a.jpg" class="img-responsive img-rounded">
<img src="img/a.jpg" class="img-responsive img-circle">
<img src="img/a.jpg" class="img-responsive img-thumbnail">





</body>
</html>

 

 

      

 

标签:样式,Bootstrap,栅格,按钮,注意事项,CSS
From: https://www.cnblogs.com/x3449/p/16927601.html

相关文章

  • Bootstrap_快速入门与Bootstrap_栅格系统_入门
    Bootstrap_快速入门Bootstrap快速入门1.下载Bootstrap2.将这个三文件复制到项目中 3.创建......
  • 案例6_表单检验与Bootstrap_概述
    案例6_表单检验<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>注册页面</title><style>*{margin:0px;......
  • Bootstrap_全局CSS样式_按钮&图片以及表格&表单
    Bootstrap_全局CSS样式_按钮&图片全局css样式:按钮:<aclass="btnbtn-default"href="#">Link</a>图片:<!--图片--><imgsrc="img/banner_1.......
  • Bootstrap栅格系统_入门以及注意事项
    Bootstrap栅格系统_入门响应式布局:同一套页面可以兼容不同分辨率的设备实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子步骤:1.......
  • [HTML+CSS]电商网站模板
    [HTML+CSS]电商网站模板b站白嫖的网课,黑马的小兔鲜儿案例,教程链接点这里就行成品文件目录结构CSSbase.css:基本样式,内外边距,字体之类的common.css:网页的公共样式,一般是heade......
  • 【爬虫】bs4搜索文档,css选择器,selenium基本使用
    目录1.bs4搜索文档树1.1字符串:可以按照标签名,属性名查找1.2正则表达式标签名,属性可以使用正则匹配1.3列表标签名,属性名等于列表或条件1.4True标签名,属性名......
  • 【CSS】实现 渐变色+圆角 border
    .charcard{position:relative; box-shadow:-5px0px32px2px#005bae1ainset,0px-5px32px2px#005bae1ainset,5px0px32px2px#005bae1ainset,......
  • 一、css简介
    网页分成三部分结构(html)表现(css)行为(javascript)css​ -层叠样式表​ -网页实际上是一个多层的结构通过css可以分别为网页的每一层来设置样式,而最终我们能看到只是......
  • 二、css语法
    style标签css中的注释/*这是注释*/css的基本语法:选择器声明块选择器,通过选择器可以选中页面中的指定元素,比如p的作用就是选中页面中的所有的p元素​ 声明块,通过......
  • 一些有用的CSS样式
    /*1.垂直对齐容器中的元素*/.verticalcenter{  position:relative;  top:50%;  -webkit-transform:translateY(-50%);  -......