当前位置: 开发笔记 > 前端 > 正文

第九篇bootstrap实例

作者：IHH_MCWONG_142 | 来源：互联网 | 2023-09-17 17:09

1bootstrap的常用样式 Title

1 bootstrap的常用样式

"en">

"UTF-8">

"stylesheet" href="dist/css/bootstrap.css">

hello world

hello world

class="container">

class="row">

class="col-md-8 col-md-offset-2">
"1"class="table table-striped table-hover table-bordered">

class="success">

class="danger">

序号	姓名	年龄	部门
1	张三	23	销售
2	李四	23	销售
3	王五	23	销售

class="row">

class="col-md-8 col-md-offset-2">

class="form-group">
for="exampleInputEmail1">Email address
"email" class="form-control" id="exampleInputEmail1" placeholder="Email">

class="form-group">
for="exampleInputPassword1">Password
"password" class="form-control" id="exampleInputPassword1" placeholder="Password">

class="form-group">
for="exampleInputFile">File input
"file" id="exampleInputFile">

class="help-block">Example block-level help text here.

class="checkbox">

"checkbox"> Check me out

"">

class="form-group">
for="user">用户名
"text" class="form-control" id="user">

class="form-group">
for="pwd">密码
"password" class="form-control" id="pwd">

class="form-group">

class="row">

class="col-md-6">
<select class="form-control">

select>

class="row">

class="col-md-2 pull-right">"submit" class="form-control">

class="col-md-8 col-md-offset-2">

class="row">

按钮

class="btn btn-warning btn-lg" type="button" value="button">
class="glyphicon glyphicon-user">  
class="glyphicon glyphicon-shopping-cart">

View Code

2 bootstrap的栅格系统

"en">

"UTF-8">

"stylesheet" href="dist/css/bootstrap.css">

class="container-fluid">

class="row">

class="col-md-1">col-md-1

class="row">

class="col-md-6">col-md-1

class="row">

class="col-md-9">col-md-1

class="col-md-3">col-md-1

class="row">

class="col-md-6 col-sm-9">col-md-6

class="col-md-6 col-sm-3">col-md-6

列偏移

class="row">

class="col-md-4 col-md-offset-3">col-md-4

列嵌套

class="row">

class="col-md-6">

class="row">

class="col-md-6">col-md-6

列排序

class="row">

class="col-md-4 col-md-push-2">col-md-4

class="row">

class="col-md-4 col-md-push-4">col-md-4

class="col-md-4 col-md-pull-4">col-md-4(2)

class="row">

class="col-md-4 pull-right col-md-pull-2">col-md-4

View Code

3 基于bootstrap的页面

技术：导航条，面板，表格，分页，模态框

"en">

"UTF-8">

"stylesheet" href="dist/css/bootstrap.css">

class="navbar navbar-default">

class="container-fluid">

class="navbar-header">

class="navbar-brand" href="#">Brand

class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

nav navbar-nav

class="active">"#">Link class="sr-only">(current)

"#">Link

class="dropdown">
"#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown class="caret">
- "#">Action
- "#">Another action
- "#">Something else here
- "separator" class="divider">
- "#">Separated link
- "separator" class="divider">
- "#">One more separated link

class="navbar-form navbar-left">

class="form-group">
"text" class="form-control" placeholder="Search">

nav navbar-nav navbar-right

"#">Link

class="dropdown">
"#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown class="caret">
- "#">Action
- "#">Another action
- "#">Something else here
- "separator" class="divider">
- "#">Separated link

class="container">

class="row">

class="col-md-2">

class="panel panel-primary">

class="panel-heading">Panel heading without title

class="panel-body">
Panel content

class="panel panel-info">

class="panel-heading">Panel heading without title

class="panel-body">
Panel content

class="panel panel-success">

class="panel-heading">Panel heading without title

class="panel-body">
Panel content

class="col-md-10">

class="row">

class="jumbotron">
Hello, world!

...

class="btn btn-primary btn-lg" href="#" role="button">Learn more

class="col-md-8 col-md-offset-2">

"1"class="table table-striped table-hover table-bordered">

class="success">

class="danger">

序号	姓名	年龄	部门
1	张三	23	销售
2	李四	23	销售
3	王五	23	销售

class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

class="modal-dialog" role="document">

class="modal-content">

class="modal-header">

class="modal-title" id="myModalLabel">Modal title

class="modal-body">

class="form-group">
for="exampleInputEmail1">Email address
"email" class="form-control" id="exampleInputEmail1"
placeholder="Email">

class="form-group">
for="exampleInputPassword1">Password
"password" class="form-control" id="exampleInputPassword1"
placeholder="Password">

class="form-group">
for="exampleInputFile">File input
"file" id="exampleInputFile">

class="help-block">Example block-level help text here.

class="checkbox">

"checkbox"> Check me out

class="modal-footer">

View Code

4 表格示例

"en">

"UTF-8">

"stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
"stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

class="navbar navbar-default">

class="container-fluid">

class="navbar-header">

class="navbar-brand" href="#">Brand

class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

nav navbar-nav

class="active">"#">Link class="sr-only">(current)

"#">Link

class="dropdown">
"#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown class="caret">
- "#">Action
- "#">Another action
- "#">Something else here
- "separator" class="divider">
- "#">Separated link
- "separator" class="divider">
- "#">One more separated link

class="navbar-form navbar-left">

class="form-group">
"text" class="form-control" placeholder="Search">

nav navbar-nav navbar-right

"#">Link

class="dropdown">
"#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown class="caret">
- "#">Action
- "#">Another action
- "#">Something else here
- "separator" class="divider">
- "#">Separated link

class="container">

class="row">

class="col-md-3">

class="panel panel-primary">

class="panel-heading">Panel heading without title

class="panel-body">
Panel content

class="panel panel-info">

class="panel-heading">Panel heading without title

class="panel-body">
Panel content

class="panel panel-success">

class="panel-heading">Panel heading without title

class="panel-body">
Panel content

class="col-md-9">

class="table table-bordered table-striped">

class="tbody">

序号	姓名	年龄	部门
1	张三	23	销售部
2	李四	23	销售部
3	王五	23	销售部

class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

class="modal-dialog" role="document">

class="modal-content">

class="modal-header">

class="modal-title" id="myModalLabel">Modal title

class="modal-body">

class="form-group">
for="name">姓名
"text" class="form-control" id="name"
placeholder="Name">

class="form-group">
for="age">年龄
"text" class="form-control" id="age"
placeholder="Age">

class="form-group">
for="dep">部门
<select name="" class="form-control" id="dep">

select>

class="modal-footer">

View Code

5 轮播图

"en">

"UTF-8">

class="outer">

img

"">"https://imgcps.jd.com/ling4/100009077475/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa71/c3196f74/cr/s/q.jpg" alt="">

class="hide">"">"https://img12.360buyimg.com/pop/s590x470_jfs/t1/178599/8/1142/28979/6087858aE1679d862/173e0cfa2612b705.jpg.webp" alt="">

class="hide">"">"https://imgcps.jd.com/ling4/6038430/5Lqs5Lic5aW954mp57K-6YCJ/MuS7tjjmipgz5Lu2N-aKmA/p-5bd8253082acdd181d02fa42/9ea6716c/cr/s/q.jpg" alt="">

class="hide">"">"https://img12.360buyimg.com/pop/s1180x940_jfs/t1/174771/34/8431/98985/6095eaa2E8b8b4847/044f1b6318db4a9f.jpg.webp" alt="">

class="hide">"">"https://img11.360buyimg.com/pop/s1180x940_jfs/t1/180648/29/4209/88436/609f7547Ec7b73259/74a4d25e8d614173.jpg.webp" alt="">

num

class="current">

btn

class="left_btn"> <

class="right_btn"> >

View Code

作者：华王

博客：https://www.cnblogs.com/huahuawang/

bootstrap

推荐阅读

label
利用决策树预测NBA比赛胜负的Python数据挖掘实践

本文通过使用2013-14赛季NBA赛程与结果数据集以及2013年NBA排名数据，结合《Python数据挖掘入门与实践》一书中的方法，展示如何应用决策树算法进行比赛胜负预测。我们将详细讲解数据预处理、特征工程及模型评估等关键步骤。 ... [详细]

蜡笔小新 2024-12-23 09:07:40
上传
深入解析Java虚拟机（JVM）架构与原理

本文旨在为读者提供对Java虚拟机（JVM）的全面理解，涵盖其主要组成部分、工作原理及其在不同平台上的实现。通过详细探讨JVM的结构和内部机制，帮助开发者更好地掌握Java编程的核心技术。 ... [详细]

蜡笔小新 2024-12-21 23:50:40
npm
探索Bootstrap 5中的五种表单样式

本文将详细介绍如何在Bootstrap 5中使用五种不同的表单控件样式，包括输入框、选择器和文本区域等元素。 ... [详细]

蜡笔小新 2024-12-16 14:40:07
bootstrap
window下kafka的安装以及测试

目录一、安装JDK（需要安装依赖javaJDK）二、安装Kafka三、测试参考在Windows系统上安装消息队列kafka一、安装JDKÿ ... [详细]

蜡笔小新 2024-12-16 12:01:36
bootstrap
Kafka Topic 数据管理与清理策略

本文探讨了在生产环境中如何有效管理和定期清理Kafka Topic中的数据。介绍了基于时间、日志大小和日志起始偏移量三种清除方式，并重点讲解了基于时间的清除策略及其配置方法。 ... [详细]

蜡笔小新 2024-12-15 13:50:22
bootstrap
Spring Cloud Config 配置中心请求路径未生效问题解决

在使用 Spring Cloud Config 作为配置中心时，若在配置文件中指定了请求路径但未能生效，本文将探讨其原因及解决方案。 ... [详细]

蜡笔小新 2024-12-15 13:22:47
html
修复(Datepicker)：初始为空时输入验证器未被调用

修复了Datepicker组件中，当字段值默认为null时，输入验证器直到选择日期后才被调用的问题。 ... [详细]

蜡笔小新 2024-12-15 10:40:38
js
前端常用的布局类型——前端布局

1.Static静态布局固定宽高：2.Liquid流式布局宽高用百分比，按屏幕分辨率调整，布局不发生变化3.Adaptive自适应 ... [详细]

蜡笔小新 2024-12-14 10:35:02
bootstrap
PHP中静态类与静态变量的应用差异探讨

本文深入探讨了PHP编程语言中静态类与静态变量的具体应用及其差异性，旨在帮助开发者更好地理解和运用这些概念，以提升代码质量和效率。 ... [详细]

蜡笔小新 2024-12-13 16:35:20
npm
Web前端开发中Webpack项目的实用技巧总结

本文探讨了在使用Webpack构建前端项目时的一些实用技巧，包括如何高效地使用移动端UI框架Mint UI和MUI，以及如何优化项目性能和用户体验。 ... [详细]

蜡笔小新 2024-12-13 16:21:04
bootstrap
如何解决PHP中时间获取不准确的问题

本文探讨了在PHP开发过程中遇到的时间获取错误问题，并提供了详细的解决方案，包括通过修改配置文件和编程方法来调整时区设置。 ... [详细]

蜡笔小新 2024-12-13 15:33:22
bootstrap
Consul 单节点与集群环境构建指南

本文详细介绍了如何安装和配置 Consul 以支持服务注册与发现、健康检查等功能，包括单节点和集群环境的搭建步骤。 ... [详细]

蜡笔小新 2024-12-13 09:10:57
webkit
使用Bootstrap创建响应式渐变固定头部导航栏的方法

本文详细介绍了如何利用Bootstrap框架构建一个具有渐变效果的固定顶部响应式导航栏，包括HTML结构、CSS样式以及JavaScript交互的完整实现过程。适合前端开发者和学习者参考。 ... [详细]

蜡笔小新 2024-12-12 18:04:25
bootstrap
深入理解Java类加载机制

本文详细探讨了Java虚拟机（JVM）中类加载器的工作原理，特别是如何通过类的全限定名从外部源获取二进制字节流，以及不同类型的类加载器及其在双亲委派模型中的角色。 ... [详细]

蜡笔小新 2024-12-12 13:15:46
bootstrap
深入解析JVM：类加载子系统详解

本文旨在深入探讨Java虚拟机（JVM）中的类加载子系统，包括其基本结构、类加载器的工作原理、类的加载过程以及双亲委派机制。通过对这些关键点的详细分析，帮助读者更好地理解和掌握JVM的核心机制。 ... [详细]

蜡笔小新 2024-12-12 12:59:12

IHH_MCWONG_142

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章